So this only happens in IE11 and I cannot figure out what is going on. When I click the input element (basically the focus event) the width of the element changes. I cannot figure out the CSS to fix this. Anyone have any ideas?
http://jsfiddle.net/JmRby/2/
TABLE
<table class="fields" id="EntityDetails_Fields" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="Form">Name:</td>
<td>
<input name="Name" id="Name" type="text" value="Memorial Park Group" />
</td>
</tr>
<tr>
<td class="Form">NPI:</td>
<td>
<input name="NPI" class="TextBox" id="NPI" type="text" value="" />
</td>
</tr>
<tr>
<td class="Form">Tax ID:</td>
<td>
<input name="TaxIDNumber" id="TaxIDNumber" type="text" value="21-21212121" />
</td>
</tr>
<tr>
<td class="Form">Medicare:</td>
<td>
<input name="MedicareNumber" id="MedicareNumber" type="text" />
</td>
</tr>
<tr>
<td class="Form">Medicaid:</td>
<td>
<input name="MedicaidNumber" id="MedicaidNumber" type="text" value="1234567" />
</td>
</tr>
<tr>
<td class="Form">In Use:</td>
<td><span id="InUse"><input name="InUse$ctl00" id="InUse_ctl00" type="checkbox" checked="checked" /></span>
</td>
</tr>
</tbody>
CSS
table.fields {
width: 98%;
margin: 4px 1%;
}
table.fields .Form, table.fields .fl {
padding: 2px;
}
table.fields > tbody > tr > td {
padding: 2px 1%;
vertical-align: middle;
}
.Form, .form, .fl {
white-space: nowrap;
width: 10%;
vertical-align: middle;
}
table.fields > tbody > tr > td {
padding: 2px 1%;
vertical-align: middle;
}
table.fields input[type='text'], table.fields input[type='password'], table.fields select, .inpt {
width: 98%;
border: solid 1px #666;
color: #000;
box-sizing: border-box;
}
Yeah mate, here you go: http://jsfiddle.net/3TwKF/
input::-ms-clear {
display:none;
}
This is the culprit (ms-clear)'s documentation.
input::-ms-clear
{
display:none;
}
Changing the text in text box changes the width in IE 11 for following link too. Above solution works for clicking the text. Here is a jsfiddle:
http://jsfiddle.net/3TwKF/20/
Please let me know for any solution
Related
I'm working on a table and I am trying to make it so if you click anywhere on a row, including blank spaces, then the corresponding checkbox will be selected. I tried putting a <label> before/after the <tr> tag, but that did not seem to work at all. Next, I tried making the contents of each <td> as a label, which works fine, except if you click the blank space on the row between the text then nothing happens.
How can I make the entire row selectable?
body {margin: 0; background-color: #F2F2F2;}
.topbar {
z-index: 10;
position: fixed;
top: 0; left: 0;
width: 100vw; height: 56px;
font-size: x-large;
background-color: #5B7042;
border-bottom: 4px solid #3F5328}
#bottombar {
position: fixed;
width: 100vw; height: 60px;
bottom: 0; left: 0;
padding: 4px;
box-sizing: border-box;
border-top: 2px solid darkgray;
background-color: white;}
#list {
padding: 20px;
margin-top: 60px;
margin-bottom: 60px;
min-height: calc(100vh - 120px);
}
table {border-spacing: 0}
th{
padding: 16px;
color: #5B7042;
border-bottom: 2px solid #5B7042}
td {
padding-top: 6px;
padding-bottom: 6px;
border-bottom: 1px solid lightgray;}
td:not(.name) {text-align: center}
tbody tr:hover{
transform: scale(1.01);
background-color: #E3E3E3}
.pic{
display: inline-block;
width: 25px;
clip-path: circle();
margin-right: 10px;}
<link rel='stylesheet' href='https://classcolonies.com/resources/style.css'>
<div class='topbar'></div>
<form id='list'>
<table>
<colgroup>
<col width='1%'>
<col width='6%'>
<col width='3%'>
<col width='3%'>
<col width='3%'>
<col width='3%'>
<col width='3%'>
</colgroup>
<thead>
<tr>
<th><input type='checkbox'></th>
<th>Student</th>
<th>Seen</th>
<th>Lvl</th>
<th>Pay</th>
<th>Money</th>
<th>Streak</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type='checkbox' id='1'></td>
<td class='name'>
<label for="1">
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span>John Doe</span>
</label>
</td>
<td><label for="1">1d ago</label></td>
<td><label for="1">15</label></td>
<td><label for="1">$10/hr</label></td>
<td><label for="1">$1300</label></td>
<td><label for="1">🔥32</label></td>
</tr>
<tr>
<td><input type='checkbox' id='2'></td>
<td class='name'>
<label for="2">
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span>Jane Doe</span>
</label>
</td>
<td><label for="2">3m ago</label></td>
<td><label for="2">21</label></td>
<td><label for="2">$11/hr</label></td>
<td><label for="2">$2560</label></td>
<td><label for="2">🔥15</label></td>
</tr>
</tbody>
</table>
</form>
<div id='bottombar'></div>
It's not possible to use the <label> tag to turn the entire table row into a label. To do this, you need to use JavaScript.
In the code below, a click event is attached to the <tr> elements of a table. If one of them is clicked, the checkbox inside it is toggled. That happens even if you click the spaces between cells.
Also, note that every checkbox has an aria-labelledBy attribute which points to the user name table cell, preserving accessibility. You can apply the same concepts to your table.
document.querySelector('table').addEventListener('click', (e) => {
if (e.target.tagName === 'INPUT') return;
const row = e.target.tagName === 'TR' ? e.target : e.target.parentNode;
const childCheckbox = row.querySelector('input[type="checkbox"]');
childCheckbox.checked = !childCheckbox.checked;
});
td {
padding: 1rem;
border: 1px solid black;
}
<table>
<tr>
<td>
<input type="checkbox" aria-labelledBy="user1">
</td>
<td id="user1">User 1</td>
<td>Info A</td>
<td>Info B</td>
</tr>
<tr>
<td>
<input type="checkbox" aria-labelledBy="user2">
</td>
<td id="user2">User 2</td>
<td>Info A</td>
<td>Info B</td>
</tr>
<table>
The way I was able to get this working was I added a class name to the tr tags and then used some JavaScript. The JavaScript I'm using added the click event listener to the entire row and then from within the click even listener I checked to see if the checkbox was checked. I created a CodeSandbox for this: https://codesandbox.io/s/trusting-architecture-8s13o?file=/src/index.js
I have below snippet where td takes up space unnecessarily. For e.g. if the text contents inside td take 20 pixels width, td should also be 20 pixels wide. Can you help me fix it?
tr {
width: 100%;
}
.td2{
width:auto;
max-width: 180px;
word-wrap: break-word;
background-color:red;
padding-left: 0;
padding-right: 0;
}
span {
background-color: #7e7;
}
<h3 style="width:600px;">The image in below strucure should be displayed immediately after text ends
but the td is eating up space unnecessarily
</h3>
<table>
<tr>
<td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
<td class="td2"><span>Excessive exhaust materialssss</span></td>
<td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
</tr>
<tr>
<td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
<td class="td2"><span>Excessive</span></td>
<td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
</tr>
</table>
By default, table cells will expand in order to fit all their content and the width of the cell will depend on the widest cell in that column.
So trying to shrink-wrap a table-cell doesn't really make much sense.
If you do actually want a table-like layout, but you want a particular column to take up as little space as possible - you could set the cell width: 1px; - that will make the column as wide as the longest word in the cells of that column.
table {
table-layout: fixed;
}
tr {
width: 100%;
}
.td2{
width:auto;
max-width: 180px;
word-wrap: break-word;
background-color:red;
padding-left: 0;
padding-right: 0;
width: 1px; /* <--- */
}
span {
background-color: #7e7;
}
<h3 style="width:600px;">The image in below strucure should be displayed immediately after text ends
but the td is eating up space unnecessarily
</h3>
<table>
<tr>
<td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
<td class="td2"><span>Excessive exhaust materialssss</span></td>
<td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
</tr>
<tr>
<td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
<td class="td2"><span>Excessive</span></td>
<td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
</tr>
</table>
Please replace this code with your old code.
I hop here you find your solution.
tr {
width: 100%;
display:table-row;
}
tr td
{
display:inline-block;
}
.td2{
width:auto;
word-wrap: break-word;
background-color:red;
padding-left: 0;
padding-right: 0;
max-width: 180px;
}
.text{
max-width: 180px;
font-size: 14px;
}
span {
background-color: #7e7;
}
<h3 style="width:600px;">The image in below strucure should be displayed immediately after text ends
but the td is eating up space unnecessarily
</h3>
<table>
<tr>
<td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
<td class="td2"><span class="text">Excessive exhaust materialssss</span></td>
<td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
</tr>
<tr>
<td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
<td class="td2"><span>Excessive</span></td>
<td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
</tr>
</table>
try adding the following css code
tr {
width: 100%;
display:table-row;
}
tr td
{
display:inline-block;
}
here is a link for reference
hope this helps..
I am new to CSS, and I am writting a web page with a form that has submit button, but I am not able to align well the submit button within the form
this is what I get with this: enter image description here
I don know how can I fix this, so any help is very appreciated.
h1 {
text-align: center;
color: blue;
}
body {
background-color: #1AD5EA;
text-align: center;
}
form {
display: inline-block;
text-align: center;
}
td {
/* text-align: center; */
font-weight: bold;
}
input[type=submit] {
padding: 5px 55px;
border: 5 none;
border-radius: 15px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Nuevo cliente</title>
</head>
<body>
<h1>Introduzca los datos del nuevo cliente</h1>
<br/>
<form action="procesar_form.php" method="post">
<table>
<tr>
<td>Nombre</td>
<td>
<input type="text" name="nombre">
</td>
</tr>
<tr>
<td>Dirección</td>
<td>
<input type="text" name="direccion">
</td>
</tr>
<tr>
<td>Tel</td>
<td>
<input type="text" name="tel">
</td>
</tr>
<tr>
<td>
<br>
<br>
<input align="center" type="submit" value="Enviar">
</td>
</tr>
</table>
</form>
</body>
</html>
If you want the button to be aligned to the right, you can set the parent td for the submit button to colspan="2" so that the cell will span both columns in your table, and assign text-align: right;
h1 {
text-align: center;
color: blue;
}
body {
background-color: #1AD5EA;
text-align: center;
}
form {
display: inline-block;
text-align: center;
}
td {
/* text-align: center; */
font-weight: bold;
}
input[type=submit] {
padding:5px 55px;
border:5 none;
border-radius: 15px;
text-align:center;
}
.submit {
text-align: right;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Nuevo cliente</title>
</head>
<body>
<h1>Introduzca los datos del nuevo cliente</h1>
<br/>
<form action="procesar_form.php" method="post">
<table>
<tr>
<td>Nombre</td>
<td><input type="text" name="nombre"></td>
</tr>
<tr>
<td>Dirección</td>
<td><input type="text" name="direccion"></td>
</tr>
<tr>
<td>Tel</td>
<td><input type="text" name="tel"></td>
</tr>
<tr>
<td colspan="2" class="submit">
<input align="center" type="submit" value="Enviar">
</td>
</tr>
</table>
</form>
</body>
</html>
Since you are using a table to handle your formatting, I don't think what you're looking for needs to be a CSS answer.
In your case, if you are trying to align your button to be below the text input boxes, then you need to create a blank td in your last tr to fill the gap and align the next td that contains your button on the right.
<tr>
<td>
</td>
<td>
<br><br>
<input align="center" type="submit" value="Enviar">
</td>
</tr>
For a CSS-only solution, the easiest next step would be to remove all table references and rely on CSS for positioning of all elements.
Assuming that you want the button to go in the center:
You want to add colspan="2"
in the td which holds you submit button
Please try to avoid using table to position elements as that will never give you full control over your positioning and it is somewhat deprecated.
Try this.
CSS:
h1 {
text-align: center;
color: blue;
}
body {
background-color: #1AD5EA;
text-align: center;
width:100%;
}
form {
display: inline-block;
text-align: center;
}
td {
/* text-align: center; */
font-weight: bold;
}
input[type=submit] {
padding:5px 55px;
border:5 none;
border-radius: 15px;
margin:0 auto;
}
HTML;
<form action="procesar_form.php" method="post">
<table>
<tr>
<td>Nombre</td>
<td><input type="text" name="nombre"></td>
</tr>
<tr>
<td>Dirección</td>
<td><input type="text" name="direccion"></td>
</tr>
<tr>
<td>Tel</td>
<td><input type="text" name="tel"></td>
</tr>
<tr>
</table>
<div> <input type="submit" value="Enviar" ></div>
</form>
i would like to set the checkbox inside a table to middle / center
the dirty way i am using is
<td>
<input type="checkbox" style="text-align:center;" ng-model="x.dedbuffer">
</td>
However, i am looking a way that all the checbox inside the table will be centered. So i am come out with a css
.table td input[type="checkbox"] {
text-align: center;
}
but the css is not working as expected. how to style it in css?
Set it on the input's parent, in this case the td.
Updated showing how-to when targeting only specific cells
table td {
text-align: center;
}
table {
width: 300px;
}
table td {
border: 1px solid;
}
table td.centered {
text-align: center;
}
<table>
<tr>
<td class="centered">
<input type="checkbox" style="text-align:center;" ng-model="x.dedbuffer">
</td>
<td>
Not centered
</td>
</tr>
</table>
If you have more content in same cell, add a wrapper
table {
width: 300px;
}
table td {
border: 1px solid;
text-align: center;
}
table td div {
text-align: left;
}
<table>
<tr>
<td>
<input type="checkbox" style="text-align:center;" ng-model="x.dedbuffer">
<div>
Not centered
</div>
</td>
</tr>
</table>
try this
td input[type="checkbox"] {
width:20px;
height:20px;
display:block;
argin:0px auto;
}
function alerrt() {
alert("I am centered! checkbox");
}
table {
width: 300px;
}
table td {
min-width: 150px;
border: 1px solid;
text-align: center;
padding:5px;
}
table td lable{
margin-right:10px;
}
<table>
<tr>
<td class="centered">
<lable> please check </lable> <input type="checkbox" onclick="alerrt()" style="text-align:center;" ng-model="x.dedbuffer">
</td>
</tr>
</table>
Just cannot imagine how to do a single table cell border black. Just like it is in excel - whole table TD borders are, for example, white, and selected cell has black border.
The obvious solution is to change borders of the nearest cells as well, but the table is dynamically generated ant it takes too much effort to calculate current cell's neighbours. Although, the current cell is known from the "click" event, so it would be great to achieve that styling it.
Tried to put the div inside but cannot align it without specifying cell and div sizes exactly in pixels, that is not portable.
Please help!
Sorry, thought it's obvious without code. Actually, I don't have a code that's working, but currently I'm trying that (wrote just a quick sample, sorry):
https://jsfiddle.net/a549b6t1/10/
<table>
<tr>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="text">
</div>
</td>
<td id="selected">
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
</tr> <tr>
<td>
<div>
<input type="text">
</div>
</td>
<td> <div>
<input type="text">
</div>
</td>
<td> <div>
<input type="text">
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
</tr>
</table>
And css (dunno why, this site asks me to paste the code here)
table
{
border-collapse: separate;
border-spacing: 0;
padding: 0;
border: 0px solid #ffffff;
margin: 1em;
}
td
{
font-size: 1rem;
empty-cells: show;
border: 1px solid rgba(230,222,255,1);
padding: 0;
}
td#selected
{
font-size: 1rem;
empty-cells: show;
border: 1px solid rgba(0,0,0,1);
padding: 0;
}
tr:nth-child(odd)
{
padding: 0px;
margin: 0;
background: #efedee;
border: 0px solid transparent;
overflow: visible;
}
tr:nth-child(even)
{
padding: 0px;
margin: 0;
background: #f6f4f5;
border: 0px solid transparent;
overflow: visible;
}
input[type=text]
{
background: rgba(255,255,255,0);
border: 0px solid rgba(255,255,255,1);
margin: 0;
padding: 5px;
height: 1rem;
}
Hope it will help to understand the problem
This is how I want it to llok like
This is how it really looks like now
Solution provided by Shaggy : https://jsfiddle.net/a549b6t1/14/
Thank you!
Adjusting the adjacent cell borders is still going to cause you a problem as, on the cell above, for example, you'll have the left and right borders cutting in to the bottom border slightly as illustrated in this snippet:
div{
border:10px solid;
border-color:#000 #f00 #090 #009;
height:100px;
width:100px;
}
<div></div>
Instead, what you're going to need to do is collapse the borders of your table and then, for the active cells, use an absolutely positioned pseudo element to create the highlighted border, setting all 4 positioning values to the negative pixel value of the size of your border.
Here's a quick example using :hover to illustrate the principle:
*{box-sizing:border-box;}
table{
border-collapse:collapse;
}
td{
border:5px solid #ccc;
background:#eee;
height:100px;
position:relative;
width:100px;
}
td:hover::before{
border:5px solid #000;
bottom:-5px;
content:"";
left:-5px;
position:absolute;
right:-5px;
top:-5px;
z-index:1;
}
div{
position:relative;
z-index:2;
}
div,input{
width:100%;
}
<table>
<tbody>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
</tbody>
</table>
As an alternative, rather than giving each individual cell an initial border, you could use border-spacing instead, like so:
*{box-sizing:border-box;}
table{
background:#ccc;
border-spacing:5px;
}
td{
background:#eee;
height:100px;
position:relative;
width:100px;
}
td:hover::before{
border:5px solid #000;
bottom:-5px;
content:"";
left:-5px;
position:absolute;
right:-5px;
top:-5px;
}
div{
position:relative;
z-index:2;
}
div,input{width:100%;}
<table>
<tbody>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
</tbody>
</table>
You can use jquery to get current cell and then change its class to other class that defines visible borders
jquery :
$("#cell").click(function() {
$(this).toggleClass('not-selected selected');
});
css :
.not-selected{
border: 0px;
}
.selected{
border: 1px solid black;
}