I am using zurb foundation and adding small-push-1 but it is also affecting the large panel size.
here is my div structure:
<div class="expertise-panel large-5 medium-5 small-push-1 small-10 columns">
</div>
anyone ever face the same problem..?
As far as I can see, you're trying to center the small column. Instead of using small-push-1, I think you should use the centered classes.
This would result in something like this:
<div class="expertise-panel small-10 small-centered medium-5 medium-uncentered columns">
</div>
Another option is to use the offset classes, in that case you should add 'small-offset-1' and 'medium-offset-0' to the class attribute.
Note that you automatically "inherit" styles from smaller classes. It isn't necessary to write 'large-5 medium-5', since medium-5 and large-5 both specify a width of 41.66667%. So if you don't add the large-5 class, the medium width class will be used.
This behaviour also works for the medium-uncentered class. Because I've added medium-uncentered to the expertisepanel, large/xlarge/xxlarge will also automatically become uncentered.
Related
I have a list of users, and some information about each user. I want to present this information to columns, one column for each user, using ngFor.
Apparently, the content and information of each user is of different length, so it turns out that the height of each col is different.
Of course, I have searched how to make bootstrap cols equal, using the row.eq.height css from bootstrap (Make cols with eq height), and also searching for other solutions but it doesnt seem to work.
I am using boostrap 4.
Below is my code.
I think the problem lies with the ngFor.
<div class="row">
<div class="col-lg-3" *ngFor="user of users">
<div class="panel panel-default">
<div class="panel-body">
<label>Username</label>{{user.username}}
<label>Info</label>{{user.info}}
<!--more stuff here like user.name etc etc -->
</div>
</div>
</div>
<div>
EDIT:
Added plunker: Plunker
This is the default behaviour of HTML elements, the height of the container is setted by the content.
Pay attention to the fact that row-eq-height affects the col-* if you work with bootstrap in flexbox mode.
You are not using that mode, you can see that there is floats for positioning.
You can enable that flexbox mode, by using bootstrap v4 and then it will work, or add the style manually.
*Pay attention: your plunker has an invalid attribute, it suppose to be styleUrls and styleUrl.
https://plnkr.co/edit/1GQHpHDhgaTGKxDvxmdm?p=preview
In the Bootstrap 3 documentation they give the following example of using push and pull classes to change column ordering (http://getbootstrap.com/css/#grid-column-ordering):
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
I understand how this works but why would you not just write the order in which you want them to appear in your HTML, like this?
<div class="row">
<div class="col-md-3"> ... </div>
<div class="col-md-9"> ... </div>
</div>
I can't see any possible use case for the example they give, because whether the order is col-md-3, col-md-9, or col-md-9, col-md-3 you're still not going to gain any more or less width on any device - they still add up to 12. Therefore why not just define it in the HTML in the correct order?
I understand how the classes work technically. But I don't understand what the use case of them could possibly be since they don't appear to do anything you cannot do already by defining things in the order you want? Essentially you can't gain any more or less viewport width on a given device, so where would you ever want to do something like this?
Column ordering classes allow us to change the order of our grid system based on different browser sizes. This means that on a large screen, you can have a different grid than on a mobile screen.
You can check this for example,
https://scotch.io/tutorials/reorder-css-columns-using-bootstrap
why would you not just write the order in which you want them to
appear in your HTML
It's because when we write markup we're supposed to think of its semantics too.
For example you have a page which has a sidebar on the left side, and an article on the right side. In your markup hierarchy the article should comes before the sidebar because the article is the main page content.
But then if you float them left, the article will be on the left side and sidebar will be on the right side, which is the opposite of what you want to achieve. So to fix this you will use push and pull classes, you get the idea.
This is just an example. Of course other options are available to achieve the same result such as float them right, or place the sidebar markup before article but wrap it with <aside> element.
I am trying to put a detail view between rows in my web application.
I am using Bootstrap and some Frontend Rendering.
My code looks somewhat like this:
<div class="col-sm-4 col-xs-6">
...
</div>
<div class="col-sm-4 col-xs-6">
...
</div>
etc...
I am basically looking for some way to do this in bootstrap or some library that does it. The closest example I could find is in the newest itunes version, I've attached a screenshot for that.
Edit:
What I have tried / thought of:
Put the detail view as an absolutely positioned div inside the tile and give the tile a margin-bottom.
This didn't work out since the layout simply breaks. To make this work, you would have to give all elements in the row a margin-bottom.
Put a set of tiles into a row-div and just insert the detail div after that specific row.
This will either break every responsive feature or require a lot of javascript to somehow dynamically put the divs into rows.
I am basically looking for a library / css hack that makes me able to do this without writing a whole lot of javascript.
For the 'details' row, you'd probable just need to use:
<div class="col-xs-12">
...
</div>
That would force it to span the full width regardless of the screen size. So your 3 rows would look like:
<div class="col-sm-4 col-xs-6">
...
</div>
<div class="col-xs-12">
...
</div>
<div class="col-sm-4 col-xs-6">
...
</div>
Iv'e using Zurb Foundation like a pretty platform for fast develop light projects. And today i've stucked on one thing.
I don't know how to better call it, easer to show...
http://oi61.tinypic.com/2dkhfuq.jpg
So, it happens when above column have too much content.
Also... columns must have non-fixed height and don't use block-grid! TY!
There are 2 ways to interpret what you're asking for. The first is that you're having a floating issue and the columns are stacking to the right. If you want the white space gone, you'll need a JS plugin like Masonry or Isotope.
The other way to interpret this is that you want these to be at the same height. There are 2 ways to go about this with Foundation: Either wrap each row with:
<div class="row">
<div class="small-12 medium-4 columns"></div>
<div class="small-12 medium-4 columns"></div>
<div class="small-12 medium-4 columns"></div>
</div>
The row class basically runs a clear once it starts so it will give them space. You don't need to use my syntax but it would be a working example. If you want to have all the articles be the same height based on the biggest one, Foundation has a great plugin built in called Equalizer.
Equalizer and my column syntax rely on using Foundation 5.
I have always worked under the Zurb's foundation logic for my grid systems. Now I'm trying bootstrap for first time in it's 3.0.2 version. One thing I don't understand is the structure of it.
While Zurb works like:
<div class="row">
<div class="twelve columns">
</div>
</div>
Bootstrap has a 3-step structure to get the very same result:
<div class="row">
<div class="container">
<div class="col-lg-12">
</div>
</div>
</div>
My question is, what is the "row" class standing for?, on css it only sets a couple of margins and also clear the layout with the pseudo :after element. Can someone please explain me the logic of this? I'm sure that row is there because of a reason, but I can't find it.
.container only exists to give your layout a fixed-width (which is altered based on the end-user [responsive]). This class should also really only exist once on the page, and wrap all .row elements within (therefore living up to it's name--a container).
Bootstrap uses a fixed 12-column layout, and therefore only needs two pieces of information: .row to queue a new row, and one of the col-*-n classes to decipher how many columns that block should take up.
Columns are also broken down by three main layouts: lg, md and sm each having a different effect on the layout based on the window viewport. Bacause of these three variations, it's possible to specify that content should change based on browser capabilities (e.g display three columns on all devides (md & lg), but maybe switch to two on mobile (sm)).
Having said that, the most basic layout consists simply of:
<div class="row">
<div class="col-md-12">
single div consuming all 12 columns
<div>
</div>
I have basic knowledge of TWBS3 and this i how I understand it:
Imagine that your page is a table where, by default, you have 12 columns(this if you haven’t customized the configuration). When you have an element that has a class “col-*-*”, you will only use the space that is defined by the col class. Building on this, if you have 4 elements with col-lg-4 class, you will get 3 elements in line, whereas the fourth will be drawn in a second line. This is because 3 col-lg-4 elements add up to twelve columns, so the fourth element is pushed below the other elements. This might be good in some cases where the elements all have the same height(always), but when the height varies you get odd results where some elements that are of smaller height are drawn a little higher in the page. ROW enforces the idea of having elements that belong to a row. Something like having a 12 column n rows table. Ex:
ELEMENT 1 ELEMENT2 ELEMENT 3
ELEMENT 4
With the same 4 elements of col-lg-4 you could do something like:
<div class=”row>
<div class=”col-lg-4”>Element 1</div><div class=”col-lg-4”>Element 2</div>
</div>
<div class=”row>
<div class=”col-lg-4”>Element 3</div><div class=”col-lg-4”>Element 4</div>
</div>
ELEMENT 1 ELEMENT2
ELEMENT 3 ELEMENT 4
Because you are saying that you have two rows, each with two elements, that span 4 rows, out of the twelve that you have available for the row.
Hope this helps you. Sorry about the bad english.