I have a table with some css to hide/show columns. Each td has the classes "column" and "columnX" where X is the column number. The css looks like:
.column { display: none; }
table.show1 .column1 { display: block; }
table.show2 .column2 { display: block; }
The table starts out all hidden and the user turns them on. When this happens, a class is added to table like "show1" or "show2" depending on the column being shown.
This works great in FF, chrome, and IE8. But IE6/7 have an issue where a "column" does not become "display: block". However, if I go in the developer toolbar and toggle the css rule
table.showX .columnX {display: block; }
it works fine. It is like these old browsers do not know to update the table when done via javascript. Also, if I add a class like "show0" to the table to begin with (not in javascript), it works fine in IE6/7.
Any known workarounds for this?
Well, first of all, the correct display value for a table cell is not "block"; it's "table-cell". Now, that's a moot point for old versions of IE anyway, since they don't really understand that sort of fancy stuff.
Now the next problem is the fact that old IE (6 and 7, not 8) have this entertaining feature when initially rendering table cells: if, when the table is first rendered, a column of <td> (and a <th> at the top, if you like) elements is not visible, then subsequent changes to the DOM will never make it show up. It's just stupid that way; in fact I've asked the same question here.
What I've done to work around the problem is drop some JavaScript onto the page so that after the HTML is first rendered, some code can come back and then make the appropriate columns invisible. So long as they start off visible, they can be turned off and back on without incident afterwards.
Related
I've searched tirelessly and although I've found many people asking about this problem, there don't seem to be any consistent solutions.
We have a page on which a user can enter a date range, then press submit to return a table of data. A "print" button exists which obviously prints the generated data.
All browsers seem to be able to split the long table into several pages, as expected. We can also get some predefined footer text to show up on each page by using a footer div with some CSS like this:
.footer {
position: fixed;
bottom: 0;
}
The only problem is that the table rows have inconsistent heights, so on some pages there's plenty of room for the footer, but on other pages the table and the footer overlap.
Things I have tried:
#page {
margin-bottom: 10mm;
}
Adds a margin, but the bottom: 0; fixed position of the footer is now considered to be too high up, i.e. there's still an overlap but with a bunch of space at the bottom of the page. Setting the bottom property to a negative value just makes it appear at the top of the next page instead.
#page {
padding-bottom: 10mm;
}
No noticeable effect at all.
...And that's pretty much all I can think of. What can we do about this? Do we need some kind of custom JS solution to calculate the number of rows on each page and insert a footer manually? There must be somebody who has had success with printing footers; it doesn't seem like an uncommon requirement.
Please try to add this at the bottom of css file or after the last body affecting rule eventually adding also !important:
#media print {
body {
padding-bottom: 10mm;
}
}
There may be a more elegant solution, but you can do this in JS with an algorithm along the lines of:
while there is still vertical room left...
output a row to DOM
measure height of new row and recalc how much vertical room is left
For getting the height of an element, you could take a look at this other answer.
That may seem like a pain, but you'll have a lot of control over your rendering, and it should work fine.
i was having the same problem last day i search for hours to solve it. the solve was
adding these to css.
thead { display: table-header-group }
tfoot { display: table-row-group }
tr { page-break-inside: avoid }
ps: don't add relative position to the table never because it wouldn't work properly.
What is the best practice for creating specific page breaks in SAPUI5 and is it actually possible?
Classical CSS atributes page-break-after and page-break-beforedoesn't seem to work in my case. For example, I have two sap.m.VBox elements and I attached them a CSS class which specifies page-break-after: always !important;when printing, but nothing happens. If I add
* {overflow-x: visible !important; overflow-y: visible !important;} then it will break and continue to draw the content in next page if it doesn't fit in one page, but it doesn't work in IE.
I have tryed also adding an empty div element that would work as a page break indicator, but still CSS wouldn't do anything. I guess that's because everything in SAPUI5 is put into one content div.
You can solve this by adding an empty element in between.
If you want a break that is 200 pixels high, your page content can look like this:
return new sap.m.Page({
content:[
oVBox1,
sap.m.Panel({height: "200px", width: "100%}),
oVBox2
]
});
ofcourse you might want to set your panel background-color to transparent ;)
The "page-break-after" is ignored because the property display of SAPUI5 views is set to inline-block.
Simply override the CSS style for the corresponding class with a custom CSS and it should work:
.sapUiView {
display: block;
}
I'm using CSS counters to create a set of lists and subheadings. Here's the CSS
div.question {padding-left:2.5em; text-indent:-2.5em; counter-increment:item}
div.question:before {display:inline-block; width:2em; margin-right:0.5em; text- align:right; content:counter(item, decimal)}
div.subheading {counter-increment:none; counter-reset:item}
div.subheading:before {display:inline-block;content:none}
A Div with the class "question" should be numbered, whereas a div with the class "subheading" should have no numbering and should reset the numbering back to zero, so the next question will be 1.
This works fine in all the browsers I've tested it on as long as the content is static. However, if I use javascript to change the class from question to subheading Chrome won't reset the counters. This works fine in Firefox (v19) and Internet Explorer 8
There's a JSFiddle here
http://jsfiddle.net/NW43P/1/
As you can see the first subheading, which is loaded statically, correctly resets the counter. However, the second Heading, which is generated dynamically, fails to reset the counter.
I'm not sure if this is a bug in chrome or a problem with my code (I'm betting the latter), but does anyone know of a fix?
Thanks for any help
try reset the subsection counter in the section tag and increase the counter in the section:before. This works for me in the Chrome.
Example:
/* Header Numbering */
h1 {
counter-reset: h2ctr;
}
h1::before {
counter-increment: h1ctr;
content: counter(h1ctr) ". ";
}
h2 {
counter-reset: h3ctr;
}
h2::before {
counter-increment: h2ctr;
content: counter(h1ctr) "." counter(h2ctr) " ";
}
Maybe you can't edit the :before and :after pseudo elements? Or when you change the DOM after page is loaded.
For a fix, you could maybe consider using an ordered list? Instead of using the counter element? It would also be less code I guess?
Good day... yes I am a nOOb. So I apologize for my nOObness right off the top. I have searched this site and many like it for a week without any resolution. I believe my problem is unique.
I have a site with about 10 pages that I am creating that have lots and lots of tables on them. Most of the tables are formatted the same way so I immediately went to CSS for my needs.
So now I am trying to understand CSS and selectors and how to combine them etc.
Here is my dilemma. I have created a tag style for the <td> tag which works great on about 95% of everything I am doing. I have also created an "override" class for it for those instances when I want to align left and indent the <td>:
TD {
text-align: center;
vertical-align: middle;
all other rules;}
td.overide_l {
text-align: left;
vertical-align: middle;
padding-left: 1em;
all other rules;}
My problem comes from a piece of corporate controlled javascript that creates a lefthand nav menu. Apparently, there are td's in that code that is affected by my rule. The problem is that the javascript is not something that I can make changes to. It is a corporate script saved on a corporate site, yet needs to be on each of my pages.
If I change the <td> style to left align the script will align to the left. If I remove the <td> tag all together it will align to the left. If I make the <td> style center aligned like I want it, the script center aligns the left nav and I can't override it.
I have tried a thousand things. I tried to put the script in a separate table with the class override in it, I tried placing it in a separate td that surrounded it, I have put the class="overide_l" class in a <span>.
Lastly, I tried creating <div>'s that had id's associated with them which worked, but then my Class="overide_l" (and a plethora of other class styles I had created), didn't work within the new divs anymore...
div#content-section td {
text-align: center;
vertical-align: middle;}
Ultimately what I want to do is leave the tag style like it is at the top of this post and simply create a <div> or something that will shut off the <td> tag style for that one piece of code. Is this even possible?
Can you please help me!
Can't you just do the same thing you did with your td selector with your override class?
#content-section td.overide_l {
text-align: left;
vertical-align: middle;
padding-left: 1em;
}
The problem is specificity:
100 points for an ID selector
10 points for a class selector
1 for a tag selector
If you add up the selectors, you get the selector that will take precedence.
In your case:
td.overide_l = 11
div#content-section td = 102
So the second wins. Changing td.overide_l to #content-section td.overide_l will make it 111.
What you need to do here is be more specific in your css rules. Putting a rule on all elements (td) is a bad idea for exactly the reason you are illustrating here. Have the tables in your code have a different class so that your CSS rules know the difference between those and the nav tds. Also, if you guys are using tables for so much, you guys are going to have a bad time.
I'm having issues getting Firefox to update a webpage when its class is changed dynamically.
I'm using an HTML table element. When the user clicks a cell in the table header, my script toggles the class back and forth between sorted_asc and sorted_des. I have pseudo element which adds an arrow glyph (pointing up or down) depending on which class the cell currently is.
.thead .tr .sorted_asc .cell:after {
content: ' \25B2';
}
The problem is, that when you click the cell header a second time, the page doesn't update the arrow... until the user mouses away from the element. I think it's a bug as it works fine in Safari, and as I don't see any :hover tags in my CSS or other entries that might interfere.
Anyone seen this before, or know how to work around the issue?
It's kind of cheesy, but since you're using javascript anyway, try this after you changed the className:
document.body.style.display = 'none';
document.body.style.display = 'block';
This will re-render the layout and often solves these kind of bugs. Not always, though.
This is 2014 and none of the proposed solutions on this page seem to work. I found another way : detach the element from the DOM and append it back where it was.
Would you be able to use different CSS to accomplish the same thing without relying on the :after pseudo-selector? You might be able to simple define a background-image which you align as needed (I assume you would want the arrow on the right hand side).
For example:
.thead .tr .sorted_asc .sorted_asc {
background: url(images/down_arrow.png) no-repeat right;
}
.thead .tr .sorted_asc .sorted_des {
background: url(images/up_arrow.png) no-repeat right;
}
I only suggest this since I assume there isn't a specific reason why you need to use the :after pseudo-class. If you do need to use it, please update.
The bug can still be triggered in Firefox 58. Thankfully the opacity trick also still works. Just make sure to time it correctly. You might need to set a timeout between opacity changes.