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
Related
I have limited website coding experience. I'm trying to implement bootstrap into my site, specifically by creating a navbar with it. It is working great except for when I lick the login button for the dropdown menu, the menu appears far too wide for the content. I used a css stylesheet to align the username and password forms to the right of the dropdown menu but there is still too much whitespace to the left of the forms.
For instance, I would much rather it trim down to the beginning of the 'newsletters' button.
Site can be found here: my_test_site
Code:
<li>Login <b class = "caret"></b>
<div class = "dropdown-menu dropdown-menu-right">
<div class="container">
<form class="form-inline" role="form" id="username">
<div class="form-group">
<label for="username">Username:</label>
<input type="username" class="form-control" id="email" placeholder="username">
</div>
<div class="form-group" id="password">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</li>
</ul>
The Class dropdown-menu has a min-width attribute.
min-width: 10rem;.
just override it with.
min-width: 1rem;
Here is a solution to the question of How to fix bootstrap menu into contents?
It doesnt use the single line format and reduce the whitespace specifically as requested, and heres why:
Even if you reduced the width of the dropdown panel containing the signin form , the form wasn't rendering properly in mobile view, e.g. you will see what I mean if you reduce the browser down to mobile size in your my_test_site demo, and then try to use the form .
How does my version work?
By changing bootstrap in the minimum way, my version works in both full width and mobile (as far I have tested anyway)
Also, I saw your CSS style rules and removed them - so there is really only bootstrap CSS + plus this inline style rule style="padding: 10px;" on the div wrapping your form
So basically
remove your style rules
Drop in the below code
Change the content of the code
And you should be go to go!
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<!-- Begin custom dropdown menu -->
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<!-- begin custom form -->
<div style="padding: 10px;"
<form class="form-inline" role="form" id="username">
<div class="form-group">
<label for="username">Username:</label>
<input type="username" class="form-control" id="email"
placeholder="username">
</div>
<div class="form-group" id="password">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- end custom form -->
</li>
</ul>
</li>
<!-- Begin custom dropdown menu -->
</ul>
</div><!-- /.navbar-collapse -->
Here is a working demo - http://jsbin.com/lineketuru/1/edit?html,output
I'm trying to create a menu where the login "username/password/sign in" buttons appear on the desktop site but in the mobile responsive version I jut want a "sign in" option that directs you to a sign in page.
I've used bootstrap-responsive.css to make the login-in boxes disappear when not in desktop, that works a treat but the "sign in" menu item will only either be responsive or look correctly formatted but not both
Here is the code
<span class="visible-phone visible-tablet" >
<li class="dropdown">
<li>
Sign in
</li>
</li>
</span>
<li class="dropdown visible-desktop">
<div class="form-group">
<form class="form-inline" role="form">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
<button type="submit" class="btn-u btn-u-default">Sign in</button>
<label><h6>Forgot Password?</h6></label>
</form>
</div>
</li>
This Will hide the menu in desktop view but display it in mobile/tablet view but the formatting is out, the form part of the code works perfectly
I changed the "visible-phone" and "visible-tablet" into two separate entries and that seems to have worked
<li class="dropdown visible-phone">
Sign in
</li>
<li class="dropdown visible-tablet">
Sign in
</li>
New to front end design as I'm mostly working in the backend. The problem is, I have a template that I'm using from Foundation: http://foundation.zurb.com/templates/workspace.html
I've tried to use my button (the one in gray) instead of theirs (one in blue) but for some reason my submit button will not move up in place of the template blue button.
So, instead I would like to use their blue button in the pic below instead of the search button from my form submit.
How can I use their button instead of the form submit button?
Search html code
<ul class="right">
<li class="search">
<li class="has-button">
{# My search form #}
<form action="{{ path('acme_demo_search') }}" method="GET">
<label><input type="search" name="q" value={{ app.request.query.get('q') }}></label>
<div class="btn">
<ul class="right">
<div class="btn">
<div>
<input type="submit" value="Search" style="">
</div>
</div>
</ul>
</div>
</form>
</li>
</li>
{# Blue Search button code from the Foundation template #}
<li class="has-button">
<a class="small button" href="#">Search</a>
</li>
</ul>
In foundation you can use button styles in an input element maintaining its style concept, to use your submit button with foundation styles just use:
<ul class="right">
<form action="{{ path('acme_demo_search') }}" method="GET">
<li class="search">
<label><input type="search" name="q" value="{{ app.request.query.get('q') }}" /></label>
</li>
<li class="has-button">
<input type="submit" value="Search" class="small button" />
</li>
</form>
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'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>