Here is my form:
<form>
<div class="row">
<div class="small-12 medium-6 small-centered columns">
<div class="row">
<div class="medium-3 columns">
<label for="right-label" class="right inline">Username:</label>
</div>
<div class="medium-9 columns">
<input type="text" id="right-label" placeholder="Username">
</div>
</div>
<div class="row">
<div class="medium-3 columns">
<label for="right-label" class="right inline">Password:</label>
</div>
<div class="medium-9 columns">
<input type="text" id="right-label" placeholder="Password">
</div>
</div>
<div class="row">
<div class="columns">
<input id="checkbox1" type="checkbox" class="right"><label for="checkbox1" class="right">Remember Me</label>
</div>
</div>
<div class="row">
<div class="columns">
<input type="submit" class="button right" value="Log In">
</div>
</div>
</div>
</div>
I have two questions:
The username and password labels sit to the left of the inputs using the right class, how can I switch this off when the screen size is small? I would like the labels to be centered at this break point.
I would like the button to be it's regular size apart from on small, where it should expand to fill the row. how can I do this?
Visibility classes let you show or hide elements based on screen size or device orientation. You can use visibility classes to control which elements users see depending on their browsing environment.
<p class="panel">
<strong class="show-for-small-only">This text is shown only on a small screen.</strong>
<strong class="show-for-medium-up">This text is shown on medium screens and up.</strong>
<strong class="show-for-medium-only">This text is shown only on a medium screen.</strong>
<strong class="show-for-large-up">This text is shown on large screens and up.</strong>
<strong class="show-for-large-only">This text is shown only on a large screen.</strong>
<strong class="show-for-xlarge-up">This text is shown on xlarge screens and up.</strong>
<strong class="show-for-xlarge-only">This text is shown only on an xlarge screen.</strong>
<strong class="show-for-xxlarge-up">This text is shown on xxlarge screens and up.</strong>
</p>
http://foundation.zurb.com/docs/components/visibility.html
Related
I am struggling to get the layout sorted using the code below.
<div class="row">
<div class="large-6 columns">
<div class="row collapse">
<label>Contigency</label>
<div class="small-9 columns">
<input type="text" name="contingency">
</div>
<div class="small-3 columns">
<span class="postfix">%</span>
</div>
</div>
</div>
<div class="large-3 columns">
<div class="row collapse">
<label style="text-align:right;">Project Management</label>
<div class="small-2 columns">
<span class="prefix">$</span>
</div>
<div class="small-10 columns">
<input type="text" class="" name="project_management">
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<div class="row">
<div class="small-8 columns">
<label for="right-label" class="center inline"><strong>Drawings/Permits/Inspect</strong> Engineered Drawings, Permits, and Inspections Commissioning</label>
</div>
<div class="small-2 columns">
<span class="prefix">$</span>
</div>
<div class="small-2 columns">
<input type="text" name="project_management">
</div>
</div>
</div>
</div>
It produces the following.
I am trying to line up the bottom input with the one above (Project management).
Any ideas where I am going wrong?
Thanks,
John
Okay John,
It's a couple of things, first of all your bottom input is using 4 columns and the top input is only using 3 columns and secondly you are collapsing the gutters in your first row, but not collapsing them in the second.
You have a two rows, and within the top row you have nested smaller rows. You haven't nested any smaller rows in the bottom row that you have created. To get a little mathematical on you, the container for the first dollar sign is actually 1/6th of 1/3rd the screen width wide (or 1/18th), because you've nested a 2/12 column inside a 3/12 column. The second dollar sign is in a column 1/6th the width of the screen because it's in a 2/12 column. The reason that the top dollar sign doesn't fit in the second dollar sign 3 times has to do with extra width added by gutters.
But this will get it looking how you like:
<div class="row">
<div class="large-6 columns">
<div class="row collapse">
<label>Contigency</label>
<div class="small-9 columns">
<input type="text" name="contingency">
</div>
<div class="small-3 columns">
<span class="postfix">%</span>
</div>
</div>
</div>
<div class="large-3 large-offset-3 columns"><!-- add 'large-offset-3' to avoid any weirdness with this lining up in the future -->
<div class="row collapse">
<label style="text-align:right;">Project Management</label>
<div class="small-2 columns">
<span class="prefix">$</span>
</div>
<div class="small-10 columns">
<input type="text" class="" name="project_management">
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-9 columns"><!-- this row will take up nine columns -->
<div class="row collapse"><!-- collapsing this row will make it line up with the above collapsed row -->
<div class="small-12 columns"><!-- setting this to 12 will have it fill all of the parent 9 columns -->
<label for="right-label" class="center inline"><strong>Drawings/Permits/Inspect</strong> Engineered Drawings, Permits, and Inspections Commissioning</label>
</div>
</div>
</div>
<div class="large-3 columns"><!-- this takes up three columns and essentially matches the code for the the above row -->
<div class="row collapse">
<div class="small-2 columns">
<span class="prefix">$</span>
</div>
<div class="small-10 columns">
<input type="text" name="project_management">
</div>
</div>
</div>
</div>
Give that a go, be sure to read the comments I left in the html explaining everything. But basically you need to make sure that your using the same number of columns if you want things to line up, and if you collapse a row, you will need to collapse other rows that you want to line it up with.
Below is the html JSFiddle - Problem
<div class="row">
<div class="small-3 medium-3 large-3 columns">
<label for="firstName" class="inline">* First Name:</label>
</div>
<div class="small-9 medium-9 large-9 columns">
<input type="text" name="firstName" id="firstName" placeholder="First Name" />
</div>
</div>
The input element spans the entire page width by default. I want to limit the width of the element.
One way to achieve this is by using incomplete rows and adding class end.
See below: JSFiddle - Solution
<div class="row">
<div class="small-3 medium-3 large-3 columns">
<label for="firstName" class="inline">* First Name:</label>
</div>
<div class="small-3 medium-3 large-3 end columns">
<input type="text" name="firstName" id="firstName" placeholder="First Name" />
</div>
Is this the correct way? Or is there any other method to do it.
I am aware that I can use css/modify css but wanted to see if there is any other way to do it using Foundation.
This is the correct way to size input elements.
While there are many ways to do it, wrapping form elements in column classes is the recommended method. For example, to produce an input with 50% width, wrap the input in a large-6 columns end class.
<form>
<div class="row">
<div class="large-6 columns end">
<label>Input Label
<input type="text" placeholder="large-12.columns" />
</label>
</div>
</div>
</form>
I'm using foundation 5 and trying to put some smaller controls together on one line and having some issues. I'm using offset in the main grid to center the form. That needs to stay the same. The real question is how do I get the 6 controls to look decent together on the same line (3 labels, 3 textboxes)? I'd be very happy with a little extra spacing separating Servings and the Prep and Cook time controls.
Code:
<div class="row">
<div class="small-3 large-1 large-offset-3 columns"><span id="makemeboldlbl" class="inline radius secondary label right">Servings:</span></div>
<div class="small-2 large-1 columns left"><input type="text" id="servings" name="servings" value="<? echo $servings ?>" /></div>
<div class="small-7 large-3 columns">
<div class="row">
<div class="small-3 columns"><span id="makemeboldlbl" class="inline radius secondary label right">Prep (min):</span></div>
<div class="small-2 columns"><input type="text" id="prep_min" name="prep_min" value="<? echo $prep_min ?>" /></div>
<div class="small-3 columns"><span id="makemeboldlbl" class="inline radius secondary label right">Cook (min):</span></div>
<div class="small-2 columns"><input type="text" id="cook_min" name="cook_min" value="<? echo $cook_min ?>" /></div>
</div>
</div>
<div class="large-4 columns"> </div>
</div>
I've attached a screenshot of how it looks on the page. As you can see it's overlapping.
Remove "right" class and give them some space.
I'm playing with foundation framework and i'm trying to make a simple login form with it.
Here's my markup
<form>
<div class="row">
<div class="large-4 columns">
<div class="panel">
<div class="row">
<div>
<label>Login: <input type="text" placeholder="Login">
</div>
</div>
<div class="row">
<div>
<label>Senha <input type="password">
</div>
</div>
<div class="row">
<input type="submit" value="OK" class="tiny button right">
Esqueci minha senha
</div>
</div>
</div>
</div>
</form>
But at the bottom of it, there's some space created.
How can i remove this space?
The space you are talking about is created by the buttons bottom margin. To remove it simply add a CSS class like such:
.panel .button { margin-bottom: 0; }
Working example: JSFIDDLE
I'm new to foundation and am trying to create a centralized form that has inline labels, I've looked at the example:
<form>
<div class="row">
<div class="small-8">
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="right inline">Label</label>
</div>
<div class="small-9 columns">
<input type="text" id="right-label" placeholder="Inline Text Input">
</div>
</div>
</div>
</div>
</form>
How would I go about centering the form on the page? I know you can add...
small-centered
...to a div, Ive tried this on:
<div class="small-8 small-centered">
But no luck.
Try adding text-align:center; to .row in which you wanna center things. it really helps.
thanks.