In Vaadin 23, how to increase or decrease the width of the drawer area of a Vaadin App Layout component?
In your global style sheet, for example frontend/themes/mytheme/styles.css (this assumes you have a custom theme annotation defined #Theme("mytheme")), add the following:
vaadin-app-layout::part(drawer) {
width: 300px;
}
This is slightly simpler than the solution that Tarek suggested (which also works just fine).
You will need to style the internals of the app-layout component.
If the project is using the custom-theme mechanism, then create a file called vaadin-app-layout.css under the directory frontend/themes/<Your-Theme-Name>/components. In that file, you can, say, increase the width of the AppLayout drawer like so:
:host {
--vaadin-app-layout-drawer-offset-size: 400px;
}
[part="drawer"] {
width: var(--vaadin-app-layout-drawer-offset-size);
}
NOTE: if you are not using the custom-theme mechanism, then you will need to add the aforementioned styling in a CSS file that is imported using the #CssImport annotation. For example, you can create a file called vaadin-app-layout.css under the project frontend directory, and then import it from java using the following annotation:
#CssImport(value = "vaadin-app-layout.css", themeFor = "vaadin-app-layout")
Related
Most questions about the topic concern overriding properties, but my question is about targeting.
For example, I have a search bar in semantic UI React, which inside the browser correspond to this:
.ui.icon.input>input
so I can copy this to my global styles and add properties. But how can I isolate it with css modules for example? I can set a global id:
<body id='app'>
Then create a scss module:
:global(#app) {
.ui.input>input {
width: 900px;
}
}
This is following the advice here:
https://stackoverflow.com/questions/55005996/overriding-styles-in-semantic-ui-react#:~:text=To%20override%20say%2C%20the%20font,type%20selector%20(additional%20specificity).
But then what exactly do I import in my component? I'm a bit lost about it, I know I can just copy the selectors from the browser into my global stylesheet but I guess that's not a good practice
Vaadin flow theming and styles confuse me. Is there a way to disable it and apply natural css. I know how to reference a css file inside vaadin, and use setClassName but I would prefer to use ordinary css style for components.
Thank you
You can override the default lumo styling by providing yours. For instance, to remove the background color from a ComboBox, I can target the input as follows in a CSS file named vaadin-combo-box.css:
[part="input-field"] {
background-color: var(--lumo-base-color);
max-width: fit-content;
}
To set the colors for a disabled button, you can target it as follows:
filename: vaadin-button.css
code:
:host([theme~='primary'][disabled]) {
background-color: red;
}
And you get the following:
To change the primary color or any other global styling, explore your styles.css file.
For a better understanding, take a look at this video https://vaadin.com/learn/training/v14-theming
Like with all other styling you need to check the states / attributes of the component while the specific state is active and check the DOM - only caveat would be that you need to add those style in the specific files like vaadin-button.css to be applied inside the shadow DOM.
I am using an external panel component which would open on a button click.It has default width and other style properties.Is there any way I can override the width of the panel and used as responsive one .what i want to achieve is programmatically change the width of the panel in my components .
For example,
In my app.component.html iam using the panel container inside app.component.html
panel-container
How can i attach a custom class
panel-container class
="panel-width"
In.css
.panel-width{
Width:500 px
}
Without changing angular default view encapsultion
You can use :host::ng-deep to style the external component.
:host::ng-deep .panel-container {
width: 500px;
}
It is deprecated since 2017, but there is no new way to do this if you do not want to change ViewEncapsulation. Source: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
Got the solution.
We can override the same in our parent CSS file itself.
Dont use ng deep as that s deprecated
Overwriting library styles in separate global styles — not scoped!
let's override the Angular Material tab style.
create angular material tab scss file in app > assets > scss > override > am_tab.scss
and import the am_tab.scss file in the styles.scss #import 'assets/scss/override/am_tab.scss'
// am_tab.scss
mat-tab-group {
&.mat-tab-group.mat- primary .mat-ink-bar {
background-color: red;
}
}
More read in this article
I'm trying to style the title of the title label in a Spark Window Application. I think if I can find the correct CSS selector I can set it but I haven't been able to find it.
WindowedApplication {
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin");
}
WindowedApplication > TitleBar {
fontSize: 24; /* this doesn't work */
}
Here is more info on the Spark Window Application,
http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd8.html
Update:
It looks like the styles are defined inline in MacTitleBarSkin. So even if I could style them using CSS there is nothing more specific than inline styles. I tried to remove the styles in the MacTitleBarSkin but they don't seem to be removing. PS I'm using Flex 4.14RC.
The title from the WindowedApplication itself can not be changed programmatically. It is based on the OS settings.
If you do want to customize it, you will have to customize the complete application container (including close/maximize/minimize buttons).
You can achieve this by setting <systemChrome></systemChrome> to "none" in your application descriptor.
It looks like this will work but you have to copy the skins into your project and then remove the styles on the titleText label in MacTitleBarSkin:
windowChrome|MacTitleBarSkin s|Group s|Label#titleText {
fontSize: 12;
color: red;
}
See this post on how to import skins into your project.
I have a GWT application,
I created appBlueTheme.jar,appOrangeTheme.jar and added to BuildPath of project.
My module.gwt.xml file has
....
<inherits name='appBlueTheme.appBlueTheme'/>
<inherits name='appOrangeTheme.appOrangeTheme'/>
...
But in my app i see the effect of appBlueTheme as GWT doc say
"inherited modules will be cascaded in the order they are listed"
I want theme to be changed based on user response.
How do i achieve this?
If by "theme" you mean styling, the right approach is not to create a separate jar for each theme, but to use CSS instead.
A. If you use CSSResource, you can use conditional CSS:
https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#Conditional_CSS
B. If you use an external CSS file, instead of
.headerPanel {
background: blue;
}
you can specify a different background based on a theme selected:
.orangeTheme .headerPanel {
background: orange;
}
.blueTheme .headerPanel {
background: blue;
}
Note that your code (or Ui:Binder) should only assign class "headerPanel" to a widget. When you start your app, you assign a default theme to your outmost widget (the one you add to the RootPanel). For example, you set
myAppPanel.addStyleName("blueTheme");
This will give a blue background to all widgets with "headerPanel" class. When a user chooses a different theme, you remove "blueTheme" class and add "orangeTheme" class. It will automatically refresh the page (no need to reload it) and all styles will change.
EDIT:
If you need to apply a theme to the entire app, including PopupPanel and dialogs, use this code to apply your theme:
Document.get().getBody().setClassName("blueTheme");