Might anyone have any idea how to auto-adjust the height of textarea to fill the rest of the space vertically? The easy way is to hard code the style of textarea with height: 300px or something but that is hardly a workable solution in production.
Here is the of my html. Thanks
<body>
<div class="app-page" data-page="home">
<div class="app-topbar">
<div class="app-title">Mobile Email Client</div>
</div>
<div class="app-content">
<div class="app-section">
<div class="app-button" data-target="emailEditor">Compose Email</div>
</div>
</div>
</div>
<div class="app-page" data-page="emailEditor">
<div class="app-topbar">
<div class="app-title"><span class="app-icon"></span>Email Editor</div>
<div class="left app-button" data-back>QUIT</div>
</div>
<div class="app-content">
<div class="app-section" id="editorStatus"></div>
<div class="app-section">
<input class="app-input" id="emailFrom" placeholder="From">
</div>
<div class="app-section">
<input class="app-input" id="emailTo" placeholder="To">
</div>
<div class="app-section">
<input class="app-input" id="emailSubject" placeholder="Subject">
<textarea class="app-input" id="emailMessage" placeholder="Message" rows="10"></textarea>
<div class="app-button green app-submit" id="emailSend">Send</div>
</div>
</div>
</div>
In App.js apparently setting rows="10" attribute for <textarea> is not enough. The <textarea> must also be given a CSS height: auto;
This still does NOT enable you to fill the remainder of the screen dynamically for any sized screens.
Related
I sometimes use columns as spacers, and so when there is no content, I don't want the column to collapse, which is the default behavior. Is there a built-in way to prevent empty columns from collapsing?
I know I can add some invisible div or something, but I'm asking if there's a standard way to accomplish this without resorting to hacks like that.
You can use offsets to create gaps:
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-11 columns">11</div>
</div>
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-10 large-offset-1 columns">10, offset 1</div>
</div>
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-9 large-offset-2 columns">9, offset 2</div>
</div>
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-8 large-offset-3 columns">8, offset 3</div>
</div>
I created a hacky style for this. Like so:
.row.no-collapse .columns {
min-height: 1px;
}
<div class="row no-collapse">
<div class="large-1 columns">1</div>
<div class="large-11 columns">11</div>
</div>
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
As I know large-12 class only show stuff on large screen. If I decrease the size like on mobile it won't show anything unless I assign another class small-12
Now I've this code and it's showing large-12 in mobile as well and small-12 on large screen as well.
<div class="row">
<div class="large-12 columns">
<div class="panel">
<img src="design/images/nationalskills_logo.png" />
<img src="design/images/toyota_logo.png" style="float: right;"/>
</div>
</div>
<div class="small-6 columns">
<div class="panel">
<img style="width: 30%;" src="design/images/nationalskills_logo.png" />
<img style="width: 30%;" src="design/images/toyota_logo.png" style="float: right;"/>
</div>
</div>
</div>
Can anyone please help me out.
I want to show larger-12 div on big screens and small-6 only on small screen not on big screen. What is wrong with my code.
12 class only show stuff on large screen. If I decrease the size like on mobile it won't show anything unless I assign another class small-12"
This assumption is totally wrong just see the doc http://foundation.zurb.com/docs/components/grid.html
For image resizing use interchange option.
http://foundation.zurb.com/docs/components/interchange.html
You can use different size classes for coloumns in one single div which hides other class definitions based on size..
<div class="row">
<div class="small-6 large-6 columns">
<div class="panel">
<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]" />
<img class="right" data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]" />
</div>
</div>
</div>
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.
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