I have a GWT code that creates a list (grid as result) and I set the style to a CSS class like
.test tr {
height: 26px;
}
now...if from code I need to obtain that "26px" when the render isn't completed or when the grid has no element? ho can I obtain that value? I know i can do
obj.getElement().getStyle().getProperty("height");
to obtain some style attribute but how can I obtain the sub-element tr related value?
As you've discovered, the element's style property only contains styles that are directly set on the element itself - it does not automatically pick up css that has applied to it, or css that has been applied to parent nodes and inherited to it, etc.
To do this, you need to get the 'computed' style of the element. This is a somewhat expensive operation so should be done carefully, and will not work in older versions of IE, so different code entirely must be written. Some libraries like GXT have a built-in feature to do this work for you (XElement.getComputedStyle(...)), if you are not using a library like that, you will need to write JSNI that can call into this api and ask for these details.
Check out http://caniuse.com/#feat=getcomputedstyle (IE8 and below do not have it, old Android Browser and Opera Mini apparently have issues), and https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle for the details on the call. In your JSNI, remember to use $wnd to refer to the window object, something like this:
$wnd.getComputedStyle(element).getPropertyValue('height');
There is no need to get that value programmatically. I imagine that you have only one or two styles that define your tables, so you can always infer the row height from your style name. For example, if you have "standard" height set at 26px and have a "big-table" style setting it at 36px, you can simply:
int rowHeight = myTable.getStyleName().contains("big-table") ? 36 : 26;
Related
Are there a css property that would change nothing?
I need this for testing purposes very often when writing scss just to see that I created a css selector correctly. For instance, I would be glad to have something like this foo: "helloworld1"; and later on I would be able to change the value of the foo and check the value in the developer tools to see that my selectors have indeed reached a correct element.
I thought about using the width: auto;, but sometimes the width is specified (e.g. width: 100px;).
Define your own properties using custom properties (aka CSS variables)
Custom properties are solely for use by authors and users; CSS will never give them a meaning beyond what is presented here.
Also
Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules, can be made conditional with #media and other conditional rules, can be used in HTML’s style attribute, can be read or set using the CSSOM, etc.
considering I have a single css file for my entire website (and that doing so is an usual technique), I was wondering if there is a way to select website-wide attributes like body (or any other attribute in fact) according to the current page using only css.
Something like
body:in('index.html') {
some properties;
}
body:in('contact.html') {
other properties;
}
Again, css only. I know the simple solutions using things like php, js, jquery...
Selectors have no information about the document beyond what is presented in the DOM tree, and the DOM does not expose information about the page according to its file name, URL, or any other such properties.
Historically there was a #document at-rule for querying the current URL, but it was removed from the Conditional Rules Level 3 module. The most likely reason for this is the lack of cross-vendor implementations, as the only known implementation exists in Gecko, as #-moz-document. It's so bad, that the only uses for it that you'll spot in the wild are not to apply CSS based on a certain page, but solely as a CSS hack for Firefox.
As you've stated, the simplest workaround for this is to have each page apply a unique class to the html or body element and select according to that class, whether via hardcoding, or dynamically.
you could add and id atribute to the body tag and style things inside it using:
body#contact div{
background:#376;
color:#857;
/*etc*/
}
more information about selectors in http://www.w3.org/TR/css3-selectors/
If there's a case for using MVC for responsive websites, this is it:
I'm working on a site that is mostly ASP.NET WebForms, which is undergoing a redesign to use responsive markup. It is impractical to convert everything to MVC, so I have to make do with the existing controls.
On a particular form page, we have two combo-boxes on the same row; these have CSS classes appropriately set to specify the width at 48% of the parent element. The trouble is that since we're using the asp:DropDownList, the control is rendered with a style attribute having width:275px;, which overrides the width set in the CSS class.
In codebehind of the composite control containing these DropDownLists (particularly the RenderChildren method override), I've tried calling [control].Style.Clear(); prior to calling the base method. This has no effect; even adding:
[control].Style.Add(HtmlTextWriterStyle.Width, "inherit");
causes the element to be rendered as:
<select style="width:275px;width:inherit;" class="input-half first" id="longAndComplicated" name="longAndComplicated">
Note the two width declarations, when ideally there shouldn't be a style attribute in the first place.
I've had a poke in Reflector at the source, and couldn't find where this hard-coded width is being set; I gather that the style setters are being copied from somewhere further up the ASP.NET hierarchy.
As a lucky guess, I tried:
Setting Width to an empty string on the <asp:DropDownList> ("inherit" causes a Parse error)
Explicitly specifying Width="48%"
Setting EnableTheming="false"
None of these has had any positive effect, with the rendered style attribute still having width:275px;.
Where is this width magically being set from? How can I override this behaviour, ideally without having to create a derived class inheriting from System.Web.UI.WebControls.DropDownList?
Many thanks.
I have better Idea, fix the width and do not inherit the width, as that will inherit width from parent and over-ride the width element defined with width:275px; so that will be meaning less.
I have created a fiddle, works fine in chrome, the select tag has fixed width,
If sub element size will increase it will automatically grow.
Please check fiddle
If your question is referring to CSS class class="input-half first" then the style defined in element style is the one what is applied at last and will have high priority compare to class, better create new class, and assign it.
Hope, I have answered in right context as you have written many things with reference to ASP.net control, but I don't think that should be problem in majority cases.
Doh - I figured out what it was.
It turns out that the containing composite control defined properties along the lines of DropDown1Width and DropDown2Width. These 'cleverly' set the Width property of the underlying DropDownList controls, which were used during the DropDownList.Render() method.
Fortunately I don't have to go subclassing DropDownList, though in hindsight the lack of definitive web search results suggested the problem was likely to be somewhere in our own codebase.
I say "defined", as I have since removed these redundant properties (and their corresponding assignments in various ASPX files).
How is the all property used in CSS?
This question is related to this one.
According to this:
The ‘all’ property is a shorthand that resets all CSS properties.
Name: all
Value: initial | inherit | default
Initial: See individual properties
Applies to: See individual properties
Inherited: See individual properties
Percentages: See individual properties
Media: See individual properties
Computed value: See individual properties
Animatable: See individual properties
So, it has to reset CSS properties for a selector.
This means, for example, that if we import Twitter Bootstrap and add the style below, the .btn class has to be reseted:
.btn {
all: default;
}
This doesn't happen. See this jsFiddle.
Am I correct? Isn't this implemented in web browsers?
The W3C specification you linked to says it's currently in "Working Draft" stage. Also, there's no mention of the all property on CanIUse.com, so I think it's safe to say it's experimental.
You might want to try -webkit-all or -moz-all.
Y'know, reading the spec for this feature, it feels like a hack. If you design your style cascade appropriately there shouldn't be a need for this property.
Right now I believe only Firefox supports all (as of version 27). You can use the all property (e.g. all: unset;) to apply the value to every property (except direction and unicode-bidi).
See this pen in latest FireFox: http://codepen.io/tomliv/pen/AejFH
There are 3 inputs in the grey area (really!).
This is not what I was expecting, but maybe setting all to initial will be more what you need?
There really is no default value for every property - at least one that is consistent across all browsers.
That's really where a CSS reset comes in. I'd recommend looking at Eric Meyer's CSS reset: http://meyerweb.com/eric/tools/css/reset/. Typically, these types of resets are used to reduce browser inconsistencies.
If you're looking to apply something to all elements (you'll still need to individually list each property), use
* { /* Universal Selector */ }
Using a reset stylesheet or some CSS framework like bootstrap is probably a better solution for both normalizing your CSS and cross browser consistency.
I need to style all the input fields but one.
So i have set a rule for all the inputs on the site.
For the seachfield i need to use the browser default, so i was thinking i could just inherit all the values i have set for the general input fields. (have tried border: none to)
This does not work in FF nor Safari :( The border just gets transparent.
http://jsfiddle.net/N5KKH/1/
Any idea how i could get the default browser styling back?
EDIT: i need the first input field look like the second one:
http://jsfiddle.net/N5KKH/2/
You should be using a class on all inputs you want styled rather than a general selector on tag name.
If you cannot control this, you could try to set the input back to the default css properties which are listed here although this is not a nice solution and will probably not actually result in the default appearance of the input box.
CSS3 has the not pseudo class which could be used to select all the other inputs although this is not supported by all browsers. JS abstraction frameworks such as jQuery often allow you to use "not" selector syntax cross-browser although this is much less elegant than a pure html css solution.
EDIT
Actually, it doesn't seem to. Just gives me a solid border. Hold on, seeing what I can play with.
EDITv2
It appears that in CSS3 it can be done using the not pseudo-class. However, there doesn't appear to be a way to bring it back from a styled form element. That being said, try just adding a class to input fields you would like changed, then have it ignore the one you don't want changed.
Alternatively, you could use something like jQuery to select only the elements you'd like styled and apply the class to it or manually add the properties (but now you're adding a JS-dependance).
I'm not sure if you generate them from codebehind or hardcode them into the website, but I'd recommend that you use either a class or a name attribute on the input fields you want to look different, like this: http://jsfiddle.net/VeXgw/
I don't believe there is a simple way to unset styles because technically there is no default set style. I think your only chance would be to write some browser specific style rules with javascript to try to make it look like the defaults for each browser.
The better method may be to give all of your inputs (except the searchfield input) a class that you use to style them instead of styling ALL input tags.
Can you use an ID or Class for that single link?
Update:
Try using
border-style:inset;
should do the trick...
http://jsfiddle.net/N5KKH/10/