Annoying things - input and select widths, line breaks etc...

[timoconnor]

For input fields like text and selects, there doesn't seem a simple way to control the width of the field. I am resorting to having to wrap it in a div. Additionally if I want text to appear before or after the input I need to use more divs, or tables.

I tried using the tailwind classes, but most dont seem to work.

[shinokada]

Please show us your code first.
Have you tried the class prop?

<Textarea class="w-1/2 m-4" id="textarea-id" placeholder="Your message" rows="4" name="message"/>

https://svelte.dev/repl/35b6b16cf78f43feb59cf4ba2c996d54?version=4.0.5

[timoconnor]

Yes I have tried the class prop - seems like what is causing the issue is the tailwind/flowbite classes 'block w-full' on the input component.

Here is what I have tried:

div style="display:flex;align-items: center;"><div class="w-20 m-4"><Input/></div>&nbsp;Minutes</div>

<Input class="w-20 m-4"/>&nbsp;Minutes
<br/>
<input class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 w-20 m-4"/>Minutes

The first one works - sets the width to be 80px and the 'Minutes' text appears after the input field.
The second one just takes up the entire page and puts 'Minutes' on the next line
The last one works - I removed 'block w-full' from the class

[shinokada]

How about this one?

  <Input class="inline w-20 m-2" /> Minutes

[timoconnor]

No didnt work. Simply shows the control at 100% of the screen with 'Minutes' on the next line.

[shinokada]

As you can see in this REPL example4, it shows inline.

Do you have the latest version?

[timoconnor]

Did an npm update, but still having issues. This is what version I have:

[email protected] | MIT | deps: 3 | versions: 356
Flowbite components for Svelte
https://flowbite-svelte.com/
...
dist-tags:
latest: 0.40.1

published a week ago by shinichiokada [email protected]