0

I am using w3.css and I have a date input like so:

<div class="w3-padding w3-light-grey w3-border w3-border-black w3-left-align">
    <span style="white-space:nowrap">
        Date (yyyy/mm/dd):
        <select class="w3-select w3-border w3-hover-yellow"></select>/
        <select class="w3-select w3-border w3-hover-yellow"></select>/
        <select class="w3-select w3-border w3-hover-yellow"></select>
    </span>
</div>

What happens is (as with all w3.css input fields) the first select box (the year) takes up the full width of the containing div and the others spill over on the right.

What I want is a neat compact unit where each select is a maximum of 4 digits wide (for the year) and 2 digits wide (for the month and day). I want this on all mobiles and desktops.

Also, in general, what do I do when I do not want a w3.css input taking up the full width of the containing div?

Kara
  • 6,115
  • 16
  • 50
  • 57
Rewind
  • 2,554
  • 3
  • 30
  • 56

1 Answers1

1

After a lot of reading I have a solution that seems to work. Hope this helps others who need to do something similar:

<div class="w3-padding w3-light-grey w3-border w3-border-black w3-left-align">
    <span style="white-space:nowrap">
        Date (yyyy/mm/dd):
        <select class="w3-select w3-border w3-hover-yellow" style="display: inline-block; width: auto;"></select>/
        <select class="w3-select w3-border w3-hover-yellow" style="display: inline-block; width: auto;"></select>/
        <select class="w3-select w3-border w3-hover-yellow" style="display: inline-block; width: auto;"></select>
    </span>
</div>

Basically you need to overide the display and width elements of the w3-select's style:

style="display: inline-block; width: auto;"
Rewind
  • 2,554
  • 3
  • 30
  • 56