I have tables that has large width, so I'm trying to make all divs that contain those tables scrollable as following :
div.ui-widget-content:has(table){
overflow: auto;
}
Unfurtunately this didn't work, I don't know why, since I'm using the latest version of chrome (54.0.2840.99) which supports CSS4 selectors, and it has to work depending on this website : http://caniuse.com/#feat=css-has
I know how it's done using the has method in jQuery, but I need this to be done using only CSS.
When I force overflow: auto; in the developer tools, it works, so, the problem resides in the selector I'm using, as you can see in this picture :
So how can I solve this ?
If you gave the divs that have tables a class unique to those divs, you could set overflow: auto on that specific class. Something like this:
<div class="ui-widget-content contains-table">
{your table here}
</div>
Then set overflow: auto on the .contains-table class.
There is currently no such thing as CSS4 or the :has() pseudo-class.
It is true that certain CSS modules are at Level4, but that is not the same as a CSS4.
Also, the :has() pseudo-class very likely won't be implemented due to 'logistical reasons' (CSS goes DOWN the tree of elements, visualising elements in that order - :has() would force it to have to go "backwards" (up the tree), which would mean far more resource consumption).
I'm afraid JS (/jQuery) is the way you'll have to go about it.
Something like:
$("div").has("table").css("overflow","auto");
Related
I am primarily a mainframe developer and maintain a front end web application which was built in 2002 (but I joined it since 2012) and compatible only with IE 5. We have been surviving all these years with compatibility mode in IE. Now our client want us to make it compatible with IE 11. We just started off with a basic proof of concept taking one page and we noticed a couple of things with javascripts (fixed).
But we are stuck with an issue with our external style sheets. CSS properties are not being applied. When checked in debugger, there are check boxes are available for Position & Visibility attributes but top, left, and other things don't have check boxes and doesn't seem to apply. I researched a lot before posting this question but couldn't find a right answer. Here is a sample div and CSS.
<DIV id=PD_DIV_SEARCHBY class=srchSearchBy style="VISIBILITY: visible">
....
....
</DIV>
.srchSearchBy
{ position:absolute; visibility:hidden; -> Seems to work
top:75; left:5; width:225; height:135; } -> Don't work
Please pardon my knowledge if something was mentioned inappropriately.
Thanks
Per the comments, you should add quotes to your id and class declarations.
You also need units for your dimensions.
If your styles are still not being applied, it may be because another rule is taking precedence in Cascade Order or Specificity. You may be able to use a more specific CSS selector. If not, you can use the !important exception, however this should be used sparingly.
HTML
<DIV id="PD_DIV_SEARCHBY" class="srchSearchBy">
....
....
</DIV>
CSS
.srchSearchBy{
position:absolute;
visibility:hidden;
top:75px !important;
left:5px !important;
width:225px !important;
height:135px !important;
}
This works, but actually I've never come across it earlier. Does it have some "weak spots"?
div.floated { float: left; }
div.floated+* { clear: both; }
Though I did not notice any "side effect".
You can use it at your will, although according to MDN, you should take into account that universal selector is the most expensive CSS selector in terms of webpage performance.
Universal CSS Selector Performance
Here some problems I see:
"floated" is not a semantic class name.
This will clear adjacent elements after divs with the "floated" class, but not anything that is floated by other means.
In most designs I work with, I don't want to clear adjacent elements. Now I'll have to write more CSS to undo this.
I think I don't understand the value of this.
I was wondering if there was a way to use css to style a wrapper a certain way ONLY if it had a div with a specific id inside. Let's say that I have
<div class="intro_wrapper"></div>
in several places throughout the site but want to change the padding ONLY if it
<div class="intro_wrapper">
<div id="slider"></div>
</div>
has #slider inside of it. The thing is that I want to make it have less padding when #slider is nested in it so I can't really mess with the margin for #slider without cutting off the content all weird. I tried using negative margins but it ends up cutting off the image I have in a weird way.
I know you can use stuff like p + p for paragraphs that have paragraphs following them, so I am assuming there may be a way to do something like I am trying to. Thanks in advance.
You cannot do that with any CSS rules at this point as a reverse combinator to apply style on parent based on child. Instead you can hack it by adding a margin to the child instead.
div.intro_wrapper > #slider
{
margin:20px;
}
Whilst I think PSL's answer is already pretty good (cross browser, simple etc.) it doesn't help if you actually need to use a parent selector. Whilst at the moment it's best to avoid this when you can, there are definitely some circumstances which may require a parent selector (or some such alternative).
One solution if you absolutely have to use a parent selector would be jquery, its selector engine recongnises the :parent selector, for example you could do:
$("#slider:parent").addClass('padded_intro_wrapper');
Then in your CSS:
.padded_intro_wrapper
{
padding: 20px;
}
Equally, if the #slider div isn't always inside the .intro_wrapper div you could do:
$('#slider').closest('.intro_wrapper').addClass('padded_intro_wrapper');
That's where it starts getting a bit messy though.
EDIT: Fiddle if you're feeling lazy
I want to package up a widget to be easily included in an arbitrary project. I don't want to require that the user link to my personally-created style sheet in their host page - I just want the css to be magically injected when they use my code.
I understand that CssResource can go some ways towards this dream, but after scouring documentation I haven't found any reference to natural type selectors. For instance, I want to style the <tr>s in my widget without having to add a class name to each one.
Is this achievable with GWT? GWT's own widgets all come pretty thoroughly styled, but it seems they've added a style class to every single element in the DOM!
You're on the right track - a CssResource or UiBinder's inline <ui:style> will achieve what you're looking for. With regards to styling elements by type instead of class it certainly can be done:
<ui:UiBinder>
<ui:style>
.myTable tr {
color: red;
}
</ui:style>
<table class="{style.myTable}">
<tr><td>A row!</td></tr>
</table>
</ui:UiBinder>
GWT, however, has a reason for preferring explicit class names over descendent selectors: if you have the above style, for example, every time the browser renders a <tr> element it has to walk up the DOM and visit all of the ancestors of that element to see if any of them have the .myTable class. If your application uses a lot of <tr> elements (<div> would be a better example here), most of which don't have a .myTable ancestor, it can cause a noticeable decrease in rendering performance.
I think, I would use UiBinder, and only give the outermost element a class name, like this:
<ui:style>
.outer tr {
...
}
</ui:style>
<div class="{style.outer}">
...
<tr>...</tr>
...
</div>
Now you don't have to assign a class to each tr - you just use the selector ".outer tr", which only applies to <tr>s within some element marked with the class attribute {style.outer} (doesn't have to be a <div> by the way). The same principle would work without UiBinder, too, of course.
Ok I didn't really understand the whole question, maybe still don't but I think your asking for a way to "bulletproof your CSS" from specificity - I get the CSS bit now after seeing the other answers
Unique classnames (a bit of a oxymoron is CSS terms but heyho) added to everything are advised by most to make sure the site (not your) CSS fails as quickly as possible no matter how specific (weighted) their rules are
But you can make you widget CSS completely unique, i.e. so that it cannot be overruled by a site CSS,no matter how many ID's are in their selectors, without very much ado and without specifically classifying everything
e.g. #mywidget div {} could be overruled by site CSS very easily #wrapper #content div {} will do it - your div is a descendant of those two ID's too, and as their rule had 2 ID's versus your one, your CSS will lose - it's impossible to guess every permutation of a site CSS so the easiest thing is to add all those "extra" classes and why YUI and Blueprint are as they are
however if you write your CSS: #mywidget>div {} yours will likely always win, as never in their CSS will a div they're targetting likely be an immediate child of your widget ID (unless of course they choose to customise yours, which they could do with the 'class everything' method too)
so to bulletproof your CSS without adding classes to everything .. I assume your widget already has a unique iD wrapper? then if you don't already have an inner div wrapper, add one, it doesn't need to have a class but giving it one will place an extra layer of bulletproofing on this technique.
then prefix all your rules with #mywidget>div.myclass e.g. #mywidget>div.myclass td {} - the sites own rules, no matter how heavily weighted (many ID's and classes in a selector make a selector more weighted) theirs will fail as soon as they cannot match that particular combination - so your tr's are safe from site CSS takeover ;)
add one div or class and search and replace your CSS to add the prefix to everything.. as for how to package I've no idea
I have a page that looks like: <div id="header">...</div><div id="navigation">...</div> similar for body and footer.
I'd like to use a grid system to style the page, all of which seem to rely on giving the divs mentioned a class based on their presentation. But I don't want to do this (and can't because of the way the markup is generated)
Is there a way to do this, without just putting a class on the divs? I could copy the details of the class desired to a stylesheet mentioning the divs by id, but that feels wrong.
Edit to clarify:
The OP wants to avoid adding class="grid_3" etc. to the HTML, but also doesn't want to add #header { width: 960px; margin: 0px; } (which I think is okay) – Rory Fitzpatrick 3 hours ago
Exactly, I don't want to put presentation information in my HTML, but I hoped I wouldn't have to just take the css classes that make up the grid system apart, and apply the relevant parts (like margin:0px and width:960px), since that is bad from a maintenance and reuse angle.
So, I'll look at an automated system for doing what I need, unless there is an answer to how do you apply a css class to an HTML element, using css, without adding class="blah" to that element? Because that doesn't seem like a crazy thing to want to do to me.
Well if you use blueprint-css as your grid system you can use the compress.rb to assign the rules for given bp framework classes to a specific selector of your choice like #footer or what have you. for example in your project yaml you could have:
semantic_styles: # i dont think this is the right key definition but you get the idea
'#footer,#navigation': ['span-12','clearfix']
'#footer': ['push-1']
# etc...
Then when you call compress.rb on the project file it will roll up the necessary declaration from the array of selectors on the right into the selector on the left producing:
#footer,#navigation{ /* composite delcalrations from .span-12 and .clearfix */}
#footer {/* declarations from .push-1 */}
But all in all this is essential an automation of copying the declarations to a separate file that you say seems "wrong". But i mean other than doing this (automated or manually) i dont see what the possible options could be.
I'm not sure I understand the question. Why don't you want to put styles in a stylesheet and reference them by id?
#header{
position:relative;
...
}
I have the same reservations about grid systems, adding class names just goes against separating markup and style (but is often sacrificed for productivity).
However, I don't see what's wrong with setting the right column widths and margins using your own CSS. You could have a specific site.grid.css file that contains only selectors and widths/margins for the grid. I think this is perfectly okay, it's just a way of using CSS like variables. For instance, all 3-column elements would appear under
/* 3-column elements, width 301px */
#sidebar, #foobar, #content .aside {
width: 301px;
}
Then rather than adding class="grid_3" to your HTML, you just add the selector to the CSS.
You might want to consider using the class names initially, until you're happy with the layout, then convert it into CSS selectors. Whichever works best for your workflow.
If you don't have access to the markup you must either copy the styles, referencing the ids, or maybe you can apply the class to the ids using javascript?