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?
Related
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.
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
Im generating a table in php, and would like it in the top left of the screen.
The table varies slightly in width so directly to the right of it should go two blocks of text (text1, text2) and a third text (text3) which floats in the topmost right of the screen.
Below the three texts should be text4.
Requirements:
Text1 needs to always be to the right of the table.
text4 always needs to be below the top 3 texts.
I uploaded an image with the span/div/table/text and have literally been trying to arrange these for about 1.5 hours now. it seems like it should be really simple but im struggling with my requirements and one of them always seems to misalign. (all the 'texts' are just pieces of html text (not <input type=text or <textarea>)
Edit: Thankyou, is it possible without using libraries or bootstrap?
If you don't like using <table> tags for layouts, and don't like an extra large dependency to your project (like bootstrap), one could go for the following option:
<div class="table">
Table
</div>
<div class="text-container">
<div class="text1">
Text1
</div>
<div class="text2">
Text2
</div>
<div class="text3">
Text3
</div>
<div class="text4">
Text4
</div>
</div>
It is crucial that the display type of .table, .text-container and .text{1,2,3} are all display: inline-block;. This will make them inline. However, to force wrapping of .text4, this will still have to be display: block;.
https://jsfiddle.net/nnLofpL1/
Like hjardine uses in his example: it may also be a good idea to look to the clear property.
However it is not the nicest solution, the classic "table in table" does the job:
<table>
<tr>
<td>
<table>
<tr>
<td>PHP generated data</td>
</tr>
</table>
</td>
<td>
<table>
<tr style="height: 60px;">
<td>Text 1</td>
<td style="padding-left: 100px;">Text 2</td>
<td style="width: 200px; text-align: right;">Text 3</td>
</tr>
<tr style="height: 60px;">
<td colspan="3">Text 4</td>
</tr>
</table>
</td>
</tr>
</table>
https://jsfiddle.net/jrrfbqfk/
I can see you don't want to use bootstrap so i have updated an answer so that you don't have to use a table either, exact same output but without the problems of using a table for output.
.div1{float:left;width:40%;border:1px solid #000;min-height:200px;}
.div2{float:right;width:58%;border:1px solid #000;min-height:200px;}
.row1{min-height:100px;}
.sp1{float:left;width:30%;padding:4px;border:1px solid #000;min-height:60px;}
.sp2{float:left;width:30%;padding:4px;border:1px solid #000;min-height:60px;}
.sp3{float:right;width:30%;text-align:right;padding:4px;border:1px solid #000;min-height:60px;}
.divRow{width:100%;border: 1px solid #000;}
<div>
<div class="div1">
<div class="divRow">1</div>
<div class="divRow">2</div>
<div class="divRow">3</div>
<div class="divRow">4</div>
<div class="divRow">5</div>
<div class="divRow">6</div>
</div>
<div class="div2">
<div>
<div class="row1">
<div class="sp1">1</div>
<div class="sp2">2</div>
<div class="sp3">3</div>
<div style="clear:both;"></div>
</div>
<div class="row2" style="border:1px solid #000;min-height:40px;">
sadsadsad
</div>
</div>
</div>
<div style="clear:both;">
</div>
</div>
An easy solution to laying out a page so that things are where you want them is using bootstrap, because of the grid layout in bootstrap you can keep things in the same relative positions no matter what the size of the page is.
For what you want to do i think it would benefit you greatly.
EXAMPLE
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="Container">
<div class="row">
<div class="col-xs-2">
Top left
</div>
<div class="col-xs-2 col-xs-offset-8">
Top right
</div>
</div>
</div>
This is a link to Bootstrap which is well worth learning IMHO!
I have a table in my jsp inside a div which is resizeable.
When I'm resizing the div, I'm not able to resize the height of table inside where as width of table is getting resized. Following is my snippet. Please check once.
<div id="id" style="height:350px; width250px;" class="control">
<div id="fifth_heading" class="heading_control">
<i class="fa2 fa-fifth"></i>
<p><%=entry1.getDivdescription() %></p>
<div class="button_right_second">
<i class="fa3 fa-second3" id="<%=entry1.getDivid() %>"></i>
</div>
</div>
<div class="fifth_dropdown">
<div class="table_data" id="table_second">
<table id="example3" style="height:auto;"class="display" border="0" cellspacing="0" cellpadding="0">
<!-- the below tr prints the dates -->
<tbody>
<tr id="line1">
<td>
<span id="header_title">Your Current Lead Time</span>
</td>
</tr>
<tr id="line2">
<td>
<span id="value">alignvalue</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
div.table_data{margin-left:2px;margin-right:10px;margin-top:5px;overflow:auto;}
#table_second::-webkit-scrollbar{
width:10px;
background-color:#cccccc;
}
#table_second::-webkit-scrollbar-thumb{
background-color:rgb(78, 82, 93);
border-radius:10px;
}
#table_second::-webkit-scrollbar-thumb:hover{
background-color:rgb(78, 82, 93);
border:1px solid #333333;
}
#table_second::-webkit-scrollbar-thumb:active{
background-color:rgb(78, 82, 93);
border:1px solid #333333;
}
Try setting the height of your table to 100% and explicitly setting the div's height.
Answer as per this post: link
Not sure which <div> you want to resize but you can try one of these...
If you want to resize the <div id="id" ... class="control"> to make your <table> resized, try to add the height property in your div.table_data with % percent unit.
If you like to resize your <div> and <table>, you must set the height your <div> with class control, div.table_data and your <table> to 100% or any value (from 0-100) with % percent unit.
My code snippet after doing that...
CSS
div.table_data
{
margin-left:2px;
margin-right:10px;
margin-top:5px;
overflow:auto;
height:70%;
background-color:#ccffcc;
}
(Excluded the -webkit-scrollbar)
HTML
<div id="id" style="height:100%; width250px;background-color:#ff9999;" class="control">
<div id="fifth_heading" class="heading_control">
<i class="fa2 fa-fifth"></i>
<p>dddddddd</p>
<div class="button_right_second">
<i class="fa3 fa-second3" id="ddd"></i>
</div>
</div>
<div class="fifth_dropdown">
<div class="table_data" id="table_second">
<table id="example3" style="height:100%;" class="display" border="1" cellspacing="0" cellpadding="0">
<!-- the below tr prints the dates -->
<tbody>
<tr id="line1">
<td>
<span id="header_title">Your Current Lead Time</span>
</td>
</tr>
<tr id="line2">
<td>
<span id="value">alignvalue</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
This snippet can make the two <div> and your <table> will be re-sized when the window is re-sized.
If you don't like that your <table> will be too small if the size of your window is too small, you can use the min-height CSS property. For bigger sizes, use max-height.
I cant seem to have a logo and a table side by side but not very close to each other. The only way I've been able to achieve this is using a table, but the image and the table become very close to each other. I want to the table in the middle of the page, and the logo between the table and the far end of the left screen.
like this
logo table
this is how it is right now
logo
---table
<div id="header" style="height:15%;width:100%;">
<img src="/e-com/images/logo.jpg" style="margin-left:15%;margin-top:5%"/>
<table border="1" width="44" style="margin-left:30%;float:top;">
<tr>
<td><h1>Home</h1></td>
<td><h1>Home</h1></td>
<td><h1>Home</h1></td>
</tr>
</table>
</div>
use two div and set to float left
<div id="header" style="height:15%;width:100%;">
<div style='float:left'>
<img src="/e-com/images/logo.jpg" style="margin-left:15%;margin-top:5%"/>
</div>
<div style='float:leftt'>
<table border="1" width="44" style="margin-left:30%;float:top;">
<tr>
<td><h1>Home</h1></td>
<td><h1>Home</h1></td>
<td><h1>Home</h1></td>
</tr>
</table>
</div>
</div>
1) Don't use tables for layouts. Learn how to use FLOATS.
2) Use a CSS background image for your logo. UI elements (that are not page content) should be CSS backgrounds, not inline images.
Assuming your logo is 100 x 100 (adjust accordingly):
.logoContainer {
background-image:url(../yourimage.png);
background-repeat:no-repeat
padding-left:100px;
min-height:100px;
}
This should be an easy way to get u going for what ur trying to achieve..
http://jsfiddle.net/8NDZP/
<div style='float:left'>
<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Moscow_July_2011-7a.jpg/325px-Moscow_July_2011-7a.jpg'>
</div>
<div style='float:right'>
<table border="1" width="44" style="margin-left:30%;float:top;">
<tr>
<td>
<h1>Home</h1>
</td>
<td>
<h1>Home</h1>
</td>
<td>
<h1>Home</h1>
</td>
</tr>
</table>
</div>