CSS troubleshooting for Internet Explorer 8 - javascript

I am making a website that unfortunately needs to be compatible with IE 8. I have successfully implemented some changes, as I understand that at least HTML5 is not working.
But I am struggling with finding the right thing to do in this case.
This JSFiddle gives a good simplified representation of my problem code. The wanted output works in my Chrome version. http://jsfiddle.net/kjetilnordin/g6FGv/
There is a single row, and three cells inside a table. The three cells split the space equally in between themselves, and do not take their content size into consideration. Now, I have toggleboxes that can turn the cells invisible or visible back again. I want the remaining cells to take up all the space of their parent, split in 1, 2, or 3 visible cells.
In IE 8 the cells remain at their 1/3 size, and only move to the left, when a cell further left is turned invisible.
I expected that one of the CSS properties was not supported, but I've checked them all, and they should work.
So what is it that is not playing along here? A solution would be nice, but a nudge in the right direction would be just as appreciated.
Code:
<table>
<tr>
<td class="foo">
foo
</td>
<td class="bar">
bar
</td>
<td class="foobar">
foobar
</td>
</tr>
</table>
<input type="checkbox" class="togglebox" value="foo">toggle off foo</input></br>
<input type="checkbox" class="togglebox" value="bar">toggle off bar</input></br>
<input type="checkbox" class="togglebox" value="foobar">toggle off foobar</input></br>
Javascript:
$('input:checkbox').live('change', function(){
if($(this).is(':checked')){
$("."+this.value).toggle(false);
} else {
$("."+this.value).toggle(true);
}
});
css:
table{
border: 1px solid black;
border-collapse: collapse;
width: 200px;
min-width: 200px;
max-width: 200px;
table-layout: fixed;
}
td{
border: 1px solid black;
border-collapse: collapse;
width: 100%;
text-align: center;
}

Actually, as crazy as it sounds, IE8 is technically right. Chrome is non-standard here in favour of keeping to expected behaviour.
table-layout:fixed means to fix the table layout regardless of content, including changes to said content. This allows for faster rendering of tables.
Unfortunately this means there's no easy way to ensure equal-width columns while having the number of columns be variable by the toggles.
You will need to remove table-layout:fixed and have JavaScript calculate the appropriate width percentage on load, and whenever the number of columns changes.

Related

Caret position is way off in contenteditable div

Chrome (and maybe other browsers) position the caret in a strange way within a contenteditable div.
Please consider the following snippet:
<div contenteditable="true" style="width: 100%; height: 200px; border: 1px solid black; overflow: auto;">
<p>
<span contenteditable="false" style="width: 75%; height: 80px; display: inline-block; border: 1px solid red;"> </span>.
</p>
</div>
Also available in this JSFiddle.
If you click on the right-side of the period next to the red span and press backspace to delete the period, the caret suddenly shifts to the extreme right of the paragraph. I would expect the caret to be positioned where the period used to be, next to the red span.
Why is it not positioned the way I expect, and is there a way to get the behavior I'm looking for?
This strange behavior is happening because of the p tag, the cause is possibly some conflict between widths, you can edit the css of the tag, instead of using display:block(default), use display:inline.
I created this fiddle: JsFiddle, with display:inline, was the closest I could get from the display:block.
I tried the align attribute but I did not succeed.
I'm fairly confident that it's the span causing it, because the moment you remove it or even display: none it, the problem goes away. I got really curious about this myself and did some searching, this person seems to have the same problem as you.
Why Is My Contenteditable Cursor Jumping to the End in Chrome?
Non-breaking spaces are just what they sound like — spaces where a line break will not occur. You should not use them to add space between words, sentences, or elements. Especially not elements.
Remove & nbsp; (with space or will actually make space :D) and everything's good.

HTML How to fit some cells to content others to rest of available space in row?

I have a table that I wish to have the following attributes:
The table has a set width imposed by a parent element, 500px for the sake of argument.
No line-breaking in cells, only one line per cell.
Some cells should align their width with the width of their content.
The rest should consume the rest of the available space in the row.
I have managed to achieve this without criteria #2 (no line-breaking). When I try to apply no line-breaking the table just becomes insanely wide overflowing the parent container.
Here is my fiddle https://jsfiddle.net/marpal/705p9pqj/.
<div>
<table>
<tr>
<td class="small">OS</td>
<td class="small">User</td>
<td class="large">Long Text 1</td>
<td class="small">Date</td>
<td class="large">Long Text 2</td>
</tr>
<tr>
<td class="small">Ubuntu</td>
<td class="small">Admin</td>
<td class="large">This is a test text that should stretch until it is finally truncated, at least I think that that is the correct use of the word truncated. Not to mention the spelling, how the hell do you spell truncated? It feels right though.</td>
<td class="small">2016-02-14</td>
<td>This is the next long text that should be truncated into one line and the overflow hidden from the world.</td>
</tr>
</table>
</div>
div {
width: 500px;
}
table {
width: 100%;
}
td {
border: 1px solid grey;
overflow: hidden;
}
td.small {
width: 1%;
}
td.large{
//white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Is it possible to achieve the last criteria (no line-breaking), while keeping the size limit imposed by the parent DIVs width, purely through CSS or will I need to calculate widths dynamically with JavaScript? I would like to avoid this since I think it's ugly and not always super dependable, especially since this table will be updated dynamically during run-time.
Also, how can I get the date to fill a whole cell without line breaks?

I want to split a long HTML table row into multiple rows according to the page width

I am using AngularJS to generate a row of Material buttons in an HTML table. The selected button is highlighted.
<tr>
<td ng-click="pbmain.selectWC(WC.WCName)" ng-repeat="WC in pbmain.WCList">
md-button(ng-class="WC.WCName == pbmain.selectedWCName ? 'md-raised md-primary' : 'md-raised'") {{WC.WCName}}
</td>
</tr>
The number of buttons and text on the buttons can be quite long and the row is often 2-3 times the width of the browser window. For the moment, I scroll across but I am looking for a more user-friendly solution.
I would like to be able to split the row automatically, according to the page width - something like the example below.
You can achieve this by applying proper CSS to table and button elements. No need to split a row into multiple rows.
Example:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span>
</td>
</tr>
CSS
table {
table-layout: fixed;
width: 100%
}
span {
border: 1px solid black;
margin: 10px;
width: 100px;
display: inline-block;
}
Have a look at this fiddle.
Well, I was searching by splitting rows into multiple rows and I got here.
It seems that your problem could be better solver by using display: inline-block; for every button.
However, if you really need a table for other purpose check at this next approach.
It would redrawn your linear tabular long table into a multilined table by only using css.
Than you can play around with your screen size.
I have no idea how to accomplish this easily within a table. Maybe you could make some pre-work on your array to make it two-dimensional and then ng-repeat tr and td tags as well.
My solution would be a clean grid system with Bootstrap.
With this you can achieve a fully responsive screen. If you do not need to stick with a table system, then you should consider this.

Alternate to table to display data?

I am trying to display a table in HTML but it seems the table is unable to meet the specs. I would like to data to be in the same place on the screen otherwise it will cause all kinds of problems with the users as they mis-read the data. So I need fixed width columns. I also would like the column headers to remian fixed if the data exceeds the height of the windows because some users do use them.
I do not want to install any 3rd party controls if possible. The owner will not buy anything anyway. I don't mind something that downloads with the page.
I was thinking of trying to make a scrollable div with textboxes or labels but thought I should check to see if someone has already run into this issue and came up with a solution.
I asked here: How to make a scrolling table with dynamic data
but no one has a clue as to whats wrong.
Then I asked here: How to get a table to fit its parent container?
And the key here seems the column widths. But without the widths using the table seems pointless.
Asking this: Why don't my column headings line up?
Seems also to indicate that a table will never work.
Setting this:
display: table-row-group
Makes the column headings line up, but then the table can not scroll.
display: block
Makes the table scroll but the column headings are wrong.
Here's an example that works on its own. http://jsfiddle.net/kjzcv9g2/
<style type="text/css" media="screen">
table, th, td {border: solid;}
thead {
display: block;
color: #f00;
background: #eee;
height: 35px;
overflow-y: scroll;
}
tbody {
display: block;
height: 100px;
overflow-y: scroll;
}
th, td {
width: 10em;
font-weight: normal;
}
</style>
<table>
<thead>
<tr>
<th>foo</th>
<th>bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</tbody>
</table>
But getting this to work seems impossible.
Any suggestions on whether to use labels or textboxes to create my own table?
JSFIDDLE
If I understand the question correctly the above should work. Add a min-width to the overall table and you'll have fixed width columns below the min width, and the columns will fill the container about the min width.

Is there a workaround for the IE11 table cell padding bug? [duplicate]

It seems I've stumbled on an annoying Internet Explorer 11 layout bug. (Ugh, I thought these days were behind us.)
In the following example, the padding on the right table cell disappears when you hover over it in IE11:
http://jsfiddle.net/xx4Z4/
This seems to arise because of an incredibly specific CSS scenario:
The element uses display: table-cell
The element uses percentage-based padding, e.g., padding: 0 5%
A subelement adds text-decoration: underline when the parent element is hovered over
If you change any of those three things, the problem goes away.
This seems to be an IE11 bug, but I'm wondering: Can anyone think of a workaround for this problem without abandoning display: table-cell and percentage-based padding?
Again a IE11 problem that seems so unusual. I see that the percentage padding is not even calculated and is not applied in the layout. However the text is still padded according to the padding percentage. So i would assume the text is positioned with the padding but after the positioning the percentage padding is "disabled".
I can't tell you why this happens. But if you really want to fix these you might want to use these quick fixes.
Use margin
Because the percentage bug only occurs on the padding of a table-cell, you can actually use a margin on the span itself.
span
{
margin-left: 10%;
}
and ofcourse reset the padding of the sides:
div.table-cell {
display: table-cell;
padding: 20px 0;
}
This "solution" is not as dynamic as with percentage padding on the table-cell itself.
Why not?
It's because the percentage takes is value from it's parent element, the table-cell. Where as the table-cell did take it's percentage value based on the tabel. Now when you would just use left-margin: 5%;. It would be half of the space as it should be. This is because it take the 10% on the table-cell width. Where the table-cell width is table width devided by its cells(table width / table cell).
So to fix that i did 5 times the amount of cells (5 * 2 in this case), which would result in the right percentage.
However this is not dynamic when you want to add more cells.
jsFiddle
Use border
Use border which its position is "reserved" before the padding is resetted.
Reserved border
span
{
border-bottom: 1px solid transparent;
}
Change property that doesn't need re-calculation of position; color
div.table-cell-bug:hover span
{
border-bottom-color: black;
}
Now note that there will still be no padding in the layout. As soon as a property is assigned which has not been calculated before the padding did reset(the same time the text position is determed) the positions will be re-calculated.
jsFiddle
I hope one of these quick fixes work for you.
I see you sended a bug report to MS. Keep us up-to-date when you get a reply, i would appreciate it :)
Strange, no one mentioned to set table-layout:fixed; It's really important, otherwise the padding/width won't be calculated correctly on IE (and some other weird side-effects, depending on the use case), especially when you are using images inside it.
<style>
.table { display:table; table-layout:fixed; }
.table-cell { display:table-cell; }
</style>
<div class="table">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
Adding invisible top and bottom borders seems to fix the problem.
a {
border: solid rgba(0,0,0,0);
border-width: thin 0;
}
This prevents the anchors from moving on hover or focus.
I use rgba(0,0,0,0) instead of transparent for better compatibility with old IE which displays transparent in colour while rgba is rendered invalid and not displayed at all.
We had a similar scenario where none of the solutions above worked.
Instead we animate the width of our affected div after the page has loaded:
if (!!navigator.userAgent.match(/Trident\/7\./)){
$("#karina-rosner2").animate({'width': '20.1%'},1);
$("#karina-rosner2").animate({'width': '20%'},1);
}
This forces IE11 to recalculate the div's relative padding value and solved our problem well.
This can be "helpfully" solved by setting the paddding css-rules like this ->
element:hover,
element:active,
element:focus {
// padding example
padding-left: 1.5%;
}
Rememeber to set this only for IE since it can make all normal browser behave like a disco.
EDIT: Flexbox works for IE 10 and above so this "solution" is only needed for ie 9 and below.
These are all really good answers, and the media query option works well to identify only IE which has this problem with display:table-cell
What I did that I found worked well was employ vertical-align as a great way to direct the text contained within the display:table-cell element to where I wanted it to reside. Usually vertical-align doesn't do much to formatting, UNLESS it is in a table.
Here is my simplified HTML:
<li id="table-cell-element">
<a href="#">
<img src="event.png"/>
<small>Register for Event</small>
</a>
</li>
And here is the CSS:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
li {vertical-align:middle; display:table-cell; width:15%; font-size:1.2em; line-height:1.2em; padding:2%; margin:0;}
li a {display:inline-block;}
li img {display:inline-block; vertical-align:middle; padding-right:5px; float:left; max-with:30px;}
small {display:block; font-size:60%; font-weight:bold; color:#333;}
}
You may also have to adjust the li a:hover {line-height} depending on what is in your CSS for those elements
Also, if you want this to work for IE 9 and below I suggest using conditional comments that add an "ie" class to the <html> tag and then create an IE9 style sheet. Thankfully the styling required for IE9 is relatively the same. But I only tested through IE9 and I am uncertain of your results for IE8 and IE7.

Categories