I ran into an issue while trying to place two tables in the same bootstrap row. They appear just fine, however the panel-heading element gets cutoff because of some strange CSS restriction.
I noticed the issue starts when I try to add this line in:
<div class="panel panel-default col-md-6">
Unfortunately this is somewhat required, as it will specify the table takes up 50% of width of the parent element. Does anyone have any advice on how to isolate the responsible CSS rule/how to fix this issue?
JS Fiddle
What's required is to introduce another div around those with the class of panel.
Here's what it should look like:
<div class="col-md-6">
<div class="panel panel-default">
Here's an updated Fiddle: https://jsfiddle.net/x9d5k7Lv/12/
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
I’m experiencing two issues with a bootstrap layout on a website that I’m building and I’m wondering if someone can point out where I’m going wrong. I have put my site live on a sub domain so that you can see the issue I am facing. It can be found here http://cefn.mywebsitebuild.co.uk//fixtures-results/first-team/
Issue one
The col-xs-12 fix-result div is floating outside the container and im unsure why. I also want this to align with the image see green line on my image
Issue two
The col-xs-12 match-sponsor div is also floating outside the container and I’m unsure why
I have uploaded my page source http://www.bootlint.com/ and its tells me that there are problems with your code.
Can someone please tell me what I can do to get this working?
Thanks
Paul
You may not want to adjust div's for that one image. I would strongly recommend to leave current bootstrap settings. Instead if you want to fill div with that image, add this attribute to parent div of that image.This way image would be aligned with rest of your divs.
style="
padding: 0px 0px;
"
You nest your rows differently. This is the easiest fix:
<!-- This is your very first row -->
<div class="row">
<div class="col-md-12">
<div class="row"> <!-- INSERT ROW HERE -->
<h4 class="heading-mini">First Team Fixtures & Results</h4>
<img src="/media/1014/img_5507.jpg?crop=0,0.24305557250976545,0.0000000000000007579122514774,0.33194442749023489&cropmode=percentage&rnd=131162832050000000" class="img-responsive team-photo" alt="" title="">
<p class="photo-names">Back row (left to right): Paul Griffiths, Nathan Williams, Sam Roberts, Oliver Davies, Jamie Rawlinson</p>
</div> <!-- END ROW HERE -->
</div>
</div>
However, I wouldn't go so far to say that it's the best fix... sorry. (I would opt for removing a nested row/columns everywhere else... )
Issue 2 is the same thing. (Everywhere else you have nested row->col->row->col.)
Hi fixed this by adding the following to the parent row divs
<div class="row" style="margin-left:0px; margin-right:0px;">
The nested bootstrap validates and It now looks as i wanted (hope its correct)
I plan to create a class apply the margin fix and apply the class tto the parent row divs instead of using inline style.
Thanks
I'd like to ask can this code be correct from Bootstrap point of view? I expect the answer is yes. The question is about additional tag in between row and col(s).
<div class="row">
<something>
<div class="col-sm-6">
a
</div>
<div class="col-sm-6">
b
</div>
</something>
</div>
P.S. <something> has no css styles and that's a directive from AngularJS.
There is nothing wrong here, but there are better practices on using bootstrap.
Just take care of minus margins and clearfix, check if the style flow its ok.
By the way, you can use "comment directive" if u need to use that something tag just for angularJs directive.
From the Bootstrap docs..
Content should be placed within columns, and only columns may be
immediate children of rows.
The Bootstrap row has a negative margin to compensate for column padding. <something> doesn't specifically cause a problem in your example, but it's incorrect from a Bootstrap standpoint.
In that code, the something tag will simply be given the entire 12 column width of the row div. The internal elements will then be split into the relevant grids as long as there is nothing on the something tag which would interfere.
I think this should work fine, but as a sidenote I would normally write this as
<something>
<div class="row">
<div class="col-sm-6">
a
</div>
<div class="col-sm-6">
b
</div>
</div>
</something>
That way then gives you the option to add more rows etc into the something section easily if needed, and just aids readability in my humble opinion.
In this case row basically has the same purpose as col-md-12, but row will give you a margin of -15px to both left and right. To avoid a horizontal scroll-bar you can wrap the whole thing in a div with the class container.
looks good to me but i think according to your "something" element it can vary
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>
Hi I am unsure why I have a lot of extra space on the right of the site when I use Bootstrap for a wordpress blog.
http://peterzapfella.com/
If you load the page, you will see you can scroll right and you will see white space. When I validate the site I get the GREEN light saying that it is valid, and I can't seem to figure out why the space is there, could someone please see if they have better luck debugging this.
I could understand if I have missed a DIV or something but according to http://validator.w3.org/check?uri=http%3A%2F%2Fpeterzapfella.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 I have not.
It's because you are using "container" class with "pagination" class and "container" class has "width: 970px;" css style.
Please use below code to fix issue.
in HTML:
<div class="pagination"></div>
or in CSS insert below code:
.pagination.container{width:100%}
Its possibly because of this
<div class="pagination container"></div>
Removing this removes extra space on right side.
As is this HTML bit:
<div class="container-fluid">
<div class="col-md-9 col-xs-12 cont-grid">
To be:
<div class="container-fluid">
<div class="col-xs-12 cont-grid">
the col-md-9 is extra in the second div.