Element loses sticky position on hover in MS Edge - html

The second table header shows another element when is hovered. The problem is that when is hovered it loses the position sticky in MS Edge, and the element stuck when the table is scrolled. It works fine in Chrome and Firefox.
I discovered that it works if the html does not include a DOCTYPE I do not know if is relevant.
td, th {
padding: 5px 15px;
}
th {
position: sticky;
top: 0;
background: black;
color: white;
}
th:hover .disp{
display: inline;
}
.disp {
display: none;
position: relative;
}
.container {
height: 180px;
overflow: scroll;
}
<body>
<div class="container">
<table id="tableId" height="360">
<thead>
<tr>
<th><input type="checkbox" /></th>
<th>Size<div class="disp">hi</div></th>
<th>File</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>103Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>12Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>14Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>16Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>16Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>16Mb</td>
<td>Text</td>
</tr>
</tbody>
</table>
</div>
</body>

I tested the issue with the MS Edge legacy browser 44.18362.449.0 and I can see the issue there.
I check the code and it looks like position: absolute; in .disp class causing this issue.
I Check the documentation but I did not get any information about this behavior.
If you set position as relative or static than the issue can be solved. You can use it as a workaround for this issue.
Code:
td, th {
padding: 5px 15px;
}
th {
position: sticky;
top: 0;
background: black;
color: white;
}
th:hover .disp{
display: block;
align-items: center;
}
.disp {
display: none;
position: relative;
right: 8px;
top: 8px;
}
.container {
height: 180px;
overflow: scroll;
}
<div class="container">
<table id="tableId" height="360">
<thead>
<tr>
<th><input type="checkbox" /></th>
<th>Size<div class="disp">hi</div></th>
<th>File</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>103Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>12Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>14Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>16Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>16Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>16Mb</td>
<td>Text</td>
</tr>
</tbody>
</table>
</div>
Output:
Edit:
If you set display: inline-table;. It will help to fix the issue and both elements will display in the same line.
Output:

Related

How to make input elements line up?

my form I'm working on the Free Code Camp Product Landing page Project. I'm close to finishing, and one of the last things I want to add is a 2 column form. I've lined up the label elements, but it looks really ugly as the input elements are not lined up and I can't think of a way to position them in the way that I want.
``HTML
<!-- Order Section -->
<div id="order-wrapper">
<section id="order-section">
<h2>Order</h2>
<form id="order-form">
<label class="order-box">Product Name
<input>
</label>
<label class="order-box">Quantity
<input>
</label>
<label class="order-box">First Name
<input>
</label>
<label class="order-box">Last Name
<input>
</label>
<label class="order-box">E-mail
<input>
</label class="order-box">
<label>Phone Number
<input>
</label>
<label class="order-box">Street Address
<input>
</label>
</form>
</section>
</div>
<!-- End Order Section -->
/* Order Section */
#order-wrapper{
background-color: rgba(245, 202, 195, 1);
height: 40rem;
}
#order-form{
width: 100%;
}
#order-form label{
display: inline-block;
width: 25%;
margin-left: 20%;
margin-top: 4%;
}
#order-form input{
width: 60%;
margin-left: 5%;
}
#order-section h2{
font-family:'Homemade Apple', cursive;
font-size:2rem ;
font-weight: 500;
text-align: center;
padding-top: 2%;
margin-top: 0.8%;
}
/* End Order Section */
Not sure if this is the style you were going for, you can use tables.
HTML
<div id="order-wrapper">
<section id="order-section">
<h2>Order</h2>
<form id="order-form">
<table style="list-style: none;">
<tr>
<td><label class="order-box">Product Name</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Quantity</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">FIrst Name</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Last Name</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Email</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Phone Number</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Street Address</label></td>
<td><input></td>
</tr>
</table>
</form>
</section>
</div>
I just moved everything into a table, so by default it should line everything up. You may need to tweak the css style further. If you want
something closer to what you had before you can also try splitting things
up into two tables, so that you can have two columns beside each other instead of one column for everything.
Here is an example with two tables:
<div id="order-wrapper">
<section id="order-section">
<h2>Order</h2>
<form id="order-form">
<table style="list-style: none;">
<tr>
<td><label class="order-box">Product Name</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Quantity</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">FIrst Name</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Last Name</label></td>
<td><input></td>
</tr>
</table>
<table>
<tr>
<td><label class="order-box">Email</label></td>
<td> <input> </td>
</tr>
<tr>
<td><label class="order-box">Phone Number</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Street Address</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Something Else..</label></td>
<td><input></td>
</tr>
</table>
</form>
</section>
</div>
My CSS:
#order-form{
width: 100%;
}
#order-form label{
display: inline-block;
width: 25%;
margin-left: 20%;
margin-top: 4%;
}
#order-form input{
width: 60%;
margin-left: 5%;
}
#order-section h2{
font-family:'Homemade Apple', cursive;
font-size:2rem ;
font-weight: 500;
text-align: center;
padding-top: 2%;
margin-top: 0.8%;
}
table {
position: relative;
display: inline-block;
}

Why is this table row background image disappearing behind the table cell?

This has me stumped. I'm setting a background image on a tr. For some reason it disappears at the 4th column. Even stranger, the column it disappears behind depends on the width of the table.
I'm pretty sure I'm missing something dead obvious.
Edit: this does not happen with background-repeat: repeat;.
Edit2: added a 100% width sample to demonstrate that this has nothing to do with the actual table width.
Edit3: Just checked in a couple of browsers. This only happens in Chrome and Opera. Firefox and Edge are unaffected. So Bug?
Can anybody explain this?
.data-table {
width: 600px;
}
tr.ticket-rows {
background-image: url('https://media.tenor.com/images/6b7cfb462a7f171e6b1aca63fd5c0173/tenor.gif');
background-position: 200px -50px;
background-repeat: no-repeat;
}
tr, td {
background-color: transparent;
height: 100px
}
<table class="data-table">
<tbody>
<tr class="ticket-rows">
<td><input type="checkbox" value="on"></td>
<td>3589</td>
<td>John Smith</td>
<td>New</td>
<td>1</td>
<td>Medium</td>
<td></td>
</tr>
<tr class="ticket-rows">
<td><input type="checkbox" value="on"></td>
<td>3589</td>
<td>John Smith</td>
<td>New</td>
<td>1</td>
<td>Medium</td>
<td></td>
</tr>
</tbody>
</table>
.data-table {
width: 100%;
}
tr.ticket-rows {
background-image: url('https://media.tenor.com/images/6b7cfb462a7f171e6b1aca63fd5c0173/tenor.gif');
background-position: 300px -50px;
background-repeat: no-repeat;
}
tr, td {
background-color: transparent;
height: 100px
}
<table class="data-table">
<tbody>
<tr class="ticket-rows">
<td><input type="checkbox" value="on"></td>
<td>3589</td>
<td>John Smith</td>
<td>New</td>
<td>1</td>
<td>Medium</td>
<td></td>
</tr>
<tr class="ticket-rows">
<td><input type="checkbox" value="on"></td>
<td>3589</td>
<td>John Smith</td>
<td>New</td>
<td>1</td>
<td>Medium</td>
<td></td>
</tr>
</tbody>
</table>
https://codepen.io/franatec/pen/yLeeKzr?editors=1100
If I get it right you want an image behind your tr, you can add background-size: cover to fix this issues but it looks weird!
.data-table {
width: 600px;
}
tr.ticket-rows {
background-image: url('https://media.tenor.com/images/6b7cfb462a7f171e6b1aca63fd5c0173/tenor.gif');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
tr, td {
background-color: transparent;
height: 100px;
}
<table class="data-table">
<tbody>
<tr class="ticket-rows">
<td><input type="checkbox" value="on"></td>
<td>3589</td>
<td>John Smith</td>
<td>New</td>
<td>1</td>
<td>Medium</td>
<td></td>
</tr>
<tr class="ticket-rows">
<td><input type="checkbox" value="on"></td>
<td>3589</td>
<td>John Smith</td>
<td>New</td>
<td>1</td>
<td>Medium</td>
<td></td>
</tr>
</tbody>
</table>
This is a bug in Chromium and has been added to the issue list. https://bugs.chromium.org/p/chromium/issues/detail?id=1093390#c5
#AliKianoor provides a possible, but not perfect workaround. An alternative workaround would be do use a full size image so background-repeat: repeat can be used without side effects. Neither of these are optimal.

html border center of the page

I am trying to make an HTML page which has a table center aligned.
Now I want to have a border to the entire page but on the center.
table {
min-width: 900px;
}
html,
body {
height: 100%;
min-width: 900px;
margin: 0;
padding: 0;
}
body {
background: white;
border-style: double;
}
<table class="table" align="center">
<tr>
<td colspan="2"> <img src="logo.png" class="logo" /> </td>
<td colspan="2" align="right">
<h3>Heading</h3>
</td>
</tr>
<tr>
<td colspan="4">
<hr>
</td>
</tr>
<tr>
<td> <input type="number" class="input"> </td>
<td> <input type="text" class="input"> </td>
<td> <input type="text" class="input"> </td>
<td> <input type="text" class="input"> </td>
</tr>
<tr>
<td>Student ID Number</td>
<td>Last Name</td>
<td>First Name</td>
<td>Middle Name</td>
</tr>
</table>
I am looking for something like this. http://ibb.co/gyqTY6
My content is displayed in the entire page and I like to have a border to the center of the entire page.
The above styling gives me border on the entire page but I want to have a border on the center of the entire page.
It is not quite clear what you want, but perhaps applying a border only to the table is what you meant.
In that case, style the table accordingly.
Edit: especially, avoid applying border to the body, this won't get you the desired result.
Minimal suggestion:
table {
min-width: 900px;
border: 1px solid #000;
}
html,
body {
height: 100%;
min-width: 900px;
margin: 0;
padding: 0;
}
<table class="table" align="center">
<tr>
<td colspan="2"> <img src="logo.png" class="logo" /> </td>
<td colspan="2" align="right">
<h3>Heading</h3>
</td>
</tr>
<tr>
<td colspan="4">
<hr>
</td>
</tr>
<tr>
<td> <input type="number" class="input"> </td>
<td> <input type="text" class="input"> </td>
<td> <input type="text" class="input"> </td>
<td> <input type="text" class="input"> </td>
</tr>
<tr>
<td>Student ID Number</td>
<td>Last Name</td>
<td>First Name</td>
<td>Middle Name</td>
</tr>
</table>
Tables should not be used for layout. They cause the rendering of the page to be slowed down and are not semantically correct. They should only be used to render tabular data.
Also, don't use h1, h2, etc. because of the way they make the text look, use them because they are the logical start of a new section of a particular importance. Any text can be styled to look like any other text.
So, the above two points really are talking about "semantics". The HTML tags you use should describe the data they convey, not the look of the data on the page. This allows for the data to be consumed anywhere, by any device and that device should understand what the data is. CSS is meant to make that data look how you'd like it to look. Don't confuse the two.
Now, you can "style" content to be displayed as a table using the CSS display property, which allows you to avoid using the <table> element and the related elements as well. But, your layout looks like simple columns, so you could approach this in a number of ways, but here's one:
html, body {
margin:0;
padding:0;
}
body {
background: white;
border: double;
}
.header h1 {
font-size:1.3em;
}
.wrapper {
border: 1px double black;
margin:25% 5px; /* Adding the same margin to top and bottom creates vertical alignment */
padding:10px;
}
.column {
display:inline-block;
}
<!-- By placing everything in a wrapper element, you can move it and style it easily -->
<div class="wrapper">
<div class="header">
<img src="logo.png" class="logo">
<h1>Heading</h1>
</div>
<div>
<hr>
</div>
<div class="column">
<input type="number" class="input"><br>
<span>Student ID Number</span>
</div>
<div class="column">
<input type="text" class="input"><br>
<span>Last Name</span>
</div>
<div class="column">
<input type="text" class="input"><br>
<span>First Name</span>
</div>
<div class="column">
<input type="text" class="input"><br>
<span>Middle Name</span>
</div>
</div>
Are you looking for something like this
.container{
border: 1px solid;
margin: 3%;
padding: 3%;
margin-right: 18%;
margin-left: 18%;
}
table{
margin:0 auto;
}
table th{
min-width:20%;
}
body{
background:red;
}
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table" border="1">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>

Border tr that include th and table section

I am writing my final project at PHP and JS. I need help with the html and CSS styling.
This is my sign form, I want help in 2 things.
I want to do that the whole row (tr) that include th while be with border, now I know to do it only that every th have border.
I want to divide the table to sections and to style every section in other CSS code.
How can I do it?
This my HTML code:
<body>
<form>
<table id="t">
<tr>
<th>Basic info</th>
<th>Contact info</th>
<th>About me</th>
</tr>
<tr>
<td><input placeholder="First name"></td>
<td><input placeholder="Phone"></td>
<td rowspan="3"><textarea rows="8" placeholder="About me"></textarea></td>
</tr>
<tr>
<td><input placeholder="Last name"></td>
<td><input placeholder="Area"></td>
</tr>
<tr>
<td><input placeholder="Degree"></td>
<td><input placeholder="Email"></td>
</tr>
<tr><th colspan="2">Social networks</th></tr>
<tr>
<td><input row placeholder="Facebook link"></td>
<td><input row placeholder="Website link"></td>
</tr>
<tr>
<td><input row placeholder="Twitter link"></td>
<td><input row placeholder="Medium link"></td>
</tr>
<tr>
<td><input row placeholder="Instagram link"></td>
<td><input row placeholder="Google link"></td>
</tr>
<tr><td colspan="2"><button type="submit">שלח</button></td></tr>
</table>
</form>
</body>
This is my CSS:
table{
margin: 16px;
text-align: center;
}
td{
padding: 10px;
justify-content: space-between;
}
#t textarea{
width: 100%;
height: 100%;
}
tr>th{
margin-top: 10px;
border: 1px solid red;
}
For (1), tr's can only have borders when the table is border-collapse:collapse.
For (2), you can put rows in <thead>, <tbody>, <tfoot> sections and style those separately.
Maybe you can have multiple <tbody> sections and use nth-of-type to select them but I don't know.
Differences in the below
addition of thead, tbody, tfoot in the html
style tbody as an example
border-collapse:collapse on the table style
tr style on the first tr
table {
margin: 16px;
text-align: center;
border-collapse: collapse;
}
td {
padding: 10px;
justify-content: space-between;
}
#t textarea {
width: 100%;
height: 100%;
}
tbody {
font-style: italic;
}
<form>
<table id="t">
<thead>
<tr style="border:solid 1px">
<th>Basic info</th>
<th>Contact info</th>
<th>About me</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input placeholder="First name">
</td>
<td>
<input placeholder="Phone">
</td>
<td rowspan="3">
<textarea rows="8" placeholder="About me"></textarea>
</td>
</tr>
<tr>
<td>
<input placeholder="Last name">
</td>
<td>
<input placeholder="Area">
</td>
</tr>
<tr>
<td>
<input placeholder="Degree">
</td>
<td>
<input placeholder="Email">
</td>
</tr>
<tr>
<th colspan="2">Social networks</th>
</tr>
<tr>
<td>
<input row placeholder="Facebook link">
</td>
<td>
<input row placeholder="Website link">
</td>
</tr>
<tr>
<td>
<input row placeholder="Twitter link">
</td>
<td>
<input row placeholder="Medium link">
</td>
</tr>
<tr>
<td>
<input row placeholder="Instagram link">
</td>
<td>
<input row placeholder="Google link">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<button type="submit">שלח</button>
</td>
</tr>
</tfoot>
</table>
</form>

CSS height effect on cross-browser?

Running on Chrome displays the expected result. Running same code on Mozilla-Firefox displays unexpected result. So, what will be the solution to get the Chrome result in Mozilla-Firefox?
textarea{
height : 100%;
position:absolute;
}
<table>
<tr>
<td><input type="text"></td>
<td rowspan=4><textarea></textarea></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td rowspan=4><textarea></textarea></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
</table>
Don't forget! Height of an element is relative to its parent.
You want to set the height to an element which has no information how high is height. You have to give the parent element a height. Look at this:
tr, td, textarea {
height: 100%;
}
<table>
<tr>
<td><input type="text"></td>
<td rowspan=4><textarea></textarea></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
</table>
You can set the textarea to position: absolute. Tested and works on Firefox Mac.
.textarea-td {
position: relative;
}
textarea{
height : 100%;
position: absolute;
top: 0;
box-sizing: border-box
/* so it really takes the same height as the inputs */
}
<table>
<tr>
<td><input type="text"></td>
<td rowspan=4 class="textarea-td"><textarea></textarea></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
</table>
You can Try This type of Manner styling in your table then its resolves easily ,So Please mention height and widths for your table and for its inner elements always .
textarea{ height : 100%; }
td{padding-right:10px;}
<table width="100%">
<tr height="25">
<td><input type="text" style="width:100%;"></td>
<td rowspan=4><textarea style="width:100%;"></textarea></td>
</tr>
<tr height="25">
<td><input type="text" style="width:100%;"></td>
</tr>
<tr height="25">
<td><input type="text" style="width:100%;"></td>
</tr>
<tr height="25">
<td><input type="text" style="width:100%;"></td>
</tr>
</table>
I know this is a hack, but you can use position absolute to the textarea, so it can set its height to 100%.
.textarea-wrapper {
position: relative;
}
textarea{
height : 100%;
/* firefox fix */
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
<table>
<tr>
<td><input type="text"></td>
<td class="textarea-wrapper" rowspan=4><textarea></textarea></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
</table>