0

I am developing an application using ASP .NET Core and Razor pages. On one page I have some simple drop-down lists with just two elements that I want to be have the width set to just accommodate the largest element and no bigger, which I have set with the max-width property. When I click on one of the select components it expands to be wider than the value I have set it to and stays that way whilst it has the focus. When it loses the focus it reverts to the size I want it to be.

The select component is defined like this (it is inside a table):

    <tr>
        <td>
            <div>
                <label>Order: </label>
                <select name="tenseorder" class="selectA" asp-items="@Model.tenseorder" asp-for="@Model.seltenseorder"></select>
            </div>
        </td>
    </tr>

The values in the drop-down list are created list this:

    public List<SelectListItem> tenseorder                          // What order does the user want to practice in?
        {
            get
            {
                return new List<SelectListItem>
                {
                    new SelectListItem { Value = Convert.ToString(0, CultureInfo.InvariantCulture), Text = "sequential" },

                    new SelectListItem { Value = Convert.ToString(1, CultureInfo.InvariantCulture), Text = "random" 
                }
            };
        }
    }

The css looks like this (other than the max-width parameter, everything in the css file is fixes I have tried from research I have done):

/* Drop-down lists */
    .selectA {
        max-width: 110px;
        padding: 0px;
        margin: 0px;
        display: inline-block;
        vertical-align: top;
        overflow-y:hidden;
        white-space: normal;
    }
    .selectA select:focus {
        max-width: 110px;
        padding: 0px;
        margin: 0px;
        display: inline-block;
        vertical-align: top;
        overflow-y: hidden;
        white-space: normal;
    }

Here is screen shot showing what is happening with the select components on the page - you can see the left-hand component selected is wider than the other two: Screen shot of select components in action.

I have read a lot of answers about re-sizing select components and lot about css syntax and as you can see from the css above I have tried a lot of these, e.g. here , here, here, here, and here, but nothing has worked so far.

I am very new to this and self-teaching so assume I am missing something obvious. Can anyone tell me how I configure the select component so that it doesn't change width when selected?

Thanks.

Twelve1110
  • 175
  • 12
  • I tested the code , but all dropdownlists showed the same. It seems to be related to some of your other css . You could press F12 to inspect if the css style of each select element is different. Could you share a complete demo that can reproduce the issue if you need community assistance? – Xueli Chen Apr 15 '20 at 08:37
  • Ok, it might take me a while to build a demo cos I'm a newbie, but I'll give it a go. :) Can I just check, when you say that "all dropdowns showed the same" - I am not expecting them to behave differently to each other. They are all behaving the same way and have the same problem, i.e. increasing the width when selected and then decreasing again when not selected. Are you not seeing that behaviour or are you seeing it the same on all dropdowns? – Twelve1110 Apr 15 '20 at 17:00
  • Oh dear. {face palm} As I was cropping my project to post a demo of the problem I noticed some `css` styling that I had put at the top of my razor page to fix another problem I had had some time ago. When I comment this out my dropdowns work perfectly. Egg. On. My. Face. Thank you for pointing me in the right direction. :) – Twelve1110 Apr 15 '20 at 18:20

1 Answers1

0

css styling can be internal for a given the html on a page view and external in the file site.css, which is global for the project. The internal styling takes precedence over the external styling and, in my case, internal styling was over-riding changes to the site.css file. For this reason, any changes to site.css were not being reflected in the web view for the page.

Twelve1110
  • 175
  • 12