I am trying to get the dropdown menu in Bootstrap 2.3.2 to be full screen.
Here is a demo: http://bootply.com/100126
So when you click on a drop down area, the dropdown will be edge to edge single line but I can't quite figure out how to get there.
If I specify a certain width in px I can get it to work but means I get left to right scroll etc. and that is not ok ;-)
Any advice would be appreciated!
For your .dropdown-menu style, set the position property to fixed, and the top property to 40px as shown below:
.dropdown-menu {
position: fixed !important;
display: block;
float: left;
left: 0 !important;
top: 40px;
height: 35px;
z-index: 1000;
display: none;
list-style: none;
width: 100%;
background-color: #58e137;
}
//the following style is left in from your code
.dropdown-menu li {
float:left;
}
Then, these styles will override bootstrap styles for the default position of the little drop-down arrow, and position them relative to the menu item clicked on rather than the actual drop-down menu:
//custom style
.navbar .nav li.open:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
bottom: -4px;
left: 9px;
z-index: 2000;
}
//custom style
.navbar .nav li.open:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
bottom: -3px;
left: 10px;
z-index: 2000;
}
//bootstrap override
.navbar .nav>li>.dropdown-menu:before {
content: '';
display: inline-block;
border-left: 0px solid transparent;
border-right: 0px solid transparent;
border-top: 0px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 9px;
}
//bootstrap override
.navbar .nav>li>.dropdown-menu:after {
content: '';
display: inline-block;
border-left: 0px solid transparent;
border-right: 0px solid transparent;
border-top: 0px solid #ffffff;
position: absolute;
top: -6px;
left: 10px;
}
This should work for all drop-down menus without needing to add any JavaScript to position elements. Just remember that since we are overriding the bootstrap styles, any page that uses these styles will also be over-ridden.
Related
How can I place the tooltip centered and directly under the red circle without Javascript? Thank you in advance! :-)
Here is an image of my problem and the marked position where it should be:
My code currently looks like this:
HTML code:
<li>
<a class="ovm-oup_tooltip" href="#">
<div id="ovm-oup_under_item_1" class="ovm-oup_under_item">
<span>Text</span>
<img src="Example_Logo.svg" alt="">
</div>
</a>
</li>
CSS code:
#ovm-oup_under ul{
text-align: center;
list-style-type: none;
padding: 0;
}
#ovm-oup_under li{
padding: 20px;
margin: 15px;
display: inline-block;
}
.ovm-oup_under_item{
width: 96px;
height: 96px;
border-radius: 50%;
box-shadow: 0 0 20px 5px rgba(0,0,0,.2);
margin: 5px 5px 35px 5px;
}
.ovm-oup_tooltip {
position: relative;
display: inline;
}
.ovm-oup_tooltip span {
position: absolute;
width: auto;
padding: 3px 15px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 4px;
}
.ovm-oup_tooltip span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.ovm-oup_tooltip:hover span {
visibility: visible;
margin: 0;
top: 0%;
left: 50%;
z-index: 999;
}
One solution would be to combine absolute placement of the tooltip (relative to the parent div), with a translation transformation on the tooltip, which would achieve the required placement:
/* Extracted styling to top of style sheet to show the required additions */
.ovm-oup_tooltip span {
/* Offset the tooltip 50% from left side of parent (div) width
and 100% from top edge of parent height */
left: 50%;
top: 100%;
/* Pull the tooltip back 50% of it's own width, nudge the tool
tip downward 8px to account for arrow point */
transform: translate(-50%, 8px);
}
.ovm-oup_under_item {
/* Allow absolute placement of children (tooltip) */
position: relative;
}
/* Your existing styling starts here */
.ovm-oup_under_item {
width: 96px;
height: 96px;
border-radius: 50%;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, .2);
margin: 5px 5px 35px 5px;
}
.ovm-oup_tooltip {
position: relative;
display: inline;
}
.ovm-oup_tooltip span {
position: absolute;
width: auto;
padding: 3px 15px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 4px;
}
.ovm-oup_tooltip span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.ovm-oup_tooltip:hover span {
visibility: visible;
margin: 0;
/* Remove
top: 0%;
*/
left: 50%;
z-index: 999;
}
<a class="ovm-oup_tooltip" href="#">
<div id="ovm-oup_under_item_1" class="ovm-oup_under_item">
<span>Text</span>
<img src="Example_Logo.svg" alt="">
</div>
</a>
The idea here is to use absolute placement of the tooltip (ie the span), to position the top-left corner of that span at the horizontal center, and bottom edge of the parent div. The transform rule is then used to offset the tooltip span relative to it's own dimensions, to achieve the final center/baseline placement.
You can merge the additions above with your existing styling - I extracted the changes to the top of the stylesheet to clarify the additons that were made to achieve the desired result. Hope that helps!
I was wondering if its able to have a square that has a point on the right side of it something like this in just one css:
http://prntscr.com/59wn94
I tried to make one just by using one div I wasn't able to manipulate enough its much easier for when creating a square then just add up a triangle right to it. but I want something that is on just on css like a combination of square and triangle-right.
Here is my http://jsfiddle.net/wbZet/1311/ . I just improvised some fiddle to create this stuff.
<div id="nav">
<a>PLAY</a>
</div>
<div id="triangle-up" />
#triangle-up {
width: 0;
height: 0;
border-left: 35px solid red;
border-bottom: 25px solid transparent;
border-top: 25px solid transparent;
float: left;
}
#nav {
float:left;
display: block;
height:50px;
padding: 0px 10px;
background: red;
}
#nav a {
margin: 25px 0px;
}
Use Pseudo-elements - CSS
div{
position: relative;/*it important to set this to relative to be able to use :before in absolute*/
width: 60px;
height: 40px;
background: red
}
div:before{
content: '';
position:absolute;
left: 100%;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid red
}
<div>Play</div>
Visit http://onecraftyshop.com
You will see the grey box on the first section with a star. If you look at the html it will be under #av_section_2 as .arrow-down.
I'm inserting the .arrow-down class using jQuery.
jQuery('#av_section_2').prepend(jQuery('<div class="arrow-down"></div>'));
And here is my css for the styling:
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #eeeeee;
position: absolute;
top: 0px;
left: 50%;
}
So i'm sure that the jquery is fine as it is displaying on the page, but for some reason I can't get the css to make a triangle.
How can I fix this? the corrected css would be great!
If you need any other info let me know!
Thanks
You need to be more specific because some other rules in your style sheet are over-riding it.
.avia-section .arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #eeeeee;
position: absolute;
top: 0px;
left: 50%;
}
I'm just going to create a box on the
edge has an arrow. I have quite often tried but unfortunately relevant solution.
I naturally inquired on the Internet and on the website, but unfortunately without success.
So it should look after:
the arrow should have the same border like the box and the same backgroundcolor
So it looks now
.arrow-up {
width: 10px;
height: 10px;
margin-top: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid gray;
}
#log2 {
height: 250px;
width: 250px;
background: white;
border: 1px groove rgba(0, 0, 0, .35);
position: relative;
display: block;
margin-top: 54px;
float: left;
left: 29.965%;
z-index: 2;
border-radius: 3.5px;
}
FIDDLE
I'm sorry for my english
Here's updated fiddle: FIDDLE.
You can try with this CSS:
#log2 {
border: 1px solid #ccc;
border-radius: 3px;
width: 300px;
padding: 10px;
margin: 15px auto 0;
position: relative;
background: #fff;
}
#log2:after {
content: "";
display: block;
position: absolute;
border-style: solid;
border-color: #ccc;
border-width: 1px 0 0 1px;
width: 15px;
height: 15px;
top: -9px;
right: 19px;
background: inherit;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
However, this includes transform property which is a new feature and might not work in every browser.
Other solutions are fine but they won't let you add border to this little triangle. You pick the one that suits you.
EDIT:
Yet another fiddle: http://jsfiddle.net/dAdry/22/.
I also figured out how to do this without transform. You put two triangles, one grey and one white a little bit smaller.
#log2 {
border: 1px solid #ccc;
border-radius: 3px;
width: 300px;
padding: 10px;
margin: 15px auto 0;
position: relative;
background: #fff;
}
#log2::before, #log2::after {
content: "";
display: block;
position: absolute;
border-style: solid;
border-width: 0 10px 10px 10px;
right: 19px;
}
#log2::before {
border-color: #ccc transparent;
top: -10px;
right: 19px;
}
#log2::after {
content: "";
display: block;
position: absolute;
border-style: solid;
border-color: #fff transparent;
border-width: 0 10px 10px 10px;
top: -9px;
}
Try it out and let me know if it suits you.
Create your triangle using :before
http://jsfiddle.net/dAdry/9/
#log2:before {
content: "";
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 7.5px 8px 7.5px;
border-color: transparent transparent white transparent;
position: absolute;
display:block;
top: -8px;
}
.arrow-up {
width: 0;
height: 0;
margin-top: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid gray;
}
fiddle
http://jsfiddle.net/dAdry/27/
This creates a border.
The CSS
.arrow-up {
width: 0px;
height: 0px;
margin:0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid gray;
}
.arrow-inner {
width:0;
height:0;
margin:1px 0 0 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;
}
#log2 {
height: 250px;
width: 250px;
background: white;
border: 1px groove rgba(0, 0, 0, .35);
position: relative;
display: block ;
margin-top: 54px;
float: left;
left: 29.965%;
border-radius: 3.5px;
}
And the HTML...
<ul id="log2" style="display: inline;">
<span class="arrow-up" style="top: -9px; left: 70.0%; position: absolute; background-size: 100%; z-index: 999;" ></span>
<span class="arrow-inner" style="top: -9px; left: 70.0%; position: absolute; background-size: 100%; z-index: 999;"></span>
<br/>How are u?<br/>Whats the matter? :D
</ul>
http://jsfiddle.net/rajkumart08/8p2mZ/2/embedded/result/
When I click the more options a popup comes, but when I reduce the width and height if the browser using mouse... The popup does not move along with more options div...
How do I fix the issue? Please help.
My code is here: http://jsfiddle.net/rajkumart08/8p2mZ/3/
.openme {
display: inline-block;
padding: 10px;
cursor: pointer;
padding: 0;
margin: 0 20px 0 0;
width: 200px;
height: 200px;
list-style-type: none;
background: white;
border: 1px solid #999;
line-height: 200px;
padding: 0;
}
#menu{
display: inline-block;
opacity: 0;
visibility: hidden;
position: absolute;
padding:0px;
border: solid 1px #000;
margin: 0 auto 0 auto;
background: white;
top: 350px;
left: 649px;
-webkit-box-shadow: 0px 2px 13px rgba(50, 50, 50, 0.48);
}
#menu.show {
opacity: 1;
visibility: visible;
}
#menu a{
float:left;
/*margin: 7px;*/
padding: 10px 20px;
font-weight: bold;
font-size: 10px;
text-align: center;
background: white;
color: black;
word-wrap: normal;
/*border: 1px solid red;*/
}
One way is to specify the position of the menu in terms of % of the windows size.
E.g.
Instead of
top: 350px;
left: 649px;
specify
top: 15%;
left: 15%;
This will ensure that the menu is always positioned w.r.t the width of the window upon resize.
First, thing is give a min-width to parent container - .app-home div and make it `position:relative'.
Next, use right position instead of left for menu div.