I'm starting to use zurb foundation and would like to know what the "foundation way" of sizing inputs and selects is.
Basically i got row with four columns and in each one a form element.
By default every element has a different height.
Please refer to this screenshot i took:
So again, what would be the zurb foundation way to size the elements evenly?
Thanks in advance!
Take a look at this Foundation form mixin: form-element
If you are using SASS, you can do something like this:
your_styles_file.css.scss
select {
#include form-element;
}
Doing so, you'll have all form inputs and selects with the same look and feel.
Beware of the width property set by this mixin, which is 100%.
Related
I’m trying to make a visualisation like this:
I used the built in card and card-columns of bootstrap. But when I expand a panel, all of my <div>s are moving randomly:
I would like the other expansion panels to not move when I open one. Here is an example: StackBlitz.
I've been testing your stackblitz code and the "problem" is at the line 8:
<div class="card-columns">
Exactly at the class name, 'card-columns' is a predefined class that maybe is in BootStrap predefined classes.
My suggestion is to remove this class and use another alternative, like a flex-layout.
Or use html columns.
I've forked your stackblitz code and solved using html columns:
https://stackblitz.com/edit/angular-material-bootstrap-css-qmrzcm
Next step is to add your custom paddings between each columns.
I am creating a form using OpenUI5 and I noticed that when I am using the ResponsiveGridLayout layout, the form gets some padding (blue area around the input fields). Please see result here:
http://plnkr.co/edit/G4NrKPMGdN4DACXZgZOg?p=preview
If I am using the GridLayout layout, the padding is as expected:
http://plnkr.co/edit/Yp6Ul7gLDf0t88vMWrWD?p=preview
Any idea how I can get a form with very a small padding (like in GridLayout example), but in the same time I want to be able to use the 12-column grid system so I can set the size on my input fields?
Ideally, the views need to be XML and to use OpenUI5 classes/controls if possible.
You could just swap the responsible style classes using .addStyleClass() and .removeStyleClass().
Not sure if it works, but thats the easiest possible fix I can think of that might be worth a try.
I need to create a GWT application that handle the buying of films. So I have to show in a grid (not in a list, I don't like the view) these cell containing image and info about the film like this:( http://static.ipaditalia.com/wp-content/uploads/2012/11/mzl.sckskoqz.480x480-75.jpg ). I think that I need of a grid showing I think, to obtain something like but I wouldn't know to start. thanks for help!
You can use a simple FlowPanel as a container, and add each image with a float set to "left".
Alternatively, you can use a flex-box model with flex-flow: row wrap on a container.
You don't need any widgets for this. This is simple CSS, and it will give you the best performance and the smallest code size.
I've got a simple Bootstrap3 page, with some existing rows, and I want to insert a single new row that is full screen height.
What's the best (most clean & compatible) way to do this? I'd say using CSS3's new "height:100vh" would do the trick, but it still doesn't seem to be supported in quite some browsers.
Upon searching I came accross all sorts of tricks and wizardry, including using jquery, or plugins, but I wonder if there is just a simple css attribute or Bootstrap3 class that I can use for this?
Note that my page does not consist of just this one full-height row, I've got several dynamically sizes rows with random content, and now I want to insert one new row that has to be full screen height.
height:100vh
Should do the trick like you said, IE 9 support it very well.
EDIT :
For android user then forget CSS use Javascript :
var h = document.getElementById("container").offsetHeight; //the parent container or body
document.getElementById("my_100_percent_row").style.height = h + "px"; //the row that must have 100% height
Can any one help this..
I want to adjust the two adjacent cell height using div tag without using the display:table-cell. Please reply as soon as possible..
I don't believe you can do what you're trying to do using simply CSS.
I'd recommend using a jQuery Equal Heights plugin like this one:
http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html
You simply load jQuery and the plugin onto your page then use it like so:
$('.myCLASSorIDorWHATEVER').equalHeightColumns();
Hope that helps.