Less explicit CSS Width:100% rule overriding more explicit rules

Question

I have some rendered HTML (see below). I want the first span element to have a width of 300px.

<div style="display:inline-block">
  <div id="songFields">
    <div>
      <label for="Description">Title</label>
      <span class="k-input k-textbox selectText k-input-solid k-input-md k-rounded-md" style="">
        <input class="selectText k-input-inner" id="Description" name="Description" value="Shy Boy" data-role="textbox" aria-disabled="false" autocomplete="off" style="width: 100%;">
      </span>
      <script>
        kendo.syncReady(function() {
          jQuery("#Description").kendoTextBox({
            "value": "Shy Boy"
          });
        });
      </script>
      <span class="field-validation-valid" id="Description_validationMessage" style="padding-left:20px"></span>
    </div>
    <!-- Continued -->
  </div>
</div>
    </div>

I have created a very specific style rule to set the width at 300px.

#songFields > div > span.k-input.k-textbox {
    width: 300px;
}

There happens to be another generic rule in a different css file:

.k-input,.k-picker {
    margin: 0;
    padding: 0;
    width: 100%;

Chrome recognizes that my style rule applies to the element, but decides to make the width 100% due to the less explicit style rule! (See the picture from the Chrome dev tools)

If I go into kendo.common-bootstrap.css and comment out the width:100% rule then my rule applies. But my rule should apply anyway because my selector #songFields > div > span.k-input.k-textbox is more explicit than .k-input, .k-picker. Why would Chrome be applying the rule from less explicit selector?

I have tested this in Firefox, and Firefox is using my rule as I would expect. Is this a Chrome bug?

@kmoser: Yes I have. I even tried appying it directly as a style attribute on the element. — Andrew Shepherd, Jun 02 '23 at 05:43
there is an inline style applying width: 100% in the code you shared so yes width:100% will apply (probably added by a script) — Temani Afif, Jun 02 '23 at 08:48
`.k-textbox` is a `` tag, which by default is `display: inline`. You can't set the `width` of such a tag so easily: https://stackoverflow.com/questions/1423294/setting-the-width-of-inline-elements — kmoser, Jun 02 '23 at 16:55

score 0 · Answer 1 · answered Jun 09 '23 at 02:26

The problem was due to a CSS rule I had neglected to put in that question. The elements had the display set to table, table-row, and table-cell. In this case, whatever is the widest element gets to set all of the others.

Here is a simple example of what I was experiencing.

<div style="display:table">
  <div style="display:table-row">

    <span style="border:1px solid black;width:200px;display:table-cell">
        This has a width set to 200px
    </span>
  </div>
   <div style="display:table-row">
    <span style="border:1px solid black;width:400px;display:table-cell">
            This has a width set to 400px
    </span>
  </div>
</div>

Less explicit CSS Width:100% rule overriding more explicit rules

1 Answers1