Hello Goran, I want to style all my Vaadin-Elements by this way: <dom-mod

Directory Multiselect Combo Box
1

Hello Goran,

I want to style all my Vaadin-Elements by this way:

<dom-module id="my-custom-styles" theme-for="*">  
  <template>  
    <style>  
       [part="input-field"]
 {
         border-radius: 0;   
         border-bottom: 1px solid var(--lumo-contrast-50pct);    
         background-color: var(--lumo-base-color);    
       }
       
       :host([disabled]
) [part="input-field"]
 {
         background-color: var(--lumo-base-color);    
         border-radius: 0;   
         border-bottom: 1px dotted var(--lumo-contrast-50pct);   
       }
     
       :host([disabled]
) [part="label"]
,
       :host([disabled]
) [part="value"]
, 
       :host([disabled]
) [part="input-field"]
 ::slotted(*) {
         //color: var(--lumo-disabled-text-color);
         //-webkit-text-fill-color: var(--lumo-disabled-text-color);
         color: var(--lumo-contrast-70pct); 
         -webkit-text-fill-color: var(--lumo-contrast-70pct); 
       }

       :host([focused]
) [part="input-field"]
 {   
         //border-color: var(--lumo-primary-color-50pct); 
         border-color: var(--lumo-primary-color);           
       }    
    </style> 
  </template>  
</dom-module>

All elements now should have a 1px bottom-border. But the multiselection has 3 px if it is emtpty. If there are some elements in it the border is 1px under the elements and 3px right of the elements if there is some space between the right border of the last element and the right border of the mutiselect (sounds complicated). It seems to me that the multiselection contains 3 gui elements and each of them gets a 1px border so in the result I see a border of size 3px.

Do you have an idea or a solution for me.

Thank you very much from Braunschweig/Germany
Thomas

2

Hi Thomas,

I assume that end result is due to the multiselect-combo-box internals being targeted by the theme-for="*" selector.

You can look into the material theme version of the multiselect-combo-box: https://multiselect-combo-box.firebaseapp.com/demo/material which has a bottom border by default.
The styles for that theme are available here: https://github.com/gatanaso/multiselect-combo-box/tree/master/theme/material

Hope this helps,

Goran

3

Hi Goran,

thank you very much. This was a good tip. I replaced * through “vaadin-text*”.

Thomas