I would like to build flexible layout with scrollbars and dynamic widths.
I have table width,height 100% of window and 2(3) columns with auto widths ( widths depends on it's content ) and center column with remaining width. I can't specify exact width of column.
I would like to have Horizontal and Vertical Scrollbars if my content bigger than cell width and height;
Example 1
Example 2
Here is LiveDemo
<div style="width:1024px">
<table style="width:100%">
<tr>
<td>
<div>Column Menu with Dynamic Content and width</div>
</td>
<td style="width:100%;">
<div style="overflow:scroll;">Column Big Dynamic Content with ScrollBars</div>
</td>
</tr>
</table>
</div>
I can't use :
table-layout:fixed - because columns width depends on it's content
overflow:scroll with width,height specified
i need pure css solution
I've tried :
width:100%, max-width:100%, min-width:100% - not working
white-space:wrap works only if content is text, and there is only vertical scrollbar
Question is : How to make div with overflow:scroll or overflow:auto have width,height of it's parent container ( in my case it is TD )
p.s
BEST case would be if it was <TD style="overflow:auto"></TD> and width is auto.
Found second solution ( more prettier ), and it works!
Here on stackoverflow there are solutions saying add child div to td with height,width, and overflow scroll, but they all not working with dynamic widths of cells, so I slightly modified solution by adding to div position:absolute and set top,bottom,right,left to 0, and adding to parent container position:relative;
Here is Live Demo 1
<table border="1" width="100%" height="100%">
<tr>
<td> <!-- left column with autowidth -->
<div style="width:200px">Left Menu</div>
</td>
<td style="width:100%; position:relative;"> <!-- fill remaing width of columns -->
<div style="position:absolute; top:0; bottom:0; left:0; right:0; overflow:auto; ">
<div style="width:1000px; height:1000px; background:#f05555;">Calendar Mega BIG content</div>
</div>
</td>
<td> <!-- right column with autowidth -->
<div style="width:300px">Right Menu</div>
</td>
</tr>
</table>
If we go further and be more modern ( in life without tables ), it would be like this :
Here is Live Demo 2
<ul style="width:100%; height:100%; display:table;">
<li style="display:table-cell;"> <!-- left column with autowidth -->
<div style="width:200px">Left Menu</div>
</li>
<li style="display:table-cell; width:100%; position:relative;"> <!-- fill remaing width of columns -->
<div style="position:absolute; top:0; bottom:0; left:0; right:0; overflow:auto;">
<div style="width:1000px; height:1000px; background:#f05555;">Calendar Mega BIG content</div>
</div>
</li>
<li style="display:table-cell;"> <!-- right column with autowidth -->
<div style="width:300px">Right Menu</div>
</li>
</ul>
Found ( Ugly ) solution, but it works!
Basic idea, is to wrap scrollable content inside one more table with table-layout:fixed, leaving outer table with dynamic widths :)
Here is Live Demo
<table border="1" width="100%" height="100%">
<tr>
<td>
<div style="width:200px">Left Menu</div>
</td>
<td style="width: 100%;">
<table style="table-layout: fixed; width: 100%; height: 100%;">
<tr><td>
<div style="overflow:auto; width:100%; height:100%;">
<div style="width:1000px; height:1000px; background:#f0f0f0;">Calendar</div>
</div>
</td>
</tr>
</table>
</td>
<td>
<div style="width:300px">Right Menu</div>
</td>
</tr>
</table>
If you find better solution, without much markup tags, please welcome to post here...!
p.s I think i should try play with display:table or flex to achieve more elegant solution
Related
I'm using ng-repeat to create a table with schedule blocks, but some are smaller than tr height, and I need that all of them have the same heigh. In each td I have a modified md-checkbox:
Missing space
I'v created a codepen:
Schedule
<div id="main" ng-app="MyApp" layout>
<div ng-view layout="column" flex></div>
<script type="text/ng-template" id="template.html">
<md-toolbar class="" layout="row">
<center>toolbar</center>
</md-toolbar>
<md-content class="content" >
<table class="vistaTabla" cellspacing="0" cellpadding="0">
<tr ng-repeat="hora in bloques[0]">
<td class="vistaBloque" ng-repeat="bloque in hora">
<md-checkbox class=" text-longshadow md-whiteframe-1dp bloque dotted" >
{{bloque.materia}} {{bloque.nombre}}</td>
</md-checkbox>
</tr>
</table>
</md-content>
</script>
</div>
Solution for your problem is the block that is inside <td>.
<td> elements are always the size of their <tr> parents. The md-checkbox element is the one that is messing with you.
Define rule for element .md-whiteframe-1dp:
.md-whiteframe-1dp {
height: 100%;
}
I need help with HTML / .css
I am trying to setup Image and Text in the center of Web Form Page. Also Image should be on the left of Text.
I've tried 2 solutions, but when I create table - it display on the left of screen and can't go middle.
A
<section class="main-page">
<div class="image-wrapper">
<asp:Image ID="Image2" Height="35px" runat="server" ImageUrl="~/Images/Origin/logo.jpg" />
</div>
<div class="content-wrapper">
<hgroup class="title">
<h1><%: Title %></h1>
</hgroup>
</div>
</section>
B
<table>
<tbody>
<tr>
<th><h1><%: Title %></h1></th>
<th><asp:Image ID="Image2" Height="35px" runat="server" ImageUrl="~/Images/Origin/logo.jpg" /></th>
</tr>
</tbody>
</table>
.css
.content-wrapper {
margin: 0 auto;
/*max-width: 960px;*/
}
You need to place the image/text in a container with text-align:center; defined in order for them to be centred, then the text should simply precede the image.
If for whatever reason the img element cant be placed following the text, you may need to float the elements to rearrange their ordering.
If the text is within a block level element, you will also need to set display:inline-block on it
As a basic demo:
HTML
<section>Text
<img src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRdw26b_dwa8moS-gRSFpaG3dwJTB6Nqtqxexmb7PscuD5gVP-P' />
</section>
CSS
section {
text-align:center;
vertical-align:Center;
}
Demo Fiddle of example A
HTML
<section class="main-page">
<div class="image-wrapper">
<img src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRdw26b_dwa8moS-gRSFpaG3dwJTB6Nqtqxexmb7PscuD5gVP-P' />
</div>
<div class="content-wrapper">
<hgroup class="title">
<h1>Title</h1>
</hgroup>
</div>
</section>
CSS
body{
text-align:center;
}
div, section{
display:inline-block;
}
div:first-child{
float:right;
}
div:last-child{
float:left;
}
Demo Fiddle of example B
HTML
<table>
<tbody>
<tr>
<th><h1>Title</h1></th>
<th><img src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRdw26b_dwa8moS-gRSFpaG3dwJTB6Nqtqxexmb7PscuD5gVP-P' /></th>
</tr>
</tbody>
</table>
CSS
body{
text-align:center;
}
table{
display:inline-block;
}
How to make display:table-cell style works (or look-alike alternative) if divs with style table-row are inside table cells? (see the link)
http://jsfiddle.net/ELKQg/460/
I'd like the container1 div behave like the container2.
code: (if the link were to become unreachable)
html:
<div id="container1" class="container">
<table>
<tr>
<td>
<div class="row">
<div class="cell">aaaa</div>
<div class="cell expand">b</div>
<div class="cell">c</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="cell">d</div>
<div class="cell expand">eeeee</div>
<div class="cell">f</div>
</div>
</td>
</tr>
</table>
</div>
<div id="container2" class="container">
<div class="row">
<div class="cell">aaaa</div>
<div class="cell expand">b</div>
<div class="cell">c</div>
</div>
<div class="row">
<div class="cell">d</div>
<div class="cell expand">eeeee</div>
<div class="cell">f</div>
</div>
</div>
css:
.container{width: 500px;overflow:hidden; /* instead of clearfix div */}
div { border:1px solid;padding: 1px;}
.row {display:table-row;}
.cell {display:table-cell;}
.expand{overflow:hidden;width:100%;}
The extra <table> containing your <div>s in .container1 needs to have width: 100%
display: table-cell elements don't necessarily need a containing display: table-row as long as the parent is display: table. Set the .row to that (ideally you'd re-name it, seeing as the rule no longer makes sense)
Fixed and forked your demo:
http://jsfiddle.net/barney/ahMg8/
Use display: table for the parent table before using display:table-cell
Use td's instead of divs inside tr:
<div id="container1" class="container">
<table>
<tr>
<td class="cell">aaaa</td>
<td class="cell expand">b</td>
<td class="cell">c</td>
</tr>
<tr>
<td class="cell">d</div>
<td class="cell expand">eeeee</td>
<td class="cell">f</td>
</tr>
</table>
</div>
Working fiddle
I want to display the rows of a table on a single line. This is a problem in Internet Explorer 6 and 7 because setting the float attribute to left and the display to block won't do. And changing <tr>s to <td>s won't do either as these html elements are generated by a framework's code that i am not allowed to change.
Edit: Some of you wanted the code, i dunno why it would help but here it is (specific images and classes have been edited out, the code is not available online, some-class may not be the same class everywhere)
<table class="some-class" width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr class="some-class">
<td class="some-class">
<img src=pic.jpg"/>
<div class="some-class">
<div class="some-class">
<img src=pic.jpg"/>
<p></p>
<p></p>
</div> <img src=pic.jpg"/>
</div>
</td>
</tr>
<tr class="some-class">
<td class="some-class">
<img src=pic.jpg"/>
<div class="some-class">
<div class="some-class">
<img src=pic.jpg"/>
<p></p>
<p></p>
</div> <img src=pic.jpg"/>
</div>
</td>
</tr>
<tr class="some-class">
<td class="some-class">
<img src=pic.jpg"/>
<div class="some-class">
<div class="some-class">
<img src=pic.jpg"/>
<p></p>
<p></p>
</div> <img src=pic.jpg"/>
</div>
</td>
</tr>
</table>
I'm afraid I don't think this can be done in a sane and valid manner. float: left in a table is absolutely taboo. Edit: This seems to be valid (!) and possible by taking away each element's table-* display property, but isn't well supported by IE.
The only workable solution I can think of is manipulating the table elements using JavaScript/jQuery, and making the needed conversions (trs into tds...).
The obvious downside of that is that it won't work with JavaScript turned off.
Have you thought about reformatting on the client using Javascript and/or a Javascript library like JQuery? It should be possible to manipulate the DOM to create an appropriate display structure possibly replacing the table elements with DIVs, for example.
Well, there is a css solution that is not without it's drawbacks, so I cannot say I whole-heartedly recommend it (and has not been thoroughly tested cross browser), but for purposes of "possibility" I offer it:
A slight modification of your html for illustration (added some classes to the tr tags):
<table class="some-class" border="0" cellspacing="0" cellpadding="0">
<tr class="some-class r1">
<td class="some-class">
<img src="pic.jpg"/>
<div class="some-class">
<div class="some-class">
<img src="pic.jpg"/>
<p></p>
<p></p>
</div>
<img src="pic.jpg"/>
</div>
</td>
</tr>
<tr class="some-class r2">
<td class="some-class">
<img src="pic.jpg"/>
<div class="some-class">
<div class="some-class">
<img src="pic.jpg"/>
<p></p>
<p></p>
</div>
<img src="pic.jpg"/>
</div>
</td>
</tr>
<tr class="some-class r3">
<td class="some-class">
<img src="pic.jpg"/>
<div class="some-class">
<div class="some-class">
<img src="pic.jpg"/>
<p></p>
<p></p>
</div>
<img src="pic.jpg"/>
</div>
</td>
</tr>
</table>
Some things to note before looking at the css:
I added display: block to some of the table elements for display purposes in FireFox, IE6-7 will ignore those. You may want to just target this solution to IE6-7 if you decide that it fits your purposes.
Some of this styling was illustration purposes.
This illustration uses a set and equal width to the td elements and is only valid for 3 rows. Numbers would have to change based on # of rows to display in line. Basically, my point is, this may not work for your situation, but it at least illustrative that given the right circumstances, it is possible to do what you requested with css only.
The css:
html, body {width: 100%; padding: 0; margin: 0;}
table {position: relative; table-layout: fixed; width: 33%; display: block;}
tr {position: absolute; width: 100%;}
td { border: 1px solid red; width: 100%; display: block;}
tr.r1 {left: 0;}
tr.r2 {left: 100%;}
tr.r3 {left: 200%;}
This would ideally have rows with set heights, as the table ends up with a height: 0 since the data within it is position: absolute, so setting a height to the table would be recommended if possible.
I am usually using table to do layouting. But I would like to try out the layouting in Div. Here is the problem, When I "float: left" a div, it makes the succeeding div to float with it. I tried to put "float: none" to the next div to make it break a line but it does not work.
Here is what I want to do using table:
<hr style="width: 100%;" />
<table>
<tr>
<td>
<div id="divLeftPane">
...
</div>
</td>
<td>
<div id="divCenterPane">
...
</div>
</td>
<td>
<div id="divRightPane">
...
</div>
</td>
</tr>
</table>
<hr style="width: 100%;" />
Here is what I have so far tried with div using float:
<hr style="width: 100%;" />
<div id="divContainer">
<div id="divLeftPane" style="float: left;">
...
</div>
<div id="divCenterPane" style="float: left;">
...
</div>
<div id="divRightPane">
...
</div>
</div>
<hr style="width: 100%;" />
The problem with the use of div is the bottom is also being floated to the left. I tried putting float: none to the last div, the HR tag and even the divContainer. Why does the last hr float?
This will give you the desired effect:
<hr style="width: 100%;" />
<div id="divContainer">
<div id="divLeftPane" style="float: left;">
...
</div>
<div id="divCenterPane" style="float: left;">
...
</div>
<div id="divRightPane" style="float:left; ">
...
</div>
<div style="clear: left;"></div>
</div>
<hr style="width: 100%;" />
Floating the 3 divs left will make them appear side by side, but you'll notice that divContainer does not take the height of the div tags inside it. Adding the div with clear:left basically undoes this.
edit: Avoid inline styles when you do this for real.
Use the attribute
clear:left;
on the bottom element.
adding
#divContainer {
overflow: hidden;
}
will accomplish this without the extra div at the end