Develop Reference

CSS messed up in mobile view

I have a simple nested table. Three columns - Name, Email,Contact. In the contact column, I have have two contact separated by a . This table gets stacked in the form of one row below the another in the mobile view.
Problem : Since the two contact numbers are separated by a break, in the mobile view it adds a huge space between the column headings. I just want to pick up "contact" heading in mobile(and not touch the numbers) and move it a little to reduce the space in between. Right now, whatever css I apply it moves the contact numbers along with it. Please suggest how can I do this ?
$(function() {
$(".fold-table tr.view").on("click", function() {
$(this).toggleClass("open").next(".fold").toggleClass("open");
});
});
$('.view, table.child').each(function() {
$('.view:even, table.child:even').addClass('odd');
$('.view:odd, table.child:odd').addClass('even');
});
.tableComponent table.parent {
font-family: 'Poppins';
font-size: 12px;
width: 60%;
border: none;
border-collapse: separate;
border-spacing: 0 2px;
}
.tableComponent table thead th {
border-bottom: 0;
border-top: 0;
}
.tableComponent table td,
th {
border-top: 0px;
}
table.fold-table>tbody>tr.view td,
table.fold-table>tbody>tr.view th {
cursor: pointer;
}
table.fold-table>tbody>tr.fold {
display: none;
}
table.fold-table>tbody>tr.fold.open {
display: table-row;
}
.odd {
background-color: #F2F2F2;
}
.even {
background-color: #F8F8F8
}
table.child {
font-family: 'Poppins';
font-size: 12px;
width: 100%;
margin-top: -0.1rem;
border-top: 2px solid #DBDBDB;
}
table.fold-table>tbody>tr.fold.open>td {
padding: 0;
}
#media all and (max-width: 500px) {
.tableComponent table.parent {
width: 90%;
margin-left: 5vw
}
.tableComponent thead {
display: none;
}
.tableComponent tr {
display: flex;
flex-direction: column;
margin-bottom: 5px;
}
.tableComponent td::before {
content: attr(col);
font-weight: bold;
padding-right: 20px;
width: 40vw;
display: inline-block;
}
table.child {
margin-top: -0.5rem;
}
.contactInfo {
display: inline-block;
margin-left: -0.2rem;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tableComponent">
<table class="table fold-table parent" id="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Contact</th>
</tr>
</thead>
<tbody>
<tr class="view">
<td col="Name">John</td>
<td col="Email">j#g.com</td>
<td col="Contact">
<span class="contactInfo">
35373726<br>
35373726
</span>
</td>
</tr>
<tr class="fold">
<td colspan="3">
<div class="fold-content">
<table class="child">
<tbody>
<tr>
<td col="Name">SUB Data 1</td>
<td col="Email">SUB Data 1</td>
<td col="Contact">SUB Data 1
</td>
</tr>
<tr>
<td col="Name">SUB Data 1</td>
<td col="Email">SUB Data 1</td>
<td col="Contact">SUB Data 1
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>

In css, the inline elements doesn't take margins, so vertical alignment can be done like so
#media all and (max-width: 500px){
.tableComponent td::before {
vertical-align: top;
}
}

If you change the col="Contact" td into a flexbox, it will behave the way you want it at that screen size.
[col="Contact"] {
display: flex;
}

How to make image popup when mouse hover over lists text in bootstrap

I want to show different images on different list's <td> element, whenever mouse is hovered on it. I am using Bootstrap to develop my page. I tried searching here, but no definite answers was found.
Code is here. Any help please:
<section>
<div class="container">
<div class="head-list" id="list">
<h3>OUR PRESTIGIOUS GOLD MEDALISTS</h3>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 black text-center">
<table class="table table-responsive">
<thead class="table" style="background-color:gold; color: black">
<tr>
<th width="70">SR.#</th>
<th width="255">STUDENT'S NAME</th>
<th width="180">POSITION</th>
<th width="120">EXAM</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Text 1 on which I want an img to hover when mouse is pointed here</td>
<td>simple txt 1a</td>
<td>1990</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Text 2 on which I want an img to hover when mouse is pointed here</td>
<td>Simple txt 2a</td>
<td>1995</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Text 3 on which I want an img to hover when mouse is pointed here</td>
<td>Simple txt 3a</td>
<td>1998</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
</section>
<div class="clearfix"> </div>
And relevant css for the above code is:
<style>
.head-list h3{
font-size: 3.2em;
color: #2A72D3;
font-family: 'Lato', sans-serif;
text-align: center;
text-transform: capitalize;
margin-bottom:30px;
letter-spacing:2.2px;
}
tbody {color: white;
font-weight: bold;
font-size: 1.1em;
font-family: 'Montserrat Alternates', sans-serif;
}
table, th, td { /*this is the relavant css styling for the above table in
question*/
text-align: center;
padding: 2px;
border: 1px solid gold;
}
table#t01 { /*This styling is for another table i created but on the same
page*/
text-align: left;
padding: 1px;
background-color: #3B3939;
border: 1px solid black;
}
</style>

I found the solution too. added some more styles in css and then displayed it in lists.
So in css i added these:
.hover_img a {
position: relative;
color: antiquewhite;
}
.hover_img a span {
position:absolute;
left: 80%;
top: 10px;
display:none; z-index: 99;
}
.hover_img a:hover span {
display: block;
width: 200px;
}
And in html portion i added this in every <td> element of my ordered lists:
<td> <div class="hover_img">
<a>My text<span><img src="images/f61.jpg" alt="image" height="100">
</span></a>
</div> </td>
So whenever cursor hover over "My text", an image is displayed. I adjusted image's position according to my layout. It is working fine in responsive view also.
I would appreciate it if you could suggest any optimization in regard of this code, page loading, server response, etc.

Height of textarea is not setting correctly

I tried to set the width(178px) and height(178px) of my table to the width and height of the text area on click of a button.Width(178px) setting works fine, but height is set only for 17px(I guess some kind of slicing of 8 from 178px is happening--need help in this part).I tried element.style.height, element.offsetHeight, element.clientHeight, element.getBoundingClientRect().height
Everything results the same.I referred many posts in SO regarding this...many developers are getting problem in setting the height but width wrks fine fr them.What could be the reason?Thanks.
<p id="demo"></p>
<button onclick="chan()">change</button>
<script type="text/javascript">
function chan() {
var w=document.getElementById('num').getBoundingClientRect().width;
var h=document.getElementById('num').getBoundingClientRect().height;
document.getElementById("demo").innerHTML=w+" "+h;
document.getElementById('cache').style.width=w+"px";
document.getElementById('cache').style.height=h+"px";
}
</script>

change table style display: inline; to display: table; to get its height perfectly.
table {
display: table;
width: 178px;
height: 178px;
}
display: inline : Displays an element as an inline element
display:table : Let the element behave like a table element
ul {
list-style-type: none;
}
li {
display: inline;
/*not working for list2_tab_ta*/
}
input {
border: 1px solid black;
width: 30px;
height: 30px;
padding: 5px;
background-color: grey;
}
#clr {
margin-left: 190px;
margin-bottom: 13px;
padding: 5px;
}
table {
display: table;
width: 178px;
height: 178px;
}
td {
border: 1px solid black;
background-color: powderblue;
width: 30px;
height: 30px;
padding: 5px;
}
textarea {
display: inline;
/*readonly: true;*/
}
<ul>
<li>
<input type="number" id="operator1">
</li>
<li>
<input type="text" id="operand1">
</li>
<li>
<input type="number" id="operator2">
</li>
<li>=</li>
<li>
<input type="number" id="result">
</li>
</ul>
<button id="clr">Clear</button>
<ul>
<li>
<table id="num">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>*</td>
</tr>
<tr>
<td>0</td>
<td>/</td>
</tr>
</table>
</li>
<li>
<textarea id="cache"></textarea>
</li>
</ul>
<p id="demo"></p>
<button onclick="chan()">change</button>
<script type="text/javascript">
function chan() {
var w=document.getElementById('num').getBoundingClientRect().width;
var h=document.getElementById('num').getBoundingClientRect().height;
document.getElementById("demo").innerHTML=w+" "+h;
document.getElementById('cache').style.width=w+"px";
document.getElementById('cache').style.height=h+"px";
}
</script>
Hope this helps!

unwanted lines in table when collapsing tr in IE

I have a table with expand/collapse javascript acting on the class value assigned to tr.
See below html code.
This all works fine in Chrome, but in IE when I expand and then collapse the www row, I get additional unwanted lines in the xxx and zzz rows. The lines look like they are borders (see css td border-style definition). It looks as if the borders of the collapsed and hidden rows are still shown (non-button rows are a little less high than the button rows, apparently because of standard button padding and border widths).
Why is this, and how can I prevent this from occurring?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<style type="text/css">
body, p {
background-color: white;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
color: black;
margin-bottom: 4.5pt;
margin-top: 0pt;
}
table {
border: solid black 1pt;
border-collapse: collapse;
padding: 0;
border-spacing: 0;
}
th {
background: rgb(255, 255, 153);
border-style: solid;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
vertical-align: top;
}
td {
border-style: dotted dotted none none;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-style: normal;
font-family: Verdana;
font-size: 10pt;
vertical-align: top;
margin-bottom: 4.5pt;
margin-top: 0pt;
}
input.buttonSeq {
color: blue;
background: ffffcc;
border: none;
margin-left:0pt;
margin-top: 0px;
margin-bottom: 0px;
font-size: 100%;
}
</style>
<script type="text/javascript" language="javascript">
//expand and collapse tr functions based on class
function ToggleTRbyClass(clss){
var trs = document.getElementsByTagName('tr');
for (var i=0; i!=trs.length; i++) {
if (trs[i].className == clss) {
if ( trs[i].style.display == "none")
{
trs[i].style.display = "table-row"
}
else {
trs[i].style.display = "none"
}
}
}
return true;
}
</script>
</head>
<body>
<br><br>
<table style="table-layout:fixed word-break:break-all">
<col width="120">
<thead>
<tr>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('www'); return true;" onMouseOver="this.style.cursor='hand'" value="www"></div>
</td>
</tr>
<tr style="display:none" class="www">
<td>element1</td>
</tr>
<tr style="display:none" class="www">
<td>element2</td>
</tr>
<tr style="display:none" class="www">
<td>element3</td>
</tr>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('xxx'); return true;" onMouseOver="this.style.cursor='hand'" value="xxx"></div>
</td>
</tr>
<tr style="display:none" class="xxx">
<td>element4</td>
</tr>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('zzz'); return true;" onMouseOver="this.style.cursor='hand'" value="zzz"></div>
</td>
</tr>
<tr style="display:none" class="zzz">
<td>element5</td>
</tr>
</tbody>
</table><br></body>
</html>

You need to specify a doctype as the first line in your markup. Without a doctype, IE will render in quirks mode, which is essentially the IE 5.5 rendering engine. Quirks mode greatly effects the box model and Javascript support, among other things.
Example:
<!doctype html>
Specifying the doctype will make your example work as it does in Firefox.
Edit:
The grey background comes from the following rule, which is technically wrong (you need to specify the # symbol when using hex colors:
input.buttonSeq {
color: blue;
background: ffffcc; /* change this to #ffffcc */
border: none;
margin-left:0pt;
margin-top: 0px;
margin-bottom: 0px;
font-size: 100%;
}

Rather than setting the display to "table-row", set it to "" so that the default behaviour comes back. Older versions of IE don't support table-row and need block instead.
If your CSS overrides the default (ie. if you used it to hide a class of rows from the start), try:
try {tr.style.display = "table-row";}
catch(e) {tr.style.display = "block";}
And add a DOCTYPE, like wsanville said.

How to make html look disabled?

I read in some forums that to make an html table look disabled is to add a layer of div. My problem is I don't know how to do it.
I have 3 questions:
How will I set the div height that it will automatically adjust to the table height whenever the table increases its height when a new row is added.
How will I make the div cover the table. I don't know how to layer html elements.
How am I going to code the javascript that will make my table look disabled when I click 'Disable' button and enable it again when I click 'Enable' button.
tabledisabletest.html
<html>
<head>
<script type="text/javascript">
</script>
<style type="text/css">
table#tblTest {
width: 100%;
margin-top: 10px;
font-family: verdana,arial,sans-serif;
font-size:12px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table#tblTest tr.highlight td {
background-color: #8888ff;
}
table#tblTest tr.normal {
background-color: #ffffff;
}
table#tblTest th {
white-space: nowrap;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table#tblTest td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
#disabler {
width: 100%;
height: 200px;
background-color: #bbb;
opacity:0.6;
}
</style>
</head>
<body>
<div id="disabler"></div>
<table id="tblTest">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td>UK </td>
</tr>
<tr>
<td>Henrik</td>
<td>Denmark</td>
</tr>
<tr>
<td>Lionel</td>
<td>Italy</td>
</tr>
<tr>
<td>Ricardo</td>
<td>Brazil</td>
</tr>
<tr>
<td>Cristiano</td>
<td>Portugal</td>
</tr>
</tbody>
</table>
<input type="button" onclick="disable = true;" value="Disable" />
<input type="button" onclick="disable = false;" value="Enable" />
</body>
</html>
I have the div disabler to do the disabling but I can't make it cover the table.
Please help me with this. I'm so new to this thing.

If you want the disabler element to overlay your table, add a negative bottom-margin to it. Also, set opacity to a value lower than 1, to not completely cover (hide) the table behind it.
#disabler {
opacity: 0.5;
margin-bottom: -200px;
}
Since you've mentioned that you're doing this for educative purposes, I won't give the full solution. See this fiddle to get started.
If you want to make a text look "unselectable", use the following CSS:
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

You will have to place the div disabler on top of the table.
You can do so by absolutely positioning the div. I added a new div, tableContainer enveloping the disabler div and the table, and absolutely positioning the div.
<div id="tableContainer"> <!-- New Div-->
<div id="disabler"></div>
<table>....<table>
</div>
Add position: absolute; to the #disabler
And most importantly write the javascript to display and hide the div:
function disableTable()
{
document.getElementById("disabler").style.display = "block";
}
function enableTable()
{
document.getElementById("disabler").style.display = "none";
}
Live Example: http://jsbin.com/icuwug