I'm building a responsive website using ZURB's foundation 4.
I'm trying to align the log-in form to the right, without the padding next to the login button.
When following the documentation, with only one input box (originally a search form), there is no padding to the right side of the button
This code achieves this, can be reproduced and is provided by the foundation docs:
<form>
<div class="row collapse">
<div class="small-8 columns">
<input type="text">
</div>
<div class="small-4 columns">
Login
</div>
</div>
</form>
When I modify this code to have two inputboxes, the padding appears.
I have tried everything I can think of to remove the padding.
This is the code
<form>
<div class="row collapse">
<div class="small-4 columns">
<input type="text">
</div>
<div class="small-4 columns">
<input type="password">
</div>
<div class="small-4 columns">
Login
</div>
</div>
</form>
The problem can be viewed here
I could also set the login-button to expanded, but this obviously makes the button a lot bigger, than it actually should be.
Any help is appreciated
Thank you #Foundation MIRC channel!
The answer is giving width of small-5, small-5 and small-2 to the columns, with an expanded button on the last.
Related
I am having trouble with my css. I am trying to have my contact information, the quote, and my contact form to be in the same row but different columns. And also why is it that my html doesn't all fit on one page, I can scroll to the rigth and there's just empty white space. I figure its because I added -1.23em in my navbars margin; However, I only did this because my navbar was not filling the whole page. Here is a link to my gist and bitballon. Thank you in advance.
https://gist.github.com/bklynbest/a19565b1b5289f045919e76d657848ea
http://sad-goodall-e4f115.bitballoon.com
You have a .row div in the nested directly under the body on line 103 that is causing the page to spread past 100% width
Bootstrap requires a containing element to wrap site contents and
house our grid system. You may choose one of two containers to use in
your projects. Note that, due to padding and more, neither container
is nestable. bootstrap containers
Regarding the contact info your nesting and class names are not correct, you currently have the following:
<div class="container-fluid" id="contact">
<div class="row">
<div class="column">
<div class="col-xs-12 col-md-12">
<div id="quote">...</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="contact">...</div>
</div>
</div>
</div>
</div>
<form>
you will need to change this to follow bootstrap3 grid conventions, something like the following:
<div class="container">
<div class="row" id="contact">
<div class="col-sm-4">
<div id="quote">...</div>
</div>
<div class="col-sm-4">
<div class="contact">...</div>
</div>
<div class="col-sm-4">
<form>
</div>
</div>
</div>
I have tried at least three proposed solutions from searching on this site, but nothing worked. I got close, but was getting cheated on the panel defeault backround color. For some reason, the background wasn't showing its full height behind my elements. I want to put a form next to the heading. Here is what I have tried.
<div class="panel panel-default">
<div class="panel-heading">
<div class="no-wrap">
<h3 class="panel-title">My Title</h3>
</div>
<div class="no-wrap">
<form>
<div class="form-group">
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
</select>
</div>
</form>
</div>
</div> <!-- end panel-heading -->
<div class="panel-body">
Body Text
</div>
</div> <!-- end panel -->
All the class you see are bootstrap EXCEPT no-wrap. My css for no-wrap is
.no-wrap {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
So this was my most hopeful solution but it still doesn't work. The form sits below the h3.
I also tried using bootstrap columns inside the panel heading, but that's when the default gray background got obscured.
How can I get this form next to the h3 - all inside the panel heading?? Please note, you can assume that there is plenty of screen width. 99.9% of users will be using a laptop to access this page. The panel is being used to display business reports. Mobile responsiveness is not a priority.
Below is screenshot of what I do NOT want. I want the input form next to the heading.
Use display: flex;
Demo jsfiddle
You can try this one. You just need to include GRID OF BOOTSTRAP in your code such as col-xs-* , col-sm-* , col-md-* , col-lg-*. Don't need custom css in your case. You could ask me for further question as well.
<HTML>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-xs-4 col-md-6 col-lg-6">
<h3 class="panel-title">My Title</h3>
</div>
<div class="col-xs-8 col-md-6 col-lg-6">
<form>
<div class="form-group">
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
</select>
</div>
</form>
</div>
</div>
</div>
<!-- end panel-heading -->
<div class="panel-body">
Body Text
</div>
</div>
<!-- end panel -->
</body>
</HTML>
I am using Zurb Foundation 5 and I am trying to achieve the following:
I have a row which contains a search box located somewhere in middle of the page. I want to stick the <div> which contains the search box on top once user scrolls down to it. Is there a built in class in foundation 5 to do it, and if not, what is an alternative way to do it? Note that I need it to be responsive such that I don't have to specify the distance from top to the div (scroll distance).
I recommend using Magellan to do this in Foundation 5.
You can insert the following code within your page:
<div data-magellan-expedition="fixed">
<div class="row" data-magellan-arrival="search">
<div class="large-12 columns">
<a name="search"></a>
<div class="row collapse" data-magellan-destination="search">
<div class="small-10 columns">
<input type="text" placeholder="Search the database">
</div>
<div class="small-2 columns">
<button class="button postfix expand">Go</button>
</div>
</div>
</div>
</div>
</div>
I've created this example in CodePen
I have a gorgeous Bootstrap form that works great and is beautifully responsive for mobile. However, some form fields get too narrow when they're on a mobile screen.
For example, here's a few fields from the desktop version, which is awesome:
And here's the same part of that form, but in the mobile view:
As you can see, the fields get a little narrow. I'd much prefer the form to just wrap these fields onto their own lines at 100% width. Is there a way to do that in Bootstrap?
for mobile secreen use class col-xs-12 and for desktop use col-lg-12
for more info visit this site
http://getbootstrap.com/css/
The layout you are looking for is
<div class="row">
<div class="col-md-12 col-sm-12">
</div>
<div class="col-md-4 col-sm-12">
</div>
<div class="col-md-4 col-sm-12">
</div>
<div class="col-md-4 col-sm-12">
</div>
</div>
Fiddle
The Bootstrap framework has various classes to help with this. First of all make sure all of your form fields have the form-control class applied. This makes your controls go to 100% width of the container. Secondly use the col-* classes to specify the sizes at different resolutions. As this is Bootstrap, always think mobile first. For example:
<div class="container">
<div class="row">
<div class="col-xs-12">
<input id="country" class="form-control" />
</div>
<div class="col-xs-12 col-sm-4">
<input id="city" class="form-control" />
</div>
<div class="col-xs-12 col-sm-4">
<input id="state" class="form-control" />
</div>
<div class="col-xs-12 col-sm-4">
<input id="zipcode" class="form-control" />
</div>
</div>
</div>
I am using
Foundation 5's "prefix" class to style labels for HTML input elements. The problem I am having, is that when the text inside of the label becomes too long (either because of the text's length or from resizing the browser window), the label begins to disappear, and allows the input element to take over the rest of the space. This is the code I am using:
<div class="row">
<div class="large-6 columns">
<div class="row collapse prefix-radius">
<div class="small-3 columns">
<span class="prefix">A Test Label</span>
</div>
<div class="small-9 columns">
<input type="text" placeholder="Value">
</div>
</div>
</div>
</div>
Here is a jsfiddle.
The behavior that I would like to have, is that all of the text on the label is always visible, and the input element becomes smaller (or hidden) if needed.
Bootstrap actually handles this situation exactly as I would like (jsfiddle), but I need to emulate this behavior using Foundation.
You can adjust the column classes to specify different widths for different screen sizes.
<div class="row">
<div class="large-6 columns">
<div class="row collapse prefix-radius">
<div class="small-5 medium-4 large-3 columns">
<span class="prefix">A Test Label</span>
</div>
<div class="small-7 medium 8 large-9 columns">
<input type="text" placeholder="Value">
</div>
</div>
</div>
</div>