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").
Related
I want to override the default MUI CSS of the accordion component and I want to do this using the CSS module but problem is that the class is dynamically added by mui. Hence I cannot target that class directly.
I tried this below solution but it is not working:-
Css code:-
`.accordian_summary {
&:global(.MuiAccordionSummary-root) {
padding: 0px !important;
}
&:global(.MuiAccordionSummary-content) {
display: block !important;
}
}`
JSX Code:-
Accordian component code
DOM Tree structure and the class which I want to override
Browser code
*Note:- One of the CSS is getting applied i.e
`&:global(.MuiAccordionSummary-root) { padding: 0px !important; } `
but this is not working
` &:global(.MuiAccordionSummary-content) {
display: block !important;
}`
Please help if possible and Thanks for your help in advance.
Possible solution:
div[class*="MuiAccordionSummary-root"] {
display: block;
}
For example to change style for input error label:
label[class*="Mui-error"] {
text-decoration: underline;
}
I am working on a quasar/vue app. I want to style the dialog popup within one component. I'm using scoped CSS, and if the CSS is not scoped, the style works. If the CSS is scoped, the CSS does not work. I only want to style this dialog in this one component.
The template code calling the dialog:
<div class="-nav">
<q-select
outlined
dense
v-model="select"
:options="options()"
behavior="dialog"
style="width: 100px"
/>
The CSS element is:
<style scoped>
.q-dialog__inner {
width: 400px;
background-color: red;
}
</style>
This does not work:
:deep(.q-dialog__inner) {
width: 400px !important;
background-color: red;
}
I noticed that the global quasar style is marked with !important
codepen: https://codepen.io/kiggs1881/pen/oNoOzEj
.q-dialog__inner > div {
width: 400px !important;
background-color: red !important;
}
hope it helps
Have you tried to put the parents class in front of the selector like this?:
(If have seen this here) and it worked for me inside an expansion item.
.q-dialog :deep(.q-dialog__inner) {
width: 400px !important;
background-color: red;
}
I think everything is provided in the quasar.dev documentation if that doesnt help try using on hover => funtion-To-Display-Popover-In-Specific-Component
there are many ways to counter this problem using scoped is not the only one
I have a form in my application where I use the following code from Primafaces:
...other inputs...
<label for="workshopTags">Tags</label>
<p-chips
[(ngModel)]="values"
name="workshopTags"
id="workshopTags"
></p-chips>
I am able to display the Chip element correctly but I would like to style it putting its width to 100% and the height to 100px, but nothing seems to work to change those. This solution didn't work for me. I tried to set a styleClass or an inline style as the documentation suggest but they didn't work either. If I write inline:
style="width: 100%"
The following error is thrown:
Error: Cannot find a differ supporting object 'width: 100%;'
How can I make it work?
there are tow methos to style primeng component overwrite the original style or by create a custom style base on custome class
overwrite
add the style to global style.css or style.scss , this method for overwrite primeng component style without add extra class to the component.
.ui-chips {
display: inline-block
}
.ui-chips ul {
border:2px dashed green !important; /* 👈 I have use important */
}
.ui-chips > ul.ui-inputtext .ui-chips-token {
font-size: 14px;
background: green !important; /* 👈 I have use important */
border:1px solid #005555;
box-shadow: 0 0 25px #ccc;
}
stackblitz demo 🍏🍏
custome style
the method above will change the style of all p-chips component in the entier project , by this method you need to set styleClass property so you can create different style like the example here 👇 , but you need to set styleClass property for every component
<p-chips [(ngModel)]="values" styleClass="p-chips"></p-chips>
style.css
.p-chips.ui-chips {
/* border:1px solid #ff2200; */
display: inline-block
}
.p-chips.ui-chips ul {
border:2px dashed orange;
}
.p-chips.ui-chips > ul.ui-inputtext .ui-chips-token {
font-size: 14px;
background: orange;
border:1px solid #ff5555;
box-shadow: 0 0 25px #ccc;
}
stackblitz demo 🍊🍊
You can use ht /deep/ modifier ,add this inside your app.component.css and delete it from your style.css, and you don't need !important to force the style here, delete it. here is what you are looking for
p {
font-family: Lato;
}
/deep/ .p-chips > .ui-inputtext {
width: 100%;
height: 100px;
}
check it here https://stackblitz.com/edit/angular-primeng-startup-kmm7xw
You could try encapsulation: ViewEncapsulation.None in your override component decorator:
#Component({
selector: 'app-chip',
templateUrl: 'path-to-template where you use ui-chips',
styleUrls: ['path-to-styles where you could override ui-chips styles'],
encapsulation: ViewEncapsulation.None
})
export class AppChipComponent { }
To set the width to 100%, you have to use the style or styleClass attribute and set the css property display: block.
As an example using the styleClass attribute
<p-chips
[(ngModel)]="interests"
styleClass="block">
</p-chips>
Here I am using Prime Flex v3 with PrimeNg.
Presentation
I'm trying to build a web site available in multiple cultures, with different reading direction.
To do so, I simply add the dir="rtl" attribute on my root HTML element.
My issue is that I have some CSS rules that are specific to one direction or the other (margins or paddings, most of the times).
Unsuccessful try with attribute selector
I though that I could simply use the attribute selector but the dir attribute is only set on the root element, so this wouldn't work :
selector {
&[dir="ltr"] {
// LTR specific
}
&[dir="rtl"] {
// RTL specific
}
}
For instance, on this demo, the title should have a margin of 5px on the right if the application is in rtl or on the left if it's in standard ltr.
Other idea
I've noticed that the direction is rightfully set at rtl, is there a way to use that rule within a CSS or Sass selector ?
Edit and precisions
It seems that I've forgotten an important point. I'm building the web site using Vue.js, the dir attribute is bind in the main component (App) and the RTL/LTR specific CSS rules can be in the same component or in other self-contained component.
Following your css code you could do this with SASS at-root directive DEMO. So this:
#app {
width: 300px;
height: 100px;
border: 1px solid red;
h1 {
#at-root {
[dir="rtl"]#{&} {color: green}
}
#at-root {
[dir="ltr"]#{&} {color: red}
}
}
}
It will compile to this css.
#app {
width: 300px;
height: 100px;
border: 1px solid red;
}
[dir="rtl"]#app h1 {
color: green;
}
[dir="ltr"]#app h1 {
color: red;
}
You could style everything LTR, and only adjust some elements styling for RTL. Might this work for you?
[dir="rtl"] {
&selector {
// RTL specific
}
&selectorN {
// RTL specific
}
}
Use below scss to get expected output
#app {
width: 300px;
height: 300px;
background: red;
&[dir="ltr"] h1{
margin-left: 10px;
}
&[dir="rtl"] h1 {
margin-right: 10px;
}
}
Probably you are going a little in the wrong direction.
Most of the time, you can achieve this automatically, no need for specific selectors.
Margin, for instance:
Just set it both for left and right margin. The browser will choose the correct one for you
#app {
width: 300px;
background: tomato;
margin: 10px;
}
h1 {
margin-left: 15px;
margin-right: 5px;
}
<div id="app" dir="ltr">
<h1>
margin left 15
</h1>
</div><div id="app" dir="rtl">
<h1>
margin right 5
</h1>
</div>
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?