3

I came across a requirement where I wanted to change the width of the Date & Time pickers of the

<lightning-input></lightning-input> 

LWC component from component library. It took some time for me to figure out I might not be able to set the styles of items within an LWC component because of the Shadow DOM restrictions.

Is there any easy way to fix this?

2

According to DOM Access Containment it is supposed to behave like that. There is nothing to fix there.

I would suggest to use 2 inputs for your use-case and restrict widths on them.

Sample code:

HTML:

<template>
    <div>
        <lightning-input class="data-input" type="date" name="input1" label="date"></lightning-input>
        <lightning-input class="time-input" type="time" name="input1" label="time"></lightning-input>
    </div>
</template>

CSS:

.data-input {
    width: 5rem;
    display: inline-block;
}
.time-input {
    width: 10rem;
    display: inline-block;
}

Output:

enter image description here

  • Perfect! Thanks for your help. – Anee Aug 27 '19 at 4:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.