I would like to obtain a CSS-like string from code and add it to the current widget style.
SmartGWT have a setStyleName attribute, which work with CSS present on the stylesheet only, but no set Style or anything similar I can think of. How can I achieve this?
If I understand your question correctly, you should be able to use {widget}.getElement().getStyle() to obtain a com.google.gwt.dom.client.Style object that you can manipulate. But you need to give it individual “parsed” CSS properties.
If you just have a chunk of CSS as a string you can add it to your document with com.google.gwt.dom.user.StyleInjector, then add the needed classes to the widgets that need them.
Related
My goal: To style a link, that comes from a sanitized text, with a css variable. Im using a vue framework and want to use a computed style(or similar) to style it. The color of the link comes from an api.
My issue: Since the text is sanitized, no inline style will come through. I can still access the link like this:
.sub-link-style >>> a {
color: var(--color);
}
But I can't use the variable because I cannot add inline stlye.
My question: Is there a way to add a custom value(for example from vue) to a css variable without inline style?
The solution to this issue became using the sanitizers custom handler to create an exception for the attribute i needed specifically.
However, it only left me with a new problem. When the text gets into the code the computed variables are already resolved. Given up on it for now. Perhaps I'll look more at it later.
I am unsure if this is possible but I hope so.
I have an element with a translation transform, which I have no control over (it is set by an NPM package that I am using). I would like to set a scale transform on that element and be able to retain whatever transform the element already has, like a concatenation.
Imagine that this is similar to what I want to achieve:
transform: +scale(1.01);
Is this doable, and if so, how?
As far as I know that isn't really possible, so you have two options.
You can find the definition in the package for that transformation, copy it to your CSS, then add your desired changes to it.
or
You can place the element inside a parent element that has your desired transformation on it, that way both work.
Look how CSS works in any HTML page is like you can import as many stylesheets but the stylesheet imported in the last can take all the priority. So, you can obviously override the CSS of that package component by knowing the class/id or if you can catch that particular element by any selector combination.
Also, if your CSS is imported earlier than that component's CSS, you can put !important on your CSS property. So, no other property value can override your CSS value.
You get my point!
Don't mind if it sounds more blahblah.
I'm developing a multi-module application using GWT 2.5.1. I'm not using any GWT theme. I want to customize the style for some of the GWT widgets, for example Button and CheckBox.
I see two solutions:
Write a CSS file loaded in the application (link in the HTML page). The CSS will contain CSS rules using GWT defined names, like .gwt-Button for buttons and .gwt-CheckBox, .gwt-CheckBox-disabled for checkboxes. This solution don't takes the advantage of CSS optimizations made by the GWT compiler.
Use a CssResource and set the style name each time I use a Button or a Checkbox. This solution will take advantage of CSS optimizations but it requires to set the style name every time I create a new Widget.
There are other solutions? Which is the correct one?
You can put those styles in a CssResource as well.
Just put #external on top of those styles in your css file, and you are good to go.
For example:
#external gwt-DatePicker;
.gwt-DatePicker {
...
}
Hope it helps.
Other solution: Button is html element button and Checkbox an html element input[type=checkbox]. So you could set styles on those elements and use css selectors for specific states. i.e. button:disabled. That way you won't have to set style names, or don't have lots of extra style names and use cleaner css.
You could subclass whatever widgets you want to style (e.g. MyButton), and have your subclass either just add a style name to each widget that gets created, or do the styling inline using calls to this.setWidth(), this.getElement().getStyle.setXXX.
Also, what optimizations does the GWT compiler perform on CSS? I know that it will obfuscate style names to avoid collisions, but I'm not sure CSS is even able to be optimized?
I would personally use emanuele's solution, but just to offer an alternative: you can use a widget's getElement() method to access style names directly, so if you really want to, you can override the style names with ones you created. This gets rather difficult, however, with larger widgets and panels that have multiple styles.
I want to style/mark a MenuItem in GWT MenuBar. So i have some logic that adds a style name to a menu item (the logic is working properly).
mItem.setStyleName("menuItemMarked", true);
with this set getStyleName yields "gwt-MenuItem menuItemMarked" as expected.
But how to use/apply this style in css (at the moment i put css in uibinder.xml)? (as you may see i am not a css expert)
update: what i tried is that.
.menuItemMarked{background-color: yellow}
this is not working. if i call "inspect element"(chrome) i can see "class="gwt-MenuItem menuItemMarked" but i can not find the style "menuItemMarked" in the list of applied styles?!
Where are you specifying your CSS?
If your code is located within your code packages, it is likely being obfuscated by the GWT compiler. This applies to <ui:style> blocks in .ui.xml files, and .css files included in ClientBundles.
In this case, you will want to check out Programmatic Access to Inline Styles from the GWT docs. This will allow you to change your code to:
mItem.setStyleName(style.menuItemMarked(), true);
Alternatively, you can tell GWT to not obfuscate certain CSS classes. Here is a detailed answer to a similar question
Finally, if GWT does not touch your CSS file (it is being served from your server like other files), then you will need to make sure that your file is being included in your page properly. Your browser's dev tools should be able to help with that.
Make sure you specify correct selector name in your css. In this case you need to have following:
.gwt-MenuItem.menuItemMarked {
background-color: yellow;
}
Since gwt-MenuItem remains the first class name in the list it takes precedence over any styles (incl. background-color) defined in the subsequent classes. The only way to overrule this is to define styles with more specific selector like above. Check this link out for more detailed explanation.
I have made some templates on wikia.com, which contain only CSS code (key:value;).
My problem is having another template use these style templates in a style attribute tag.
style="{{MyTemplateStyle}}"
This code does not evaluate as expected. The CSS code is outputted before the element and the style attribute is not included inside the element.
Am I trying something not possible for a wiki ?
I merely want to be able to change styling on certain templates in one place, like regular HTML & CSS pages.
CSS styling specified from the style="" attribute always takes priority over any other css, even if you use !important in a CSS specification.
Therefore any edits you make to your CSS on Wikia will not ever override the CSS specified inside an attribute.
Kim, you were right to switch to classes instead of embedding in-line styles via templates.
The very idea of using templates suggest that this was going to be re-used in more than one place, applying styles to a group or, in fact, a class of elements.
This approach is much simpler to read and maintain (as you only have one, central place to edit), and also, if done right, will enable you to seamlessly change the colour scheme via Special:ThemeDesigner.