I have just started to explore GWT, and i'm bit confused with different ways of applying styles to GWT widgets.In gwt docs, there are 4 ways by which you can override default style of a widget,
1) Using a tag in the host HTML page.(Deprecated)
2) Using the element in the module XML file.(Deprecated)
3) Using a CssResource contained within a ClientBundle.
4) Using an inline element in a UiBinder template.
Suppose i have a CSS file in some package say, com.abc.xyz.styles.css .And the file has the following contents,
/**the panel itself**/
.gwt-TabLayoutPanel {
border: none;
margin: 0px;
padding: 0px;
}
/**the tab bar element**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs {
background-color: #F4F4F4 !important;
}
/**an individual tab**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab {
background-color: #6F6F6E !important;
}
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab-selected {
background-color: white !important;
}
/**an element nested in each tab (useful for styling)**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabInner {
font-family: Arial !important;
}
/**applied to all child content widgets**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent {
border: none;
margin: 0px;
overflow: hidden;
padding: 15px;
}
How will i inject this css file ? How can this be done using the 3rd and 4th option of styling mentioned above?.
You can simply add your CSS file to the host page. Then you can use the full power of CSS selectors. This is my preferred method of using CSS in GWT:
What the best strategy to structure CSS in GWT?
Related
is teher any chance to style my button inside tab in the css for vaadin-tabs component or i must do it by setclassname individually for button?
Accordin to this tutorial https://vaadin.com/docs/v14/flow/styling/styling-components
i tried:
vaadin-tabs vaadin-button{
background-color:red;
}
vaadin-tab > vaadin-button{
background-color:red;
}
[part="close-tab-btn"]{
background-color:red;
}
But none of it work. I`m importing my css by annotation:
#CssImport(value="./styles/components/tabs.css", themeFor = "vaadin-tabs")
and rest of my css looks like this:
[part="tabs"] ::slotted(vaadin-tab[selected]) {
color: var(--default-white-color);
background-color: var(--default-black-color);
}
[part="tabs"] ::slotted(vaadin-tab) {
color: var(--default-black-color);
background-color: var(--default-white-color-2);
border-radius: var(--default-border-radius) var(--default-border-radius) 0px 0px;
MARGIN-RIGHT: 3px;
}
[part="tabs"] ::slotted(vaadin-tab[selected])::before{
background-color: var(--default-app-color);
width:100%
}
*edit
But if my component is inside of dom in my slotted component then i can somehow style it from my top layout. In this example i mean if i can style input-field of text-area inside vaadin-vertical-layout
From the looks of your screenshot, the vaadin-button is not inside any shadow root. In that case, you can style it from the global styles.
For example styles.css
vaadin-button.close-tab-btn {
background-color: red;
}
and importing it with something like
#CssImport("./styles/styles.css").
I am not able to change the arrow size in vue-tour. While I am able to change it by inspecting in Chrome, in CSS I am unable to do it as it has some runtime generated ID associated with it.
.v-step__arrow[data-v-e97491e4], .v-step__arrow[data-v-e97491e4]:before {
position: absolute;
width: 10px;
height: 10px;
background: inherit;
}
The v-step GitHub is available here: https://github.com/pulsardev/vue-tour/blob/master/src/components/VStep.vue
You can make use of v-deep. It helps in applying the styles to the child-components directly.
If you are making use of sass then you can apply styling as:
::v-deep .v-step {
background-color: black;
}
If you are simply using css then you can use v-deep as:
>>> .v-step {
background-color: black;
}
I'm creating a chat widget and I want to overwrite a bunch of CSS. For example if this is the website theme's CSS:
textarea {
color: red;
margin: 10px;
}
and if I style my widget like:
textarea {
padding: 5px;
}
then only my widget's CSS should work. However, it adds both CSSs to textarea by default - how can I prevent the website's CSS from being added?
As Marc B stated, you can put your chat in an iframe, in which case you can have its own completely separate stylesheet.
If you must use it inline, then you can use all css property to unset what has been set elsewhere:
Widget CSS:
textarea {
all: unset;
padding: 5px;
}
Further, as pointed out in comments elsewhere, the best way is to create different classes for text area and use them where necessary, for example:
textarea.main {
color: red;
margin: 10px;
}
and if I style my widget like:
textarea.chat {
padding: 5px;
}
And then use
<textarea class="main">
or
<textarea class="chat">
depending on what you need.
Well I guess it is really easy to write !important to all your css rules. Just replace ";" with "!important" if that's an easy way for you OR if you really want to change then you can use iframe really
I'm using ZK and I want to make use of the ZK sclasses for the items in my .zul files.
I saw that you can use things like :
<style>
div.z-tree {
background: none !important;
background-image: none !important;
border: none !important;
}
div.z-tree-body {
background: none !important;
}
tr.z-treerow-seld, tr.z-treerow-over {
background: #00533f !important;
}
div.z-treecell-cnt {
color: #5555ff;
}
.test-class div.z-treecell-cnt {
color: #ff5555 !important;
}
</style>
Where can I find all those styles, like z-tree-body that I can use and all the attributes I can assign to them or how to search for them?
When I need to override some CSS, I always search the specific CSS classes with the browser developer tools.
Because you want to override the CSS of some nodes but not all, try to use sclass to a specific class of your own.
Example :
<style>
.red {
color:red;
}
<style/>
<label sclass="#load(empty vm.property?''':'red')" />
You don't need to use the zk classes if it's for particularisme cases. For overriding them all, you can beter use the zk classes.
I use GWT 2.1.1
In package resources i have png images and one css file.
In css file i wrote:
.finishedTask {
background: white url("tick64.png") center center;
padding: 0.5em;
border: 0;
}
.unFinishedTask {
background-color: white;
padding: 0.5em;
border: 0;
}
Than i create ClientBundle interface extension. With this CSS and images.
Than in UiBunder view i try to change css style:
textArea.setStyleName(isFinished() ? res.style().finishedTask() :
res.style().unFinishedTask());
When this code executed css layout of textArea are broken but i see that class changed (FireBug). Seems bug in css.
Maybe somebody already tried do the same thing.
Probably you should use addStyleName or addStyleDependentName instead of setStyleName which remove existing styles.