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?

1 Answer 1

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

1
  • Perfect! Thanks for your help.
    – Anee
    Aug 27, 2019 at 4:35

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .