Trying to customize the appearance of vaadin-date-picker's text input

My goal is to make the input text turn red when the date picker is within an element with the class 'has-Error'.

Below is an example of what I tried on my index.html page, but unfortunately it didn't work:

<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 seems like the date-picker is using a paper-input, and I'm struggling to apply a conditional style.

(Click link for example picture) - In the example image, I would like the text 'Choose Date' to be displayed 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>
cssangularpolymervaadinmixins

Answer №1

I may not fully grasp your question, but having your HTML code would make it simpler to understand.

Scenario 1

Assuming your HTML code is as follows: 

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

Your CSS code would be like this: 

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

OR

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

Scenario 2

If your HTML appears like this: 

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

CSS :

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

Answer №2

If you're looking to style just the input field, I recommend using vaadin-date-picker-light. It makes styling the input much simpler and allows you to insert almost any HTML content inside it.

Unfortunately, mixins are not supported in the current version, so setting values on them won't work.

For more details, please visit this page:

Also, check out this theming example if you're interested in using a custom theme for the overlay and other elements:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to make the clip-path function properly with the logo on my website

Looking to add some animation to my company logo, giving it the appearance of being drawn. I have the original SVG with the logo paths and separate paths set up to act as a mask for the animation. However, I'm encountering an issue where the mask doe ...

jquerycssanimationsvg

Avoid displaying the identical div through consecutive random fade-ins and fade-outs

I'm trying to make a JavaScript function that selects a random div from a list of divs, displays it for a few seconds, fades it out, and repeats this process in a loop. The issue I'm facing is that sometimes the same div is selected consecutively ...

javascriptjquerycss

Serving static files in Django

Currently diving into Django and encountering a hurdle with static files. I've followed the setup in both the settings and HTML, but unfortunately, they are not loading on the website. Seeking assistance to resolve this issue! **settings.py:** STATIC ...

pythonhtmlcssdjangostatic

Ways to horizontally line up text boxes

I need help aligning two textboxes next to their display names in a single line. I'm currently using dl, dt, and dd, but I'm having trouble getting them to align horizontally. Any suggestions on how to achieve this alignment would be greatly appr ...

csshtml

Challenges with the height of the calendar component in Vuetify

I need assistance with preventing the appearance of two scroll bars while working with Vuetify's sheet and calendar components. https://i.stack.imgur.com/yBfhj.png Below is my code snippet: <template> <v-app> <v-main> & ...

cssvue.jsvuetify.jsheight

Exploring the power of Angular 4/5 with Render2 through Jasmine testing

Currently, I am working on an interface that is designed to manipulate DOM elements based on input argument objects. My approach is to write unit tests first, using Render2 available in Angular. export interface ModifyDomTree { modify(data: SomeData) ...

angulartypescriptangular5

Transitioning from container to container-fluid class for tablets using bootstrap

I'm currently utilizing the container class in my project and I'm looking for an elegant way to switch it to container-fluid or adjust the width to resemble container-fluid when the website is viewed on a tablet, so it utilizes the full width of ...

csstwitter-bootstraptwitter-bootstrap-3

Superimpose one element on top of another

My current page layout includes the following code: <div class="card"> <div class="card-block"> <h4 class="card-title text-muted">UltimateWarrior15</h4> <h6 class="card-subtitle text-muted"> Ad ...

htmlcssbootstrap-4

Encountering issues with NPM installation and a failed build process while working with

As someone new to working with Angular, I apologize if my question is basic. I've been given a new repository to work on, but I'm having trouble building it through the command line. When attempting to run npm install and npm start on my work p ...

angularnpm

How to eliminate the inner padding border within a Material UI Outlined Text Field

I am currently utilizing the Material UI v5 Outlined TextField component to develop a form. In the image below, you can see a white padding border appearing in the TextField. I have created CSS that changes the input field color to yellow when focused. Th ...

javascripthtmlcssreactjsmaterial-ui

Tips for implementing a guard feature using a modal window

I am looking to implement a dialog window with yes and no responses when clicking on a router link. If the user selects 'yes', I want to pass through the canActivate guard. The issue arises when returning to the same router with the guard in pla ...

angular

Angular PrimeNg carousel with personalized previous and next buttons

The information is provided in the image attached, with all CSS code available on stackblitz. I am looking to customize the Next and Prev buttons by having their borders match the inside boxes and be rounded. This will indicate to the user that there is a ...

htmlcssangularcarouselprimeng

Creating a List with Sublists that are displayed when hovering over the parent List is a key element of effective design

Hovering over 'View Rows' should open up both New Records and Old Records <div> <li>Add Rows</li> <li>DeleteRows</li> <li>View Rows <ul> <li>View New Records</li ...

javascriptjqueryhtmlcssbootstrap-4

Instantly refreshing the display when a new item is inserted, removed, or modified in Angular

I am currently developing a task management application using Angular. While I have successfully implemented the functionality to add, delete, and edit tasks, the changes are not reflected in real-time on the web page. My goal is to enable users to see ne ...

javascripthtmlangularbinding

Updating the background image for a radio button

Is it possible to customize the background image within the active radio button from the default redmond to aristo? .ui-radiobutton-icon { background-image: url("/images/ui-icons_38667f_256x240.png.jsf"); } Can someone help with the correct syntax for t ...

cssjsf-2primefaces

Align a button to the left or right based on its position within the layout

On the left side, there is dynamic text and on the right side, a button is displayed as shown below: <div class="dynamic-text"> {{ dynamicText }} </div> <div class="some-button"> < ...

htmlcssvue.js

Issue with launching Angular 6 project

I attempted the solution from this link, but unfortunately, it did not work for me. I have cloned a project from GitLab and am attempting to run it. First, take a look at the output of my ng version command: https://i.sstatic.net/qxRzk.png. The project i ...

angularnpmnpm-install

I am experiencing issues with my background image not fully expanding or displaying correctly in the html section. Any assistance with troubleshooting the background image would be greatly appreciated

I am currently exploring Bootstrap and I am new to front-end development. I do not have a separate CSS file, only an HTML file included in my Python Django project. In this file, I am attempting to add a background image to my section. However, the image ...

pythonhtmlcssbootstrap-4

The elements in the navigation bar stay in view for a short period of time even after the collapsible navbar has been

After collapsing the navbar, the navbar items remain visible for a short period of time, as shown in the second image below. Here is the HTML code: <nav class="navbar navbar-dark fixed-top" style="background-color: transparent;> <a class="navb ...

cssbootstrap-4navbar

Searching for an Angular component in Selenium

After reviewing the HTML code snippet below, <div class="dx-filterbuilder-action-icon dx-icon-plus dx-filterbuilder-action" tabindex="0"> ::before </div> I attempted to locate this element using Selenium C# with the followin ...

c#angularselenium-webdriver