Only in IE does this not work, it displays the cells stacked vertically on top one another? Is there anyway to fix this so that IE7 will display it like a table?
<div class="table" style="width: 1100px; margin-top: 5px;";>
<div class="tr header">
<div class="td" style="width: 2%"></div>
<div class="td" style="width: 2%;"></div>
<div class="td" style="width: 14%;">Name</div>
<div class="td" style="width: 15%;">Company</div>
<div class="td" style="width: 9%;">Type</div>
<div class="td" style="width: 13%;">Phone</div>
<div class="td" style="width: 21%;">Email</div>
<div class="td" style="width: 17%;">City/State</div>
<div class="td" style="width: 8%;">Region</div>
</div>
<div class="tr">
<div class="td"><input type="image" name="Contacts1$rep$ctl01$imgdelbtn" id="Contacts1_rep_ctl01_imgdelbtn" src="images/del.png" style="border-width:0px;" /></div>
<div class="td"><img alt="" src="images/edit.png" style="width: 16px; height: 16px" /></div>
<div class="td">Bob Smith</div>
<div class="td"><a id="Contacts1_rep_ctl01_CompanyLnkBtn" href="javascript:__doPostBack('Contacts1$rep$ctl01$CompanyLnkBtn','')">Ops</a></div>
<div class="td">User</div>
<div class="td">555-555-5555</div>
<div class="td"><a href='mailto:ops#ops.com'>ops#ops.com</a></div>
<div class="td">Ops HI</div>
<div class="td">Midwest</div>
</div>
<div class="tr" style="background-color: #F0F0F0">
<div class="td"><input type="image" name="Contacts1$rep$ctl02$imgdelbtn" id="Contacts1_rep_ctl02_imgdelbtn" src="images/delete.png" style="border-width:0px;" /></div>
<div class="td"><img alt="" src="images/edit.png" style="width: 16px; height: 16px" /></div>
<div class="td">Bob Stevens</div>
<div class="td"><a id="Contacts1_rep_ctl02_CompanyLnkBtn" href="javascript:__doPostBack('Contacts1$rep$ctl02$CompanyLnkBtn','')">ABC CO</a></div>
<div class="td">User</div>
<div class="td">000.000.0000</div>
<div class="td"><a href='mailto:test#test.com'>test#test.com</a></div>
<div class="td">OHHNO CA</div>
<div class="td">Midwest</div>
</div>
</div>
CSS:
div.table
{
border: 1px solid #808080;
display: table;
}
div.tr
{
border: 1px solid #808080;
display: table-row;
}
div.td
{
border: 1px solid #808080;
display: table-cell;
height: 25px;
padding-left: 5px;
padding-right: 5px;
vertical-align: middle ;
}
div.header
{
background-color: #E0E0E0;
font-weight: bold;
}
Rows and columns of logically-associated data belong in a table. DIVs are the wrong tool for the job.
While we've all be told not to use TABLEs, that only applies to using them for layouts. A grid is not a layout, it is a table.
There really is no problem displaying tabular data in a table. That is the point of the table.
Don't feel that you need to display data in div tags.
Why don't you simply use table instead div?
If you look at this table you will see, that IE7 doesn not support "table". I suggest that you try to solve the problem with "float".
IE prior to IE8 doesn't support display: table*
Don't even try. It won't work.
Related
I tried z-index :-1 and position:absolute both didn't worked.
How to fix issue.
Are there any other alternatives for overlapping.
<div *ngIf="allFiltersData.length > 0">
<div style="width: 100%;">
<div id="{{controls.fieldName}}_Text" style="border-style: groove;font-style: 14px;border-radius:3px;height: 100%;word-wrap: break-word;padding-left:10px;padding-top:4px;padding-bottom: 4px;font-size: 14px;color:#333333;vertical-align: middle;" tabindex=0 (click)="showList(controls.fieldDisplayName)" class="accordion">Select {{controls.fieldDisplayName}}</div>
<div name='htmlMultiSelect' style="overflow:auto;border-style: groove;width: 300px;background-color: white; position: absolute;height:auto;max-height: 200px; white-space: nowrap;display: none;" id="{{controls.fieldDisplayName}}">
<div style=" padding-left: 10px;padding-top: 10px;padding-bottom: 20px;">
<input type="checkbox" (click)="selectAllForMultiSelect(controls,$event,tab.name)" style="width: 20px;height: 20px;vertical-align:middle;" id="{{controls.fieldName}}_SelectAll">
<input name="{{controls.fieldName}}" (keypress)="multiSelectSearch($event,tab.name,controls)" id="{{controls.fieldDisplayName}}_{{tab.name}}_Search" style="width: 200px;height: 30px;vertical-align:middle;" type="text">
</div>
<div name="customMultiSelectItems" style="padding-top: 5px;padding-left: 10px;" *ngFor="let val of fetchFilterValues(controls.fieldName,true)">
<input type="checkbox" (click)="setSelectedData(controls.fieldControlType, controls.fieldName, {id:val.value.id,name:val.value.name},controls.dependentFilterName,$event,controls.fieldDisplayName,tab.name)" style="width: 20px;height: 20px;vertical-align:middle;" id="{{val.value.id}}_{{controls.fieldName}}_{{tab.name}}" name={{val.value.name}}_{{controls.fieldName}}_{{tab.name}}>
<label tabindex=0 style="font-size:14px;color: #333333;vertical-align:middle;" for={{val.value.id}}_{{tab.name}}> {{val.value.name}}</label>
</div>
<br>
</div>
</div>
</div>
<div id="OverlapThisSection" style="position:absolute">
<div>
</div>
</div>
I'm using above code.
Div with id OverlapThisSection needs to be overlapped. I had set Div with name htmlMultiSelect to position:absolute
Div with id OverlapThisSection not getting overlapped by another Div above to it.
Update 1:
Currently I'm getting view as below.
Actually I'm using primeng dropdown inside OverlapThisSection div.
<p-dropdown> not getting overlapped by it's top div.
How to fix this issue.
I see this 2 different divs, so you can use position:absolute; and top:20px; to the second div.
#OverlapThisSection {
margin: 10px;
position: absolute;
top: 30px;
background-color: green;
}
<div *ngIf="allFiltersData.length > 0">
<div style="width: 100%; height:50px;">
<div id="{{controls.fieldName}}_Text" style="border-style: groove;font-style: 14px;border-radius:3px;height: 100%;word-wrap: break-word;padding-left:10px;padding-top:4px;padding-bottom: 4px;font-size: 14px;color:#333333;vertical-align: middle;" tabindex=0
(click)="showList(controls.fieldDisplayName)" class="accordion">Select {{controls.fieldDisplayName}}</div>
<div name='htmlMultiSelect' style="overflow:auto;border-style: groove;width: 300px;background-color: white; position: absolute;height:auto;max-height: 200px; white-space: nowrap;display: none;" id="{{controls.fieldDisplayName}}">
<div style=" padding-left: 10px;padding-top: 10px;padding-bottom: 20px;">
<input type="checkbox" (click)="selectAllForMultiSelect(controls,$event,tab.name)" style="width: 20px;height: 20px;vertical-align:middle;" id="{{controls.fieldName}}_SelectAll">
<input name="{{controls.fieldName}}" (keypress)="multiSelectSearch($event,tab.name,controls)" id="{{controls.fieldDisplayName}}_{{tab.name}}_Search" style="width: 200px;height: 30px;vertical-align:middle;" type="text">
</div>
<div name="customMultiSelectItems" style="padding-top: 5px;padding-left: 10px;" *ngFor="let val of fetchFilterValues(controls.fieldName,true)">
<input type="checkbox" (click)="setSelectedData(controls.fieldControlType, controls.fieldName, {id:val.value.id,name:val.value.name},controls.dependentFilterName,$event,controls.fieldDisplayName,tab.name)" style="width: 20px;height: 20px;vertical-align:middle;"
id="{{val.value.id}}_{{controls.fieldName}}_{{tab.name}}" name={{val.value.name}}_{{controls.fieldName}}_{{tab.name}}>
<label tabindex=0 style="font-size:14px;color: #333333;vertical-align:middle;" for={{val.value.id}}_{{tab.name}}> {{val.value.name}}</label>
</div>
<br>
</div>
</div>
</div>
<div id="OverlapThisSection" style="position:absolute">Second div content
<div>
</div>
</div>
Or another simple example, you don't have to use z-index for this:
.first {
height: 100px;
width: 100px;
background-color: red;
}
.second {
margin: 10px;
position: absolute;
top: 10px;
height: 80px;
width: 80px;
background-color: green;
}
<div class="first">
</div>
<div class="second">
</div>
Okay I'm trying to pass parameters like this link here using form tag in HTML
https://pyramisaegypt.seebooking.com/#/booking-engine/room-list?property_id=445586&checkin=2018-11-22&checkout=2018-11-23&noOfAdults=1&noOfChildren=1&noOfRooms=1&promo_code=
but for some reason it always becomes this after i hit submit
https://pyramisaegypt.seebooking.com/?property_id=445586&checkin=2018-11-22&checkout=2018-11-23&noOfAdults=1&noOfChildren=1&noOfRooms=1&promo_code=#/booking-engine/room-list
Notice that whatever is after the hash and behind the question mark gets transferred at the end of the url
The page url is http://pyramisaegypt.com/test-page/
My code is
<form id="reservation-widget-wrap-form-element" style="background-color: #f0f0f0; color: #777; padding: 10px; padding-right: 5px; margin-bottom: 20px;" action="https://pyramisaegypt.seebooking.com/#/booking-engine/room-list" method="get" target="_blank">
<div id="children-wrap" style="width: 20%; display: inline-block">
<div class="caption">Hotels</div>
<p><select id="reservation-widget-hotels" style="width: 100%;height: 32px;padding-left: 5px;margin-bottom: 0px;" name="property_id"><option value="547027">Pyramisa Cairo Suites Hotel</option><option value="568389">Pyramisa Sahl Hasheesh Resort</option><option value="31070">Pyramisa Sharm El Sheikh Resort</option><option value="35520">Pyramisa Isis Luxor Resort</option><option value="445586">Pyramisa Isis Island Aswan Resort</option><option value="450628">Pyramisa Isis Corniche Aswan Resort</option></select></p>
</div>
<div id="check-in-wrap" style="display: inline-block; /* background: white;">
<div class="caption">Check-in date</div>
<p><input id="reservation-widget-checkin" class="hasDatepicker" style="width: 125px;height: 50%;" name="checkin" type="date"></p>
</div>
<div id="check-out-wrap" style="display: inline-block; padding: 5px;">
<div class="caption">Check-out date</div>
<p><input id="reservation-widget-checkout" class="hasDatepicker" style="width: 125px;height: 50%;" name="checkout" type="date"></p>
</div>
<div id="adults-wrap" style="display: inline-block;">
<div class="caption">Adults</div>
<p style="width: 100px;"><select id="reservation-widget-adults" style="display: inline-block; width: 121.4px; height: 50%;" name="noOfAdults"><option value="1">1</option><option value="2">2</option></select></p>
</div>
<div id="children-wrap" style="display: inline-block;padding: 5px;width: 100px;">
<div class="caption">Children</div>
<p style="
width: 100px;
"><select id="reservation-widget-children" style="display: inline-block; width: 121.4px; height: 50%;" name="noOfChildren"><option value="0">0</option><option value="1">1</option><option value="2">2</option></select></p>
</div>
<div class="caption">Number of Rooms</div>
<p style="
width: 100px;
"><select id="reservation-widget-children" style="display: inline-block; width: 121.4px; height: 50%;" name="noOfRooms"><option value="0">0</option><option value="1">1</option><option value="2">2</option></select></p>
</div>
<div id="children-wrap" style="display: inline-block;padding: 5px;width: 100px; margin-left: 1%;">
<div class="caption">Promo Code</div>
<p style="width: 100px;">
<input type="text" style="width: 100%;" name="promo_code">
</p>
</div>
<p style="display: inline-block; width: 20%; margin-bottom: 0px; margin-left: 2%;"><button id="submit-button" type="submit" style="
background: #b01c30;
width: 90%;
border-radius: 6px;
height: 35px;
border: none;
">Online Reservation</button></p>
</form>
i tried every solution out there to change the behavior of the hash in the action of the form but nothing seemed to be working so far.
Perhaps you should look at how a URL is formed. Anything after a # is not sent to the server as it refers to an anchor on the page. Therefore a "GET" form will always strip out those bits.
I just started creating a website for a darts organisation but I'm encountering some problems in my table layout.
I made a table with a table-layout fixed and 978px width.
When I take a look in firefox it somehow for unknown reason always adds another 8px. In safari everything works perfect.
I have no idea what is happening here.
I made the web with the problem available on the link below.
Any suggestions is welcome.
.dt
{
margin: 0px;
border-width: 0px;
border-spacing: 5px;
border-collapse: separate;
table-layout: fixed;
}
.dt th
{
border-bottom: 1px solid #cdcdcd;
color: #5197fc;
font-weight: bold;
font-size: 12px;
}
.dt td
{
border-bottom: 1px dotted #cdcdcd;
overflow: hidden;
white-space: nowrap;
}
<table runat="server" style="width: 978px;" class="dt">
<tr runat="server">
<th runat="server" class="left" style="width: 511px">Naam</th>
<th runat="server" class="left" style="width: 152px">Tel/Gsm</th>
<th runat="server" class="left" style="width: 252px">Email</th>
<th runat="server" class="left" style="width: 38px"></th>
</tr>
<tr runat="server">
<td runat="server" style="width: 511px"></td>
<td runat="server" style="width: 152px"></td>
<td runat="server" style="width: 252px"></td>
<td runat="server" style="width: 38px">
<asp:ImageButton runat="server" ID="EditAccount" ImageUrl="~/Images/pencil.png" CommandName="EditAccount" Width="16px" Height="16px" />
<asp:ImageButton runat="server" ID="DeleteAccount" ImageUrl="~/Images/delete.png" CommandName="DeleteAccount" Width="16px" Height="16px" />
</td>
</tr>
</table>
Check problem here
Type an A in the textbox and press search to see the problem.
I managed to solve my problem in multiple ways.
I have set border collapse to collapse and adjusted the width of all table cell except the width of the last table cell of each row.
for some reason firefox doesn't ever give the actuall width of the cells you asked for. it always adds or retracts some the width which shows weird behavior.
Thats why I removed the entire table and switch to div with "display: table".
This doesn't give me those weird behavior problems.
.dt {
display: table;
}
.tr {
display: table-row;
}
.dt .th {
display: table-cell;
border-bottom: 1px solid #cdcdcd;
color: #5197fc;
font-weight: bold;
}
.dt .td {
border-bottom: 1px dotted #cdcdcd;
overflow: hidden;
white-space: nowrap;
}
<div class="dt" style="width: 960px">
<div class="tr">
<div class="th" style="width: 500px">Naam</div>
<div class="th" style="width: 150px">Tel/Gsm</div>
<div class="th" style="width: 250px">Email</div>
<div class="th" style="width: 60px"> </div>
</div>
<div class="tr">
<div class="td" style="width: 500px"> </div>
<div class="td" style="width: 150px"> </div>
<div class="td" style="width: 250px"> </div>
<div class="td" style="width: 60px"> </div>
</div>
</div>
It's because you have border-spacing: 5px; on the dt elements. Decreasing that value should decrease the amount of "extra pixels".
Adding border-collapse: collapse; should fix your problem
Sample code
<div class="container">
<div class="row" style=" display: flex;">
<div style="width: 200px; height: 50px; background-color: #847"></div>
<div class="container" style=" height: 50px; background-color: #147">
<div class="row" style=" height: 20px; background-color: #997">
<div class="col-xs-3 col-md-6 col-lg-2 " style=" height: 10px; background-color: #927"></div>
<div class="col-xs-3 col-md-6 col-lg-6" style=" height: 10px; background-color: #947"></div>
</div>
</div>
</div>
</div>
I need:
12 indented cells in the child rows(seems it works)
at the same time, have cell width in px for right cell (flex saves me, but i see some error when i reduce browser width until the end, in safari)
http://codepen.io/anon/pen/zKXaoV
Help please, maybe it is not good solution and exists better one or how to fix? Thanks
I'm not using the tag, so I can't use the colspan attribute.
I'd like to create a table with three cells in the first row, one cell in the last row and two cells in the other rows.
Here's my code (minimal):
.row {
display: table-row;
}
.cell {
display: table-cell;
}
HTML:
<div style="display: table;">
<div class="row" style="width: 100%;">
<div class="cell" style="width: 33% !important;">
aaaa
</div>
<div class="cell" style="width: 33% !important;">
bbbbb
</div>
<div class="cell" style="width: 33% !important;">
ccccc
</div>
</div>
<div class="row" style="width: 100%;">
<div class="cell" style="width: 50% !important;">
ddddd
</div>
<div class="cell" style="width: 50% !important;">
eeeee
</div>
</div>
<div class="row" style="width: 100%;">
<div class="cell" style="width: 50% !important;">
fffff
</div>
<div class="cell" style="width: 50% !important;">
ggggg
</div>
</div>
<div class="row" style="width: 100%;">
<div class="cell" style="width: 100% !important;">
last cell
</div>
</div>
</div>
And this is what I get (I can't post images): http://gyazo.com/cc036ed406f6c1a166955522d40e05b0.png
I would build this layout as follows.
For the HTML:
<div class="parent">
<div class="row r3">
<div class="cell">aaaa</div>
<div class="cell">bbbbb</div>
<div class="cell">ccccc</div>
</div>
<div class="row r2">
<div class="cell">ddddd</div>
<div class="cell">eeeee</div>
</div>
<div class="row r2">
<div class="cell">fffff</div>
<div class="cell">ggggg</div>
</div>
<div class="row r1">
<div class="cell">last cell</div>
</div>
</div>
and apply the following CSS:
.row {
display: table;
border: 1px dashed blue;
width: 100%
}
.cell {
display: table-cell;
border: 1px dotted blue;
}
.r3 .cell {
width: 33.333333%;
}
.r2 .cell {
width: 50%;
}
.r1 .cell {
width: 100%;
}
Use display: table for each div.row block element with 100% width.
You don't need to explicitly define a CSS table row, one will be created anonymously as needed.
See reference: http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes
See demo: http://jsfiddle.net/audetwebdesign/72yb5th2/
You're trying to emulate a table with divs. Why? The <table> tag is made for exactly this kind of tabular data.