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
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>
How can I place six divs on a web page in two rows and three columns?
I tried the follwoing code with bootstarp but the divs do not appear is a row rather after each other in a column
<div class="row">
<div class="span4" id="chart_1"></div>
<div class="span4" id="chart_2"></div>
<div class="span4" id="chart_3"></div>
</div>
fiddle:
https://jsfiddle.net/r2qepmk0/3/
Edit
When I add col-xs-4 class to my divs my d3 charts stop rendering is there another possible solution to this?
One suggestion first, wrap your layout in a bootstrap container class. By default the row class has -15px left and right margins, while the container class has 15px of left and right padding. They're meant to work in tandem and bring your content flush to the outside of the container.
Secondly, use the col- syntax.
<div class="container">
<div class="row">
<div class="col-xs-4" id="chart_1">23</div>
<div class="col-xs-4" id="chart_2">45</div>
<div class="col-xs-4" id="chart_3">34</div>
</div>
<div class="row">
<div class="col-xs-4" id="chart_3">34</div>
<div class="col-xs-4" id="chart_1">23</div>
<div class="col-xs-4" id="chart_2">45</div>
</div>
</div>
https://jsfiddle.net/0vu83eru/1/
Use class="col-xs-4" see fiddle https://jsfiddle.net/r2qepmk0/1/
And what you want about w3fools, but this link explains it well http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
You are using bootstrap 2.* syntax while your fiddle has bootstrap 3.3.5 css included. Change your column syntax to this:
<div class="row">
<div class="col-xs-4" id="chart_1">23</div>
<div class="col-xs-4" id="chart_2">45</div>
<div class="col-xs-4" id="chart_3">34</div>
</div>
And it should work fine for you. Please refer to the documentation for the current version of Bootstrap.
And your updated JSFiddle
You just need to wrap your <div>s in a <div class="col-xs-4"> and everything should be good.
Currently, the bootstrap classes are interfering with the styles applied by the D3 js, which creates the result seen in your fiddle. You should also remove the class="span4" because, as already mentioned, that is bootstrap version 2.x and you are using 3.x.
You can put six divs in two rows and three columns by doing something like this:
<div class="row">
<div class="span4" id="chart_1"></div>
<div class="span4" id="chart_2"></div>
<div class="span4" id="chart_3"></div>
</div>
<div class="row">
<div class="span4" id="chart_4"></div>
<div class="span4" id="chart_5"></div>
<div class="span4" id="chart_6"></div>
</div>
Remember that you can use the class row-fluid to get more flexibility in your web page
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>
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.
I have tried to build a MVC master template and sub pages based on bootstrap.
Somehow I have managed to break it and I cannot work out what has happened.
My test site is at http://taxiroutemvc.azurewebsites.net/
Notice how the various sections don't align vertically?
I'm guessing either too many or too few divs or some class problem but I just cant find it.
Bootstrap was not designed for you to add the well class on the same element as a spanX. You want to nest a <div> with the well class inside of your spanX.
Edit:
Also, when using the fluid scaffolding, all your rows need to be row-fluid.
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<form>
<div class="row-fluid"> <!-- not just 'row' -->
<div class="span12" id="bingMap">
etc.
</div>
</div>
</form>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="well">
<h3>We cover the following areas:</h3>
Cardiff | Barry
</div>
</div>
</div>
</div>