[Bug] (Select) item rows are larger than the select control size

russkyc commented 1 month ago

Comparison

Demo Page	When Used

Page

@page "/"

<section class="flex-col">
    <h2>Select</h2>
    <div class="flex">
        <Select Items="@fruits" Placeholder="Select a fruit" Width="200px" Display="x => x" TItem="string" SelectedItem="@selectedItem" OnItemSelect="x => selectedItem = x"/>
    </div>

    <div class="flex-col mtb1">
        <h4 class="large">Form example</h4>
        <Select Label="Email" Info="You can manage email addresses in your email settings." Items="@emails" Display="x => x"
                TItem="string" SelectedItem="@selectedEmail" OnItemSelect="x => selectedEmail = x" Width="400px"/>

        <Button Text="Submit" Width="fit-content"/>
    </div>

</section>

@code
{
    string[] fruits = ["**Fruits**", "Apple", "Banana", "Blueberry", "Grapes", "Pineapple"];
    string? selectedItem = "Grapes";

    string[] emails = ["m@example.com", "m@google.com", "m@support.com"];
    string? selectedEmail = "m@support.com";
}

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ShadcnInspired</title>
    <base href="/" />
    <link rel="stylesheet" href="css/app.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link href="manifest.webmanifest" rel="manifest" />
    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
    <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
    <link href="ShadcnInspired.styles.css" rel="stylesheet" />
    <link href="_content/Sysinfocus.AspNetCore.Components/styles.css" rel="stylesheet" />
    <link href="_content/Sysinfocus.AspNetCore.Components/Sysinfocus.AspNetCore.Components.bundle.scp.css" rel="stylesheet" />
</head>

<body class="light blue">
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script>navigator.serviceWorker.register('service-worker.js');</script>
</body>

</html>

Sysinfocus commented 1 month ago

In your css/app.css file add the following at the top and see if it fixes:

{ margin: 0; padding: 0; box-sizing: border-box; }

russkyc commented 1 month ago

Tried with the following scenarios:

Add to app.css, keep existing contents, re-run and clear caches: issue persists
Add to app.css, remove other contents, re-run and clear chaches: issue persists

Sysinfocus commented 1 month ago

It is definitely the padding issue, can you inspect with developer tools what is adding those padding from?

russkyc commented 1 month ago

Layout information from dev tools:

Newly observed behavior: Adding tailwind cdn seems to fix the issue

Sysinfocus commented 1 month ago

There is definitely some css overriding it as the height should be 32px pixels but in your case it is showing 48px.

russkyc commented 1 month ago

Other things tried that did not fix the issue:

Removing all css (references and including scoped css)
Testing in multiple browsers (Chrome, Edge, Firefox)

Extra padding stays, which is weird and only fixed by adding in the tailwind cdn

Sysinfocus commented 1 month ago

This looks specific to your environment as we haven't entered any issues like this before, unless someone has explicitly modified the css. I am closing this issue as it is not related to the library as such. Feel free to open a new one, if you think it is related to library.

russkyc commented 1 month ago

Understandable, for the meantime I'll go with the tailwind css fix and see if this can be reproducible in other environments

Sysinfocus / simple-ui