I have a drop down in column header of the table. The Drop Down element is as shown below
<button class="btn btn-default dropdown-toggle grad1" >
<b>Impact</b><span class="caret"></span><span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu" style="position:relative;top:inherit;left:inherit;cursor:pointer">
<li><a ng-click="filterImpact('')">All</a></li>
<li><a ng-click="filterImpact('H')">High</a></li>
<li><a ng-click="filterImpact('M')">Medium</a></li>
<li><a ng-click="filterImpact('L')">Low</a></li>
</ul>
But the drop down is not attached to the Main Menu. i.e If i scroll down than the drop down remains in the same location and doesn't move up along with the Header. The obvious solution is to make
position:relative
but in that case the options are hidden behind the table and not accessible to the user. I am missing some css over here..
please help :)
UPDATE
Things tried so far.
position:absolute,fixed,relative
and
z-index:2000 //so it surpasses all elements.
UPDATE
To make things easier here is the plunk.
Select Gender Drop Down is not working here.
Try to add display: inline; to your style.
Try to add z-index attribute to dropdown
change position,top and margin and z-index to be on top.
position:absolute;
top:0;
margin-top:30px;
z-index:9999;
Jsfiddle Sample here
Related
I am trying to do this:
and mine looks like this:
Not the most beautiful thing.
My questions are:
We have a header with logo, search bar, menus and a button. How can i stack them all inline?
On the div with the background image - how can I position the headline like the one in the original site?
1) Have a look at the Navbar component documentation. Items should already be inline if implemented correctly. You can use the navbar-left and navbar-right classes to position items in the navbar.
2) You'll notice the large centre text starts at the same position as the navbar logo. This is because of the container class. I suggest you analyse some examples to see how to correctly implement the container.
After that, if you're still struggling add your styles.css to your pastebin post or better still create a Codepen - this would allow someone to be more helpful.
1- you can write float:left; or float:right; ? look for this float
2-for position an element you must create a relative div later inside create absolute div.. and you can specify settlement coordinates with top right bottom left.. look here position
I would say float is not good practice to use . Unless you really have no choice to use.
But based on how I look at it.
It's achievable using flex.
Put a display:flex on your main div
Then as for your other elements . Use display:flex-grow
It's advantageous using flex. , not only it wil solve your problem. It makes your site responsive.
Cheers
[![if you need all navigation item in one line. you have to make display:inline-block,for navigation.
change your code to:
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 nav-wrap">
<ul class="pull-left"><li></li>
</ul>
<ul class="pull-left">
<li class="formSearch">
<input type="text" placeholder="Find Freelancers" id="searchButton">
</li>
<li>Browse</li>
<li>How it works</li>
</ul>
<ul class="pull-right">
<li>
<a href="#" class="signupHover">
<span class="icon signup"></span>
<a href="#">Sign Up
</a>
</a>
</li>
<li>
<a href="#" class="loginHover">
<span class="icon login"></span>
Login
</a>
</li>
</ul>
<button type="button" id="buttonHeader">Become a freelancer</button>
</div>
/*add below css*/
.nav-wrap ul li{display:inline-block;}][1]][1]
My problem is the carets are sliding under the texts in justified bootstrap menu. Like this: http://www.bootply.com/VWo8Oc7mVz
Is there any automated method to have the carets next to title of menu item in justified mode? I have only 1 solution now, i define the widths for every menu item with css, but it is not an effective solution.
Edit: in my development site I already tried reducing the horizontal padding of the anchor elements. It didnt work, there are too much menu item. I refreshed the bootply link also with this.
This happens because the anchor tag under nav has certain padding around by bootstrap. You can reduce left and right padding and giving enough space to caret by adding
.nav>li>a{
padding : 10px 5px;
}
Demo : http://www.bootply.com/0GpdHsNVB4
As you can find in documentation "Pills with dropdowns":
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
I would like to use a Font Awesome arrow instead of the default Bootstrap arrow for the dropdown menu link. I've added the Font Awesome arrow and it looks the way I want (on the left), but still there is the default Bootstrap arrow on the right. How can I get rid of it? I can't say I've tried anything yet as I keep checking and I don't find anything to be removed anywhere.
<ul class="nav navbar-nav">
<li class="dropdown drop-li">
<a href="#" class="dropdown-toggle menu-link" data-toggle="dropdown">
<i class="fa fa-angle-down arrow-down"></i>O Festiwalu <b class="caret"></b>
</a>
<ul class="dropdown-menu drop-one">
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</li>
</ul>
This is how it looks: http://postimg.org/image/id3jbf27x/
Why not deleting <b class="caret"></b>?
If you are using Firefox, you can press STRG + I (I for Inspection) to inspect your html Code and see why something is here (Click on the Element in the Main Page) or even not here (Look at the CSS in the right bottom and select via the left bottom).
I am using jQuery Mobile to create my mobile application. I have a plus button which appears like this:
The issue is that it is down, touching the list item. How do I make the button positioned midway between the list item and the horizontal line above it? I attempted to use absolute positioning using css, which did not work.
Here is my code:
<span style="float:left;color:black;font-weight:bold;font-size:24px"><label for="newpostbutton">Posts</label></span>
<span style="float:right;"></span>
<br>
<ul data-role="listview" data-inset="true" id="threads">
<li>No conversations :(</li>
</ul>
Any help would be appreciated :D
nshah, you can always give your button a negative margin-top and play around with the numbers. But it looks like there is probably more going on with the default button styles. I would look there first.
margin-top: -15px;
The floated elements needed to be cleared.
div {
overflow:hidden;
}
<div>
<span style="float:left;color:black;font-weight:bold;font-size:24px"><label for="newpostbutton">Posts</label></span> <span style="float:right;"></span>
</div>
<ul data-role="listview" data-inset="true" id="threads">
<li>No conversations :(
</li>
</ul>
http://jsfiddle.net/g9UM4/2/
The basic bootstrap template here has a fixed bar at the top. I want to place a div directly underneath it.
Here's the HTML of that bar (copied straight from the page's source so there are CSS class references):
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Project name
<div class="nav-collapse collapse" style="height: 0px;">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form pull-right">
<input type="text" placeholder="Email" class="span2">
<input type="password" placeholder="Password" class="span2">
<button class="btn" type="submit">Sign in</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Here's my attempt at a div to go underneath it:
<div style="background-color:#CF4342;color:#fff;top:40px;margin:0 auto;position:fixed;z-index:5000; width:50px;">Hello</div>
It almost works but the problem with this is the 'top:40px;'. When you resize the screen, the fixed bar at the top changes height.
How do I make it so that it always sits directly underneath the bar regardless of the bar's height? Bonus points for how to center it horizontally without using <center>
Edit: for the horizontal centering thing, i tried wrapping my div in a div with 100% width and then adding 'margin:0 auto' to it, but that doesn't work with fixed position
Edit2: here is the jsfiddle. line 38 of the html is my attempt, everything above that is the nav bar div.
If you're already using jQuery you could use something like this:
Working Example
Full screen example
x = (function() {
var t = $('.navbar').height();
var c = $(window).width() / 2 - $('.new').width() / 2;
$('.new').css({
top: t,
left: c
});
});
$(document).ready(x);
$(window).resize(x);
Note: updated examples with media queries to better show the effect of the script.
Of course you can do this with CSS alone, but you will need to use a media query like so:
CSS only working example
.new {
position:fixed;
margin: 0 auto;
top: 51px;
left:0;
right:0;
background-color:#CF4342;
color:#fff;
z-index:5000;
width:50px;
}
#media (max-width: 979px) {
.new {
top: 61px;
}
}
Notice that the css only solution will "break" if you narrow the screen too far. The jQuery solution won't have that problem.
Try to add this line in your css or edit the class in the bootstrap css file. Make sure your css file is under the bootstrap css file incase you choose to add it in your own. Does it make sense?
.navbar-fixed-top {
margin-bottom: 0 !important;
}
Bootstrap says the following in it's documentation:
Add .navbar-fixed-top and remember to account for the hidden area
underneath it by adding at least 40px padding to the <body>. Be sure
to add this after the core Bootstrap CSS and before the optional
responsive CSS.
So that is what i would try...
I updated your fiddle to demonstrate http://jsfiddle.net/Pevara/MgcDU/5403/
I did the following:
- Moved your 'hello inside the container with the hero unit
- Removed the positioning on the 'hello'
- Removed the 10px margin you set on the .container
- Added the following to your css, as suggested by Bootstrap
body {
padding-top: 40px;
}