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.
Related
i added my theme as jar as described by the documentation.
now i want to add a menu-bar with a single entry for a user-menu.
But i have some trouble to create a custom css.
in the theme i import my base.css
#import url('./base.css');
#import url('lumo-css-framework/all-classes.css');
all styles are loaded, fine :)
then i add the shadow-tree css in my base.css
/* working */
vaadin-menu-bar{
border-radius: 0px;
background: aqua;
}
/* not working */
vaadin-menu-bar-button{
border-radius: 0px;
background: red;
}
/* not working */
vaadin-menu-bar [part="menu-bar-button"]{
background: yellow;
}
https://vaadin.com/docs/v14/flow/styling/styling-components
may be i did understand something wrong. Any help would great :)
so while using a JAR for the theme and the css belongs in
resource/META-INF/resources/themes/mytheme/base.css
i can use
vaadin-menu-bar.usermenu::part(menu-bar-button){
border-radius: var(--lumo-border-radius-m);
}
to set my custom style to the menubar with classname 'usermenu'
I'm trying to change the style of the md-dialog.
in my main.scss i'm importing the prebuild pink-bluegrey theme...
then in my component I import the following -->
#import "#angular/material/dialog/dialog.scss";
$mat-dialog-padding: 0;
$mat-dialog-border-radius: 0.5rem;
$background: #ffffff;
#mixin mat-dialog-container {
padding: $mat-dialog-padding;
border-radius: $mat-dialog-border-radius;
background: $background;
}
#include mat-dialog-container;
The padding and border radius is correctly applied to the dialog window.
But the background is not working... also tried the !important statement.
I'm using this in a single component...
Is there also a change to apply those styles globally?
in chrome dev tools I see those applied style changes. The background gets overwritten by the pink-bluegrey theme..
hope anyone can help.
thanks
It is better practice to add a wrapper class around your dialog, and then add styling to the children. Have a look at this article for more information.
When you open your Angular dialog, you can add a panelClass
attribute, like this:
this.dialog.open(MyDialogComponent, {panelClass: 'my-panel'}).
then, in your css (e.g. in the root styles.css file), you can add the following:
.my-panel .mat-dialog-container {
overflow: hidden;
border-radius: 5px;
padding: 5px;
}
EDIT Warning
It is also possible to add the css to another file than the root styles.css, but then you have to use ::ng-deep in the css (e.g. ::ng-deep .my-panel{ // ... }). This is not advised, as ::ng-deep is deprecated in Angular
EDIT2 Good alternative
If you are using scss, then you can place your .my-panel-style in your mydialog.component.scss file, by using a #mixin, and #import the file in styles.scss. You can then use #include to load the defined mixin.
in your mydialog.component.scss file
#mixin myPanel(){
.my-panel .mat-dialog-container {
// css here
}
}
in your styles.scss
#import 'path/to/mydialog.component.scss' // you don't need the .scss suffix
#include myPanel();
I solved this problem by including this css block in the end of file material2-app-theme.scss
.mat-dialog-container {
overflow: hidden !important;
border-radius: 5px !important;
padding: 5px !important;
}
can you use css then change background in mat dilog, at i used color transparent
mat-dialog-container {
padding: 0px !important;
background: transparent !important;
}
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 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?
I've tried to find the answer, and can't seem to do so, which is leading me to believe that it isn't possible. With my minimal knowledge of how CSS works, I also don't think it would be possible, but I just want to ask before I start working around a problem that may or may not exist.
Basically what I'm trying to do is use a previously defined attribute in a new class in my CSS stylesheet. For instance, say I had a couple of classes that just held background or font colors, like this:
.black { background-color: #000000; color: #000000; }
.white { background-color: #FFFFFF; color: #FFFFFF; }
Now if I was defining a new class (or using any selector for that matter), would it be possible to use the value of an attribute from an already existing class? Here is what my idea would look like:
.newClass {
width: 100%;
height: 100%;
background-color: .black; /* this would just get the background-color attribute from the .black class definition */
}
background-color: .black; is basically just a placeholder for "get the background-color attribute from the .black class definition". Is that possible using purely CSS? I'm aware of a ton of alternatives with PHP/JS, but I'd like to know if CSS can tackle this by itself. Thanks guys.
SASS is a thing to go. Your code will be like
#mixin black-theme {
.black { background-color: #000000; color: #000000; }
}
.newClass {
width: 100%;
height: 100%;
#include black-theme;
}
SASS
PHP compiler for SASS PHPSASS
There are javascript based solutions too like LESS but I generally don't recommend them as if Javascript load slow then presentation becomes jerky.
No, this is not currently possible in CSS. CSS does not have variables or the ability to reference values from previous rules. You would have to look for a CSS preprocessing language that gets processed into plain CSS before going onto the web site.
If you're willing to go the preprocessed way, you can look at SASS or LESS.
Yea possible using SASS or LESS css
#bgcolor : black;
.newClass {
width: 100%;
height: 100%;
background-color:#bgcolor;
}