Does anybody knows how to group two cells of two rows in a table, using CSS display property value table-row-group?
I know that in CSS rowspan doesn't exist but table-row-group is defined to be equivalent to tbody as I can read in this http://www.w3.org/TR/CSS21/tables.html#value-def-table-row-group.
In the following code, I used some divs to create a table using table as CSS display property value. Then in this brand new table, I want to group together the divs having the role of cells, with id row2_cell2 and row3_cell2. I have tried to do it, but, without success, using the value table-row-group of the CSS property display:
<div id='table'>
<div class='row'>
<div class='cell'>
</div>
<div class='cell'>
</div>
</div>
<div class='row_group'>
<div id='row_2' class='row'>
<div class='cell'>
</div>
<div id='row2_cell2' class='cell'>
</div>
</div>
<div id='row_footer' class='row'>
<div class='cell'>
</div>
<div id='row3_cell2' class='cell'>
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/framj00/2eN3U/
Can you help me please to resolve this problem? many thanks!
table-row-group works only with table element in HTML.So instead of divs use table.You can follow the Fiddle
<html>
<head>
<style>
.black {
border-style: solid;
border-width: 1px;
border-collapse: collapse;
padding: 3px;
}
.tbl { display: table; }
.row { display: table-row; }
.cel { display: table-cell; }
.cpt {
display: table-caption;
text-align: center;
}
.thc {
display: table-cell;
background-color:#f2e8da;
text-align: center;
font-weight: bold;
}
.row:nth-child(odd) { background-color: #def; }
.row:nth-child(even) { background-color: #fff; }
.row:hover {background-color:#f2e8da; }
.tbody { display: table-row-group }
.thead { display: table-header-group }
input {
width: 100%;
background-color: inherit;
}
</style>
</head>
<body>
<div class="tbl black">
<div class="cpt"><input type="search" placeholder="search me"/></div>
<div class="thead">
<div class="row black">
<div class="thc black">name</div>
<div class="thc black">form</div>
</div>
</div>
<div class="tbody" id="data">
<form class="row black">
<div class="cel black">snake<input type="hidden" name="cartitem" value="55"></div>
<div class="cel black"><input name="count" value="1"/></div>
</form>
<form class="row black">
<div class="cel black">snake<input type="hidden" name="cartitem" value="55"></div>
<div class="cel black"><input name="count" value="2"/></div>
</form>
<form class="row black">
<div class="cel black">snake<input type="hidden" name="cartitem" value="55"></div>
<div class="cel black"><input name="count" value="3"/></div>
</form>
</div>
</div>
</body>
</html>
Related
Issue: So vertical alignment issue is I have two divs in the last column and I'm trying to get one to stay at top and one to stay at the bottom regardless of how the central column grows. I can work this out by using fixed heights but that's no good in this case.
Here is my code example : JS Fiddle
HTML:
<div class="row" class="property-bundle"><!-- (x) number of these -->
<div class="col-xs-11 wrapper">
<div class="row">
<div class="col-xs-2 pull-left vendor">
<img src="http://placehold.it/100x100" />
</div>
<div class="col-xs-8 properties-list">
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 1</p></div>
</div>
<div class="row"><hr/></div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 2</p></div>
</div>
<div class="row"><hr/></div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 3</p></div>
</div>
</div>
<div class="col-xs-2 costs"><!-- costs column -->
<div class="row total">
<h3 class="text-right">TOTAL: £1,2M</h3><!--stay at top-->
</div>
<div class="row" class="fees"> <!--stay at bottom-->
<div class="col-xs-12">
<hr/>
<p class="text-right">+ Materials £300K</p>
<p class="text-right">+ Build £100K</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.wrapper {border: 1px solid black; padding: 10px; margin: 15px;}
.vendor {min-width: 120px;}
.properties-list {background-color: aquamarine}
.costs {vertical-align: top; min-width: 150px; vertical-align: center}
.fees {vertical-align: bottom; }
h3 {font-weight: 400}
h4 {color: green}
.total { margin-right: 0px; }
Hi you can try using flexbox
I just change your html like this:
<div class="col-xs-2 costs">
<!--stay at top-->
<div class="total">
<h3 class="text-right">TOTAL: £1,2M</h3>
</div>
<hr/>
<div class="materials">
<p class="text-right">+ Materials £300K</p>
<p class="text-right">+ Build £100K</p>
</div>
</div>
</div>
Then I add on costs div display:flex;and on total div flex-grow: 1 This flex-grow will push materials on bottom of div.
You just need to add on body, html, row and costs div height:100%
Here is css:
.costs {
vertical-align: center;
display: flex;
flex-direction: column;
height: 100%;
}
.total {
flex-grow: 1;
}
You can see example on this link: https://jsfiddle.net/3L5Lbwhn/9/
Ok I simplified this a bit, but essentially flex did what I needed so many thanks to Edin Puzic for putting me on the right lines! It also allowed me to fix the 1st and last col width and make the middle one dynamic horiontally too.
JsFiddle
<div class="row-flex">
<div class="col-flex-1">
<img src="http://placehold.it/100x100" />
</div>
<div class="col-flex-2">
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 1</p>
</div>
</div>
<div class="row">
<hr/>
</div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 2</p>
</div>
</div>
<div class="row">
<hr/>
</div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 3</p>
</div>
</div>
</div>
<div class="col-flex-3">
<div class="pos-top">
<div class="row right-text">
TOP right
</div>
</div>
<div class="pos-bottom">
<div class="row right-text">
<p>
BOTTOM right
</p>
</div>
</div>
</div>
</div>
CSS
.row-flex {
height: auto;
display: flex;
flex-flow: row column;
}
.col-flex-1 {
min-width: 200px;
border-left: 1px #ccc solid;
flex: 0 0;
}
.col-flex-2 {
width: 80%;
border-left: 1px #ccc solid;
flex: 1 1;
}
.col-flex-3 {
min-width: 200px;
border-left: 1px #ccc solid;
flex: 0 0;
}
.flex-container {
display: -webkit-flex;
display: flex;
width: 100%;
height: 100%;
background-color: lightgrey;
}
.pos-top {
display: -webkit-flex;
display: flex;
height: 50%;
width: 100%;
-webkit-align-items: flex-start;
align-items: flex-start;
background-color: yellow;
}
.pos-bottom {
display: -webkit-flex;
display: flex;
height: 50%;
width: 100%;
-webkit-align-items: flex-end;
align-items: flex-end;
background-color: green;
}
.right-text {
text-align: right;
width: 100%;
}
I want to print a bootstrap page. Here is my page layout
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="image/logo.png">
</div>
</div>
</div>
<div class="container" id="student">
<div class="row">
<div class="col-sm-4">
<h1>Student</h1>
</div>
<div class="col-sm-offset-2 col-sm-6" id="date">
<form class="form-inline">
<div class="form-group">
<label for="focusedInput"> <b>Date:</b></label>
<input class="form-control" id="focusedInput" type="text" placeholder="DD Month Year">
</div>
</form>
</div>
</div>
</div>
Also I've css
#font-face {
font-family: "myfont";
src: url("../fonts/opensans/OpenSans-Regular 2.ttf");
}
body{
font-family: "myfont";
/*-webkit-print-color-adjust: exact;*/
}
img{
width: 150px;
}
#student{
margin-top: 50px;
}
#date{
background: black;
margin-top: 20px;
color: white;
padding: 10px;
}
Problem is: css is not loading properly. I tried searching stackoverflow but did not get any exact solution. How can I do that?
Here is the fiddle https://jsfiddle.net/wc6rga7o/
try
#media print {
/* Your styles here */
body{
color: #111111;
}
#date{
-webkit-print-color-adjust: exact!important;
}
}
updated your fiddle https://jsfiddle.net/wc6rga7o/2/
I am working with an existing system, and am trying to modify the CSS in order to arrange the three columns correctly.
What css changes do I need to make in order to display the third column correctly?
View in this JSFiddle
CSS
.test .repeater {
border: none;
margin: 0;
}
.test .indent1 .wizard-parentcontrol .controlkl {
width: 33%;
float: left;
display: block;
}
.test .wizard-controls .indent1 .control:first-child {
margin-top: 17px;
}
.test .indent1 .wizard-parentcontrol .popupbrowser {
width: 30%;
float: left;
border: 1px solid red;
display: block;
}
HTML
<div class="test wizard-parentcontrol">
<div>
<div>
<fieldset></fieldset>
</div>
<div>
<div>
<fieldset>
<div>
<div class="repeater indent1">
<div class="wizard-parentcontrol">
<div>
<div>
<div class="controlkl">Column 1</div>
</div>
</div>
<div>
<div>
<fieldset>
<div id="p0t2c4dpopupbrowserControl" class="popupbrowser">Column 2</div>
</fieldset>
</div>
<div>
<div class="">
<p class="ctrlinvalidmessage"></p>
<fieldset>
<div id="p0t2c5dpopupbrowserControl" class="popupbrowser">Column 3</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
Check If you can do the following changes.
I just added class
.wizard-parentcontrol div
{
float:left;
}
and removed the hardcoded width's of 33% and 30% from your code.
Check the demo
ie 8 is adding unnecessary padding to a div. I cannot see any unusual styling here. Can somebody help ?
Html
The div highlighed in blue is the one in context.
.block {
clear: both;
}
.inline {
float: left;
clear: none;
padding: 0;
}
div.content {
padding: 0 18px 0 0;
}
Here is the html code that will reproduce this issue. Sorry about the length. But if you copy this to a html file and open it in ie8, you'll be able to reproduce it.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
.block {
clear: both;
}
div.block .inline:last-child {
float: none;
overflow: hidden;
}
div.content-root {
padding: 0 0 0 18px;
}
.inline {
float: left;
clear: none;
padding: 0;
}
div.content.input-container {
padding-right: 0;
}
div.content {
padding: 0 18px 0 0;
}
</style>
</head>
<body>
<div id="contentPane" style="background-color: transparent; display: block;">
<form>
<div class="block content-root">
<div class="block">
<div class="block">
<div class="block">
<div class="inline">
<label>
<div class="block">
<div class="inline content input-container">
<input type="checkbox" />
</div>
<div class="inline">
<div class="block">
<div class="block">
<div class="inline" style="float: left;">
<div class="block content">
<p>
<span style="font-family: arial; font-size: 11pt;">C. </span>
</p>
</div>
</div>
<div class="inline">
<div class="inline">
<p><span>Correct</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</label>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
The paragraph tag has its own margin by default.
If you write
<p style="margin:0px;">
the 'padding' above and below the word 'Correct' goes.
I have a strange problem.One of my div's width is not working. My CSS is like
.product_info
{
margin-top:10px;
background:#444;
width:850px;
}
.product_image
{
width:350px;
text-align:center;
float:left;
padding:8px;
border:1px solid #e9e9e9;
background:#fff;
}
.product_details
{
float:left;
width:400px;
margin-left:25px;
font-size:14px;
font-family:"Helvetica";
background:#d71414;
}
And My HTML file is
<div class="product_info">
<div class="product_image">
</div>
<div class="product_details">
<div class="selection">
<form action="{$path_site}{$indeex_file}" method="post">
Size
{foreach name = feach item = k from = $product_size}
<input type="radio" name="size" value="{$k.product_size}" />{$k.product_size}
{/foreach}
</div>
<div class="selection">
No. of pieces <input type="text" name="quantity">
</div>
<div class="prc">
<span class="WebRupee">Rs.</span> {$product_info->product_cost}.00
</div>
<div class="buy_btn"><input type="submit" value="BUY" /></div>
</form>
</div>
</div>
But as you can see in the attached image my div product_info's width is not 850px, Whats wrong
display: flex on the parent element also changes how width and height work. Disable shrinking/growing by flex: 0 0 auto;, or use min-width and max-width instead.
Width and height basically lose the original meaning in this context and will act as a flex-basis, see geddski: The Difference Between Width and Flex Basis
.box {
margin: 2px;
border: 1px solid black;
padding: 3px;
}
.box.gray {
background: lightgray;
}
.box.container {
display: flex;
flex-flow: row;
}
<div class="box" style="
width: 300px;
font-size: 80%;
">
<div>
width: 300px;
</div>
<div class="box container">
<div class="box gray" style="width: 200px;">
width: 200px;
</div>
<div class="box gray" style="width: 200px;">
width: 200px;
</div>
</div>
<div class="box container">
<div class="box gray" style="
width: 200px;
flex: 0 0 auto;
">
width: 200px;<br>
flex: 0 0 auto;
</div>
<div class="box gray" style="width: 200px;">
width: 200px;
</div>
</div>
</div>
Try
display:block
It should work
display: inline-block; Worked for me
Example:
label {
min-width: 90px;
display: inline-block;
}
i hope you are looking like this :- http://tinkerbin.com/MU2CUpre
Actually you have used floating in your child div's and didnt clear your parent div.
So i have cleared your parent div through overflow:hidden; in parent div and cleared this child div .product_details also its working fine......
CSS
.product_info
{
margin-top:10px;
background:#444;
width:850px;
overflow:hidden;
}
.product_details
{
float:left;
width:400px;
margin-left:25px;
font-size:14px;
font-family:"Helvetica";
background:#d71414;
clear:both;
}
Use the clear: both; property.
.product_info {clear: both;}
Hi now define your class .product_into overflow:hidden;
Live demo
as like this
.product_info{
overflow:hidden;
}
=======
or option 2
define one css
Css
.clr{
clear:both;
}
Put the this div in last line closing the .product_info class
<div class="product_info">
<div class="product_image">
</div>
<div class="product_details">
<div class="selection">
<form action="{$path_site}{$indeex_file}" method="post">
Size
{foreach name = feach item = k from = $product_size}
<input type="radio" name="size" value="{$k.product_size}" />{$k.product_size}
{/foreach}
</div>
<div class="selection">
No. of pieces <input type="text" name="quantity">
</div>
<div class="prc">
<span class="WebRupee">Rs.</span> {$product_info->product_cost}.00
</div>
<div class="buy_btn"><input type="submit" value="BUY" /></div>
</form>
</div>
<div class="clr"></div>
</div>
Live demo option two