CODEWITHSUNDEEP
cssangularpolymervaadinmixins
Michael Phillips
Michael Phillips

Reputation: 23

Attempting to style vaadin-date-picker input text

I want to change the color of the input text to red when the date picker is within a element class 'has-Error'.

Below is an example of what I attempted on my index.html page, but had no effect:

<style is="custom-style">
        :root {
            --primary-color: #1ab394;
            --light-primary-color: var(--paper-teal-100);
        }
        html {
            .has-error {
                 --paper-input-container-label: { color: red }

            }
            --paper-input-container-label: { font-size: 12px }
            --paper-input-container-label-focus: { font-size:12px; font-weight:500 }
            --paper-input-container-input: { font-size:12px }
            --vaadin-date-picker-overlay: { max-height:400px }
         }   
    </style>

It looks like the date-picker is using a paper-input, but I can't figure out how to apply a style conditionally.

(Click link for example picture) - When looking at the picture example, I would like to have 'Choose Date' in red.

edit: I have added the html:

[ngClass]="{'has-error':hasErrors('value')}" class="form-group md-form-group">
<vaadin-date-picker [disableCond]="" [formControl]="" label=""></vaadin-date-picker>

Upvotes: 0

Views: 1539

Answers (2)

Amna Irshad Sipra
Amna Irshad Sipra

Reputation: 136

For styling only input field I would suggest you using vaadin-date-picker-light instead. It is far easier for styling just the input. you can use practically any html inside it for input field.

Mixins are not supported in current version. So, setting values on them will not work

For detail Please see this page https://www.webcomponents.org/element/vaadin/vaadin-date-picker/v2.0.0-alpha2/elements/vaadin-date-picker#property-max

AND this theming example if you want to use custom theme for overlay and other things https://cdn.vaadin.com/vaadin-date-picker/2.0.2/demo/theming.html

Upvotes: 0

Caribouflex
Caribouflex

Reputation: 781

I don't know if I understand well your question, but with your HTML code it would have been easier.

Case 1

Let say your HTML code looks like this : 

<div class="has-error">
    <vaadin-date-picker id="datePicker"></vaadin-date-picker>
</div>

Your CSS code will looks like this : 

.has-error vaadin-date-picker{
    --paper-input-container-label:{
          color:red;
    }
}

OR

.has-error #datePicker{
    --paper-input-container-label:{
          color:red;
    }
}

Case 2

If your HTML looks like this : 

<vaadin-date-picker class="has-error"></vaadin-date-picker>

CSS :

.has-error{
    --paper-input-container-label:{
          color:red;
    }
}

Upvotes: 1

Related Questions