Can't change width of input

[FSerg]

❔ Question

Can't change the width of the input.
The CSS customization is available only for cells :(
I tried to use id property like this:
<SemanticDatepicker type="range" id="x123" />
and CSS
#x132 { width: 500px; }
But it doesn't work.

Are there any ideas?

[arthurdenner]

Hi @FSerg 👋

This issue is probably caused by what I related in #19.

Unfortunately, I didn't take any time to check and try to solve it.

Any help would be appreciated. 🙏

[xzessmedia]

hmm i can not confirm this,
i was able to change the width for the input,

`.ui.icon.input input {

padding-right: 2.67142857em !important;
width: 500px;

}`

for the class clndr-control
and even clndr-cell

without any problems, just normal css knowledge

[arthurdenner]

Hi @xzessmedia! 👋

Yep, you can control it with CSS, but I think that the perfect behavior would be if just worked™ without any extra work. The problem is more visible if you try to use the component inside a Form.Group.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[brad12s]

Running into same issues where the last 2 digits are being cutoff.
Using inside a <Form.Group>.
Editing the css renders all UI input fields:

.ui.form .field .ui.icon.input { width: 245px; }

Solution:
I was able to isolate this component by wrapping in a div with a custom class name and adjusting the css:

.ui.form .mine .field .ui.icon.input input { width: 245px; }