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%;
}
Related
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
I need to create a list of divs as looking like below sample:
I'm using Bootstrap grid system and augularjs. I create divs dynamically, using angularjs ng-repeat directive.
What I want is an endless list of divs containing attribute 'class"col-md-2"' inside a div containing attribute 'class"col-md-12"'. Then I want to use a scrollbar to scroll all the divs in the outer div.
Example code:
<div class="col-md-12" scrollablebar>
<div ng-repeat="newview in newviewslist" class="col-md-2">
Here goes the date from newview...
</div>
</div>
This doesn't work and "off course" is creating new rows each time ng-repeat is creating a div.
How do I prevent that from happen?
I solved the problem like this:
<div class="container-fluid">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 col-xs-11" scrollablehorizontal>
<table class="borderless">
<tbody>
<tr>
<td ng-repeat="newviews in newviews" valign="top" class="shadowbox" scrollableverticall>
<p>
all the things...
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-1"></div>
</div>
</div>
in a col-md-12, there can be 6 x col-md-2 after that there is a linebreak.
try to change "col-md-12" to "row-fluid"
<div class="row-fluid" scrollablebar>
<div ng-repeat="newview in newviewslist" class="col-md-2">
Here goes the date from newview...
</div>
</div>
and add css:
.row-fluid{
white-space: nowrap;
}
.row-fluid .col-md-2{
display: inline-block;
margin-left:10px;
}
jsfiddle
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
My requirement is I have two links at left side and if I click on a link, respective page should get displayed on the right side.
how can make this arrangement using tags.
I tried as the below, but its not showing side by side. where as DisplayData gets appeared at the bottom of links. Thanks in advance..
<div id="accountstabs-1">
<div id="links" style="text-align:left">
<li>Manage</li>
<li>Users</li>
</div>
<div id="DisplayData" style="text-align:right">
<table class="data">
<thead>
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
</tr>
</thead>
</table>
</div>
</div>
CSS:
#accountstabs-1>div {
float : left;
}
http://jsfiddle.net/T4E88/
You need to use floats instead of text-align to position elements. (text-align should only be used for text.)
Check out this JSFiddle example.
I updated your HTML like this:
<div id="accountstabs-1">
<div id="links" >
<li>Manage</li>
<li>Users</li>
</div>
<div id="DisplayData" >
<table class="data">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</table>
</div>
<div class="clr"></div>
</div>
Notice that I removed the two text-align inline styles from the divs, and added the new div near the bottom with class clr.
Then the CSS looks like this:
#links {
width: 50%;
float: left;
}
#DisplayData {
width: 50%;
float: right;
}
/* clearfix */
.clr { clear: both; }
The purpose of the "clearfix" is to make sure that any elements added after your right column get displayed underneath the columns properly.
You should put the styles in a separate CSS file, but the following should work;
<div id="accountstabs-1" style="width:400px">
<div id="links" style="display:block;float:left;width:200px">
<li>Manage</li>
<li>Users</li>
</div>
<div id="DisplayData" style="display:block;float:right;width:200px">
<table class="data">
<thead>
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
</tr>
</thead>
</table>
</div>
</div>
div is a block element and it take the whole place horizantly,
to place another div in parallel you need to use css property float left .
use style property style="float:left".
<div id="accountstabs-1">
<div id="links" style="text-align:left; float:left">
<li>Manage</li>
<li>Users</li>
</div>
<div id="DisplayData" style="text-align:right">
<table class="data">
<thead>
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
</tr>
</thead>
</table>
</div>
</div>
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.