php - Tailwind CSS : Select (Dropdown) width changes when data added to list

I have three Select DropDowns. I am adding the list to the first one on load. The lists for the others are added based on the selection of their previous ones. If I don't add the list for the first one the 3 select have the same width, but on adding the list to the first select its width increases. Is there a way to make the width not fixed but also independent of its added list?

    <div class="flex flex-wrap gap-6 justify-center w-full flex-col md:flex-row pb-4 pt-4">
<div class="flex flex-wrap">
    <label for="district" class="block text-gray-900 text-sm font-bold mb-2">
        {{ __('Select District') }}:
    </label>

    <select id="district" class="form-input w-full @error('district') border-red-500 @enderror"
        name="district" required autofocus>
        <option value="">--- Select District ---</option>
        @foreach ($districts as $district => $value)
            <option value="{{ $value }}">{{ $district }}</option>
        @endforeach
    </select>

    @error('district')
        <p class="text-red-500 text-xs italic mt-4">
            {{ $message }}
        </p>
    @enderror
</div>
<div class="flex flex-wrap">
    <label for="project" class="block text-gray-900 text-sm font-bold mb-2">
        {{ __('Select Project') }}:
    </label>

    <select id="project" class="form-input w-full @error('project') border-red-500 @enderror"
        name="project">
        <option value="">--- Select Project ---</option>
    </select>

    @error('project')
        <p class="text-red-500 text-xs italic mt-4">
            {{ $message }}
        </p>
    @enderror
</div>
<div class="flex flex-wrap">
    <label for="sector" class="block text-gray-900 text-sm font-bold mb-2">
        {{ __('Select Sector') }}:
    </label>

    <select id="sector" class="form-input w-full @error('sector') border-red-500 @enderror"
        name="sector">
        <option value="">--- Select Sector ---</option>
    </select>

    @error('sector')
        <p class="text-red-500 text-xs italic mt-4">
            {{ $message }}
        </p>
    @enderror
</div>
<div class="flex flex-wrap flex-row justify-center items-end w-full lg:w-min-content">
    <button type="submit" class="myButton">
        View
    </button>
</div>
Copy code

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.