I have a nav-bar with a menu with radio buttons as menu elements, but they don't aligh well:
<!DOCTYPE HTML>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav pull-right">
<li>
<form method="get" action="search" class="navbar-form pull-right">
<input type="text" name="q" class="input-medium search-query" placeholder="Search">
</li>
<li id="nav_search_filter" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Search:</li>
<li>
<input type="radio" id="search_filter_all" name ="search_filter" value="all" checked="checked"/>
<label for="search_filter_all">All</label>
</li>
<li><input type="radio" id="search_filter_inactive" name ="search_filter" value="inactive" /> <label for="search_filter_inactive">Inactive</label></li>
<li><input type="radio" id="search_filter_active" name ="search_filter" value="active" /> <label for="search_filter_active">Active</label></li>
</ul>
</li>
</form>
</ul>
</div>
</div>
http://jsfiddle.net/2SmWq/
You could try something like this:
label {margin:10px;}
input[type="radio"] {display:inline-block; vertical-align:top;}
and wrapping the labels around the input tags in the html.
here is a jsfiddle to see what I mean.
Hope this helps.
If what you want it do have the radio button and the label in the same line. Try this:
<style>
label {
display:inline-block;
}
</style>
Related
Narrator announces incorrect information as "non-selected" when focus moves to the radio button.
it should be speaking about radio button selected 1 of 2
<div>
<div tabindex="0" role="radio">
<ul>
<li class="react-custom-radio-link">
<input type="radio" name="IsPrivateProfile" id="Public" aria-checked="true">
<label for="Public">Public</label></li>
</ul>
</div>
<div tabindex="0" role="radio">
<ul class="react-custom-radio-button">
<li class="react-custom-radio-link">
<input type="radio" name="IsPrivateProfile" id="Private" aria-checked="false" checked=""><label for="Private">Private</label></li>
</ul>
</div>
</div>
It happens because it focuses first on the div which has a tabindex attribute. If you continue to the radio it will announce the correct status. My fix was to remove the focus-ability from the div
<div>
<div role="radio">
<ul>
<li class="react-custom-radio-link">
<input type="radio" name="IsPrivateProfile" id="Public" aria-checked="true">
<label for="Public">Public</label></li>
</ul>
</div>
<div role="radio">
<ul class="react-custom-radio-button">
<li class="react-custom-radio-link">
<input type="radio" name="IsPrivateProfile" id="Private" aria-checked="false" checked=""><label for="Private">Private</label></li>
</ul>
</div>
</div>
Two things,
Nesting a form inside a menu item works except it hides again of the
mouse moves from the form div.
This form menu item is right aligned and the form left-most margin
is aligned with the left-most margin of the button so the actual
form flows beyond the window
<div class="home-menu pure-menu pure-menu-horizontal">
<a class="pure-menu-heading pure-menu-link" href="/">My Hip New Brand</a>
<ul class="pure-menu-list">
<li class="pure-menu-item">Blog</li>
<li class="pure-menu-item">Contact Us</li>
<li class="pure-menu-item">About</li>
</ul>
<ul class="pure-menu-list" style="float:right">
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">Sign In
<form action="/login" method="POST" class="pure-form pure-menu-children">
<fieldset class="pure-group">
<input name="username" type="text" placeholder="Username" class="pure-input-2-1" required/>
<input name="password" type="password" placeholder="Password" class="pure-input-2-1" required/>
</fieldset>
<button type="submit" class="pure-button pure-input-2-1 pure-button-primary">Sign In</button>
</form>
</li>
</ul>
</div>
EDIT: jsfiddle can be found here
I've created JSFiddle to illustrate my error.
I simply want to align all the "li" elements within the "ul"
<div id="easySearchMenu">
<ul>
<li>Categories
<ul>
<li>Classifieds</li>
<li>Business listings</li>
<li>Propetries</li>
</ul>
</li>
<li>Advanced Search</li>
<li>
<form id="searchForm">
<fieldset>
<div class="input">
<input type="text" name="s" id="s" value="Enter your search" />
</div>
<input type="submit" id="searchSubmit" value="" />
</fieldset>
</form>
</li>
<li>Log in / Register</li>
</ul>
</div>
You're using block level elements in your inner ul, causing unnecessary complications.
You could change your fieldset to display:inline-block to align those boxes, although that doesn't help with the different heights.
change your code like below
<div id="easySearchMenu">
<ul>
<li>Categories
<ul>
<li>Classifieds</li>
<li>Business listings</li>
<li>Propetries</li>
</ul>
</li>
<li>Advanced Search</li>
<li style="padding: 8px 20px 7px 20px;">
<form>
<div class="input">
<input type="text" name="s" id="s" value="Enter your search">
</div>
<input type="submit" id="searchSubmit" value="">
</form>
</li>
<li>Log in / Register</li>
</ul>
</div>
finaly change your css, from selector div.input remove the float:right; property/value pair.
I have a Bootstrap dropdown menu. The last li item is a submenu. How do I get the submenu to dropup while the full menu drops down? Here's the code:
<div class="dropdown">
<a class="inputBarA dropdown-toggle" data-toggle="dropdown" href="#">FILTER</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li role="presentation">
<a role="menuitem" href="#">Text</a>
</li>
<li role="presentation">
<label>Label name</label>
<label>Label name</label>
<label class="checkbox">
<input type="checkbox">
Text </label>
<label class="checkbox">
<input type="checkbox">
Text </label>
<label class="checkbox">
<input type="checkbox">
Text </label>
<label class="checkbox">
<input type="checkbox">
Text </label>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Centralities</a>
<ul class="dropdown-menu">
<label class="radio">
<input type="radio" name="options" id="optionsRadios1" value="A" checked>
AA </label>
<label class="radio">
<input type="radio" name="options" id="optionsRadios2" value="B">
BB </label><label class="radio">
<input type="radio" name="options" id="optionsRadios2" value="C">
CC </label><label class="radio">
<input type="radio" name="options" id="optionsRadios2" value="D">
DD </label><label class="radio">
<input type="radio" name="options" id="optionsRadios2" value="E">
EE </label>
</ul>
</li>
</ul>
</div>
The best solution:
<div class="dropup">
<ul class="dropdown-menu"></ul>
</div>
It's a native class in bootstrap. The bootstrap (using 3.1.1) css file has a .dropup .dropdown-menu selector so that's how I found out.
It sounds like the answer below would be how to do it from scratch, I was unaware there was a dropup class in Bootstrap...
So the short Bootstrap answer is to apply the class "dropup" to the <ul> in earlier versions of bootstrap:
<ul class="dropdown-menu dropup" role="menu" aria-labelledby="dLabel">
However in newer versions of bootstrap (v3) the "dropup" class needs to be applied to the <ul>'s container instead of the the <ul> itself:
<div class="dropup">
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
</div>
See http://jsfiddle.net/ZgyZP/5/
Original working answer that doesn't use bootstrap:
You could use javascript to calculate the height of the submenu and then negatively offset the submenu's position.
something like (with jQuery):
$('.dropdown-submenu').hover(
function(){
//hover in
$('.dropdown-submenu > ul').css('top', '-' + $('.dropdown-submenu > ul').css('height'));
},
//hover out
function(){
}
);
Fiddle: http://jsfiddle.net/ZgyZP/4/
Use a class, like up
<ul class="dropdown up">
Write style of up
.up { bottom:100% !important; top:auto !important; }
Note: Increase bottom as per your button size.
<div class="dropup">
<ul class="dropdown-menu"></ul>
</div>
The above code is correct, but doesn't work unless a parent element has the position property set.
Examples that works are class="col-lg-12" or just
<div style="position: relative;">
I use Bootstrap v3.0.0.
I used the dropup Class, and it worked perfectly as i expected it.
<div class="col-md-6 dropup">
<span uib-dropdown auto-close="outsideClick">
<p class="input-group">
<input type="text" class="form-control" ng-model="int.schTimeFormatted" ng-disabled="true" name="schTime" />
<span class="input-group-btn">
<button type="button" class="btn btn-default cal" uib-dropdown-toggle>
<i class="glyphicon glyphicon-time"></i>
</button>
</span>
</p>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
<li class="timerDropdown">
<div class="row">
<div class="col-md-6">
<div uib-timepicker ng-model="int.schTime" ng-change="changed()" hour-step="hstep" minute-step="mstep" readonly-input="true" min="min"
max="max" show-meridian="ismeridian"></div>
</div>
<div>
Booked Timeslots
<ul id="timeListB">
<li ng-repeat="time in bookedTimeslots">{{time | date:"h:mma"}}</li>
</ul>
</div>
</div>
<hr>
<button class="pull-right">close</button>
</li>
</ul>
</span>
</div>
I've already learned bootstrap but I'm trying to learn foundation for a different project just to get some exposure to it. I'm wondering if there's any simple way to add a username/password form to the top nav bar similar to how bootstrap does? I've checked out the template called workspace here: http://foundation.zurb.com/page-templates/workspace.html and it has a search box in the top that looks very similar to what I want, but when I wrap a form around it, it goes haywire. Anybody have an idea how to do this in foundation?
What I'm trying to work with:
<nav class="top-bar contain-to-grid">
<ul>
<li class="name"><img src="/images/betalogo.jpg"></li>
<li class="toggle-topbar"></li>
</ul>
<section>
<ul class="left">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<ul class="right">
<li>
<input type="text">
</li>
<li>
<input type="password">
</li>
<li class="has-button">
<input type="submit" class="small button" value="Log In">
</li>
</ul>
</section>
</nav>
From the source…
<ul class="right">
<li class="search">
<form>
<input type="search">
</form>
</li>
<li class="has-button">
<a class="small button" href="#">Search</a>
</li>
</ul>
This will get you the UI you want but not necessarily the functionality. I find the issue with this is that the submit button is outside the form—thereby useless; unless you use some JS to glue the button to the form which, frankly, breaks K.I.S.S.
Alternatively, you could use new rows inside your form. Thanks to Foundation's row nesting. Be sure to .collapse the row is you want the button to be right beside the search bar; omit this to keep the gutter between columns.
i know this is an old thread and i am sure you figured this out by now, but maybe someone else can use the answer.
<!-- Right Nav Section -->
<
ul class="right">
<li class="divider hide-for-small"></li>
<li class="active">Artists</li>
<li class="divider"></li>
<li class="active">Shows</li>
<li class="divider"></li>
<li class="active">Radio</li>
<li class="divider"></li>
<li class="active">Blog</li>
</li>
<li class="divider"></li>
<?php if(empty($_SESSION['user_id'])){ ?>
<li class="has-form signinform">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<div class="row collapse">
<div class="columns username">
<input type="text" placeholder="Username" name="username">
</div>
<div class="columns password">
<input type="text" placeholder="Password" name="password">
</div>
</div>
</li>
<input type="submit" value="Login" name="login" class="button">
</form>
<?php }
######end show login######
?>
</ul>
This is just a past from my page, but you can see if you need to put a form in it you have to use the class "has-form" in the li tag
Try wrapping each list item in a column.
<ul class="right">
<div class="column">
<li class="username"><form><input type="text" placeholder="Username" /></li></div>
<div class="column">
<li><input type="password" placeholder="Password"></li></div>
<div class="column">
<li class="has-button"><a class="small button" href="#">Login</a></form></li></div>
</ul>