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>
Related
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.
I just wanna know the correct class to use for divs..currently my index page content divs look as below:
This is okay for dekstop view, I used class="large-4 columns" for the above. But I want something like below for tablet and mobile view.
How do I achieve this plz?
I TRIED but din't work as i wanted.
<div class="large-4 columns">
<div class="medium-2 columns">
<img src="images/launch-home.png" alt="" height="60px;" />
</div>
<div class="medium-10 columns">
<h1>LAUNCH OF THE XXXX</h1>
XXXXX, a pioneering voluntary industry-wide initiative that is dedicated to the development and advocacy of professional standards, including ethical standards, was launched on 24 September 2014. The event was officiated by both the Governor of Bank Negara Malaysia and Chairman of the Securities Commission Malaysia and was attended by leaders of the financial services industry.
</div>
</div>
If your settings has 12 total columns it should be like this:
<div class="row">
<div class="medium-12 large-4 columns">
<!--inaugural-->
</div>
<div class="medium-12 large-4 columns">
<!--launch-->
</div>
<div class="medium-12 large-4 columns">
<!--insights-->
</div>
</div>
I think your first tag is not at good place
<div class="row">
<div class="large-12 columns">LARGE VIEW</div>
<div class="medium-4 columns">
<img src="images/launch-home.png" alt="" height="60px;" />
</div>
<div class="medium-8 columns">
<h1>LAUNCH OF THE XXXX</h1>
...
</div>
</div>
I'll try to ask this here, because on Foundation forums I got no answer.
I'm making a mixed layout and I want to use Equalizer to make the first column and the second column the same height. The catch is that the second column is another grid layout. Inside that second grid, Equalizer works like a charm, but between the first and second column it does nothing. I've searched here and there are a lot of people with similar problems, but I did not found a solution for mixed layout, even with simple jQuery functions.
Anyone can help?
Here's the code:
<div class="row">
<div class="large-12 columns">
<div class="row" data-equalizer>
<!-- first column -->
<div class="large-2 small-2 columns">
<div class="panel" data-equalizer-watch>
<!-- here goes an image -->
</div>
</div>
<!-- second column -->
<div class="large-10 small-10 columns" data-equalizer-watch>
<div class="row" data-equalizer>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
</div>
<div class="row">
<div class="large-12 small-12 columns">
<p class="panel">Longer text</p>
</div>
</div>
<div class="row" data-equalizer>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
</div>
<div class="row">
<div class="large-12 small-12 columns">
<p class="panel">Longer text</p>
</div>
</div>
</div>
</div>
</div>
I checked on version 5.2.2: you just cannot do this.
I looked at Foundation foundation.equalizer.js file,
this function is simply not suited for equalize an equalizer inside an equalizer.
In 5.2.2 version, at line 30, you can see how it select elements to equalize:
vals = equalizer.find('[' + this.attr_name() + '-watch]:visible')
There is no dinstinction between dom levels, it catches every data-equalizer-watch without looking for any data-equalizer inside a data-equalizer
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
With Zurb foundation version 3, if I include the foundation.css file
I'm able to make grids, etc.
With version 4, if I do everything the same way, it does not work.
What am I missing?
If I do everything the same way
There are new classes to use for grids in V4. You cannot just say four columns but instead specify if the columns are for a large or small view/device. So you need to have small-X or large-X where X is the number of columns a div needs to consume. Here's an example:
<div class="row">
<div class="ten columns centered">
<h1>This grid won't work on V4</h1>
<div class="row">
<div class="four columns">
<div class="panel">
<p>Left panel</p>
</div>
</div>
<div class="four columns">
<div class="panel">
<p>Center panel</p>
</div>
</div>
<div class="four columns">
<div class="panel">
<p>Right panel</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="ten columns centered">
<h1>But this will...</h1>
<div class="row">
<div class="small-2 large-4 columns">
<div class="panel">
<p>Left panel</p>
</div>
</div>
<div class="small-4 large-4 columns">
<div class="panel">
<p>Center panel</p>
</div>
</div>
<div class="small-6 large-4 columns">
<div class="panel">
<p>Right panel</p>
</div>
</div>
</div>
</div>
</div>
Notice the combination of small and large on a single div. What it tells you is that the Left panel will only be two columns on small devices (mobile phones) and four columns on large devices such as on a desktop. Similarly, the Right panel will be six columns on small devices and four columns on large devices. You can see the difference by playing with the size of your browser.
To get more information on how the V4 Grid works, go to this page.