I am using bootstrap with angular and I have the foll. code in my component.html file.
The below 2 DIV is only occupying col-sm-6, so the other half of div is empty. Now i want to add another table in this empty space and that occupies both the DIV's.
When I try to add on the 1st set of div then the new table occupies only in the 1st div and pushes the 2nd div until the length of the table. If i add
then the 1st div right side is empty and the table occupies just from the 2nd div start and goes until the length of the new table. So I tried to add
overflow: visible; to the 1st Div class="row" but it didnt work. What is the best way to achieve the same?
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-3" style="text-align:center; padding-top: 5px;">
<table class="col-sm-12">
<tr>
<td colspan="12" class="labelStyle" style="text-align: center;background-color:#f4f4f4">
BMI Chart
</td>
</tr>
<tr *ngFor="let item of lkBmiChartList;">
<td colspan="8" class="labelStyle">{{item.code}}</td>
<td colspan="4" class="labelStyle">{{item.value}}</td>
</tr>
</table>
</div>
<div class="col-sm-1"></div>
</div>
<div class="row">
<div class="col-sm-3" style="text-align:center; padding-top: 5px;padding-left: 3px;padding-right: 3px;">
<table class="col-sm-12">......</table>
</div>
<div class="col-sm-2" style="text-align:center; padding-top: 5px;padding-left: 3px;padding-right: 3px;">
<table class="col-sm-12">...</table>
</div>
<div class="col-sm-1" style="text-align:center; padding-top: 5px;padding-left: 3px;padding-right: 3px;">
<table class="col-sm-12">...</table>
</div>
</div>
I do not want to use scroll bars or anything. The table should occupy the right of both the div and not specific to any row.
Related
Looking to have an image on the left side of a container, however, if the content is too short or too long I'd have to adjust the height of the image proportionally to prevent the content from sliding below the image. The reason I want to contain the Image and the content in the container is to ensure that the image is coherent throughout the entirety of the pages.
We can use HTML / in-line CSS / Markdown to make this adjustment. Perhaps I believe we may need to use Flexbox
I've attached the code below, I've used Grid and a table, and I don't really like it
<div style=“display:grid; grid-template-columns:auto 1fr”>
<div>
<h1> <img src=“https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg”
align=“left”
hspace=“30"
width=“100”
height=“100">
</div>
<div>
<h3>TITLE</h3>
Description for Title
<table>
<tr>
<td><strong>BLAH:</strong></td>
<td style=“padding-left:20px”><p>Updates are made annually or more frequently if needed<p/></td>
</tr>
<tr>
<td style=“vertical-align:top”><strong>Contact Us:</strong></td>
<td style=“padding-left:20px”>
<ul style=“padding-left: 15px; margin: 0px”>
<li style=“padding-bottom: 10px”><a href=“mailto:sample#email.com”>Email: Jane Doe</a></li>
<li><a>Skype: Sample</a></li>
</ul>
</br>
</td>
</tr>
</table>
</div>
</div>
--Most Recent
The image is on the left side but the table seems to overlap the image
This is what it currently looks like
edit 2
I've edited this again for you if this needs to be inline styles, i've gave a class name on the different containers so you can clearly see how this is working,
your image can just go into image-container and your content can go in content-container. You can add size to the containers, padding, margin etc.. to adjust the layout that you want, but this should help with the basic setup for your HTML.
<div class="main-container" style="display: flex;">
<div class="image-container">
<img
src=“https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg”
hspace="30" width="100" height="100">
</div>
<div class="content-container">
<h3>TITLE</h3>
<h4>Description for Title</h4>
<table>
<tr>
<td><strong>BLAH:</strong></td>
<td style="padding-left: 20px;">
<p>Updates are made annually or more frequently if needed</p>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><strong>Contact Us:</strong></td>
<td style="padding-left: 20px;">
<ul style="padding-left: 15px; margin: 0;">
<li style="padding-bottom: 10px;">
Email: Jane Doe
</li>
<li><a>Skype: Sample</a></li>
</ul>
</td>
</tr>
</table>
</div>
</div>
Here a flexbox example:
HTML
<div style="display: flex; flex-flow: row nowrap;">
<div style="flex: 1 auto;">
<img src=“https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg” hspace="30" width="100" height="100">
</div>
<div style="flex: 1 auto;">
<h3>TITLE</h3>
Description for Title
<table>
<tr>
<td><strong>BLAH:</strong></td>
<td style=“padding-left:20px”>
<p>Updates are made annually or more frequently if needed
<p />
</td>
</tr>
<tr>
<td style=“vertical-align:top”><strong>Contact Us:</strong></td>
<td style=“padding-left:20px”>
<ul style=“padding-left: 15px; margin: 0px”>
<li style=“padding-bottom: 10px”><a href=“mailto:sample#email.com”>Email: Jane Doe</a></li>
<li><a>Skype: Sample</a></li>
</ul>
</td>
</tr>
</table>
</div>
</div>
DEMO HERE
I have two divs .I want the height of the second div same as that of the first div in which the height of first div is dynamic.I have applied display table for the row containing it and table-cell for the two columns.But it doesn't works for me can anyone help me with this.
code
<div class="row" style="display: table;">
<div class=" col-md-8" style="display: table-cell;"></div>
<div class="col-md-4" style="display: table-cell;">
</div>
I think your code works well.
<div class="row" style="display: table;background-color:#000">
<div class=" col-md-8" style="display: table-cell;background-color:#f00">
AA<br>
AA<br>
AA<br>
AA<br>
</div>
<div class="col-md-4" style="display: table-cell;background-color:#0f0">BB<div>
</div>
I have a table defined using bootstrap 3 and some custom css. When I resize the browser window it ends overflowing the table beyond the width of the enclosing div as shown in the picture below. I am using IE and the developers tool shows no computed table attribute affecting this behavior. I also checked the tr and td dynamically computed attributes and still no luck finding the culprit for this behavior.
Can anyone shed some light into what settings could be provoking this?
<div class="pad-top pad-side">
<div class="row">
<div class="col-lg-3">
<div class="panel panel-default" ng-show="{{reportData.PnlStatistics != undefined}}" style="height: 380px">
<div class="panel-heading">
<label>Expected In-Sample PnL Statistics</label>
</div>
<div class="panel-body" style="padding-top: 5px;">
<table class="table table-x-condensed table-striped table-hover table_nowrap" id="pnlStatisticsTable" st-safe-src="pnlStatistics"
st-table="displayedPnlStatistics">
<thead>
<tr>
<th style="width: 60%;" id="name">Name</th>
<th style="width: 20%;" id="daily">Daily</th>
<th style="width: 20%;" id="optimal">Optimal</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in displayedPnlStatistics">
<td style="width: 60%; padding-top: 0px; padding-bottom: 0px;">{{data.name}}</td>
<td style="width: 20%; padding-top: 0px; padding-bottom: 0px;">{{data.DailyHedge}}</td>
<td style="width: 20%; padding-top: 0px; padding-bottom: 0px;">{{data.OptimalHedge}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
The best solution I have found was to modify the enclosing div style and set a minimum width. This prevents the enclosing parent div from shrinking below the contents size and it works great.
<div class="col-lg-3" style="min-width: 350px;">
...
</div>
I m expecting like this image Link
In the image there 5 images and link to dotted images..
May i know, How to display with using bootstrap classes.
I just confused, can anyone help me to fix this?
Thanks,
Here is the code by using table tag:
<td class="tdbodycontent" id="workDemo">
<div class="wrapper" style="height:340px;">
<table class="tblhomecontent dotted" cellpadding="0" cellspacing="0">
<tbody><tr>
<td colspan="5">
<div class="boxtitle">
How it works</div>
</td>
</tr>
<tr>
<td class="box5col">
<div class="marker_1 center">
</div>
<p class="markerContent">
Sign Up for free</p>
</td>
<td class="box5col">
<div class="marker_2 center">
</div>
<p class="markerContent">
Select the<br>
neighborhoods<br>
you want to follow</p>
</td>
<td class="box5col">
<div class="marker_3 center">
</div>
<p class="markerContent">
Invite friends and<br>
family to join</p>
</td>
<td class="box5col">
<div class="marker_4 center">
</div>
<p class="markerContent">
Receive important<br>
alerts and information<br>
from trusted sources</p>
</td>
<td class="box5col">
<div class="marker_5 center">
</div>
<p class="markerContent">
Share information<br>
with friends<br>
securely</p>
</td>
</tr>
</tbody></table>
</div>
</td>
I need to convert in bootstrap, Here is the image link dotted , step-1 , step-2 , step-3 , step-4 , step-5
This may work for you.
or you need to write a custom media css style to achieve this.
<div class="row">
<div class="col-md-2 col-md-offset-1"><img src="images/sample.jpg"></div>
<div class="col-md-2"><img src="images/sample.jpg"></div>
<div class="col-md-2"><img src="images/sample.jpg"></div>
<div class="col-md-2"><img src="images/sample.jpg"></div>
<div class="col-md-2"><img src="images/sample.jpg"></div>
</div>
Building on top of anu g prem's solution, and adding something for the dotted lines, plus a bit of explanations.
Live example
<div class="container">
<div class="row steps">
<hr class="col-xs-8 col-xs-offset-2" />
<div class="col-xs-2 col-xs-offset-1"><img src="http://s22.postimg.org/pq17qfgwd/step_1.png" class="img-responsive"></div>
<div class="col-xs-2"><img src="http://s22.postimg.org/5u58avzv1/step_2.png" class="img-responsive"></div>
<div class="col-xs-2"><img src="http://s22.postimg.org/58g9es4st/step_3.png" class="img-responsive"></div>
<div class="col-xs-2"><img src="http://s22.postimg.org/576bld2z1/step_4.png" class="img-responsive"></div>
<div class="col-xs-2"><img src="http://s22.postimg.org/g9bejsx1p/step_5.png" class="img-responsive"></div>
</div>
</div>
.steps {
position: relative;
}
.steps hr {
/* Use the 3 lines below to use a dotted line image file as background of the <hr> */
border: none;
background: transparent url('http://s22.postimg.org/53ci53xht/dotted.png') no-repeat center center;
height: 2px;
/* Use the line below instead to style the <hr> with a border */
/*border-top: 1px dashed gray;*/
margin-top: 0;
margin-bottom: 0;
position: absolute;
top: 50%;
}
.steps .img-responsive {
margin: 0 auto;
}
You'll notice I did not use your dotted line, and instead used an <hr>, and styled its border-top with a dashed line. (Edit: but op wants to use the image he provided, see comments.)
To answer your question regarding the number of columns (10 vs Bootstrap grid's 12), you need to understand that you don't always have to fill all the twelve columns. Here, we're using 2 columns per image, plus a first column as offset, and you get your five images, centered, with one offset column on the left, and an empty column on the right, and it's fine!
Note that I used img-responsive class to ensure your images never grow too big, outside of their 2 columns, and that I used xs (meaning "extra small") in the class col-xs-2, which means all device screen sizes will get the five images on the same line (and resized to fit), which might not be want you want for smaller devices...
The following is my code. I'm creating a 12-row span in a container. I have a table inside this row, whose content is changing dynamically. However, I find that my content overflows the row vertically
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<pre>
<table border="1" align="right" cellspacing="3" cellpadding="10">
<tr>
<td id="three"><div id="name"></div></td>
<td id="one"><div id="something"></div></td>
<td id="two"></div></td>
</tr>
</table>
</pre>
</div>
</div>
</div>
A screenshot of what is happening :
Is there a way to change the height of the row-fluid?