Overllapping Values in Select

[itsvivek-in]

Describe the bug I updated the wire UI with my latest Laravel 9 and PHP 8 but when I am using select, while showing the selected value, as option-label, it overlaps with its option-value which doesn't look good. I know I might be missing something but what, I literally have no idea. Can anybody help please?

Expected behaviour Like earlier versions, when I select a value, it should only show "option-label" and "option-description".

Screenshots Before selecting any value:

After selecting a value: You can see the id which is "option-value" is showing in the background.

[PH7-Jack]

Could you check your tailwind css config? Try to see in the documentation, is wrong in your browser?

[itsvivek-in]

Hi, thank you so much for replying. I checked the tailwind CSS config but couldn't find anything.

TailwindCSS config file

Composer Json file

[PH7-Jack]

Could you update your tailwind css? You app is not compiling properly the assets

[itsvivek-in]

Hi, I found a solution. I don't know if this is the "perfect one".

I checked all the classes in the wireui select component and noticed that "text-transparent" wasn't working. I tried to make it "important" but still it didn't work.

So, I made a class with same name and assigned the color transparent CSS.

.text-transparent { color: transparent !important; }

Suddenly, everything started working.

@PH7-Jack Thanks a lot for your support.

[PH7-Jack]

It's weird, how many CSS are you using in your project? Only tailwind CSS? Do you have custom CSS classes to conflict with the text-transparent? Or the tailwind is updated? Are a lot of questions, haha, but I really want to understand them to resolve it

[itsvivek-in]

Tailwind and all its dependencies are already updated to their latest version.

The first and only custom CSS code written by me in the project is ".text-transparent { color: transparent !important; }" only. But I use an external CSS for sidebar navigation. I think this external CSS is the culprit.

So, now I strongly believe that this issue was not related to the WireUI or Tailwind CSS, but to the external CSS.

[PH7-Jack]

@itsvivek-in could you confirm if the external CSS is the problem? So I can add the text-transparent as important by default

[putera]

@PH7-Jack , I got the same issue of overlapping, but only if select component has no label on it.

Blade :

<form wire:submit.prevent="save">

        <x-select
            {{-- label="Search a User"  // dont put label on the component --}}
            wire:model.defer="user"
            placeholder="Select some user"
            :async-data="route('get.users')"
            option-label="name"
            option-value="id"
            option-description="email"
        />

        <x-button dark lg class="mt-10" label="Save" type="submit"/>

    </form>

Component

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Welcome extends Component
{
    public $user;

    protected $rules = [
        'user' => 'required|exists:users,id'
    ];

    public function save()
    {
        $this->validate();

        dd($this->user);
    }

    public function render()
    {
        return view('livewire.welcome');
    }
}

[PH7-Jack]

@putera are you still having this error?

[putera]

@putera are you still having this error?

Yes brother. Still. Dont know y..

[PH7-Jack]

@putera could you try using the dev-main version?

[putera]

@putera could you try using the dev-main version?

Problem solved ! This issue can be closed.

[PH7-Jack]

@putera Nice, I think it is a conflict with another CSS lib, the class text-transparent. I added the !important attribute to the class