Wrong visualization on Firefox 80.0.1

[TorakikiSan]

Hi Olton!

After updated Firefox to 80.0 version, some compatibility issues occurred with the latest version of Metro, 4.3.10, (also with 4.4). Code:

<DIV class="row mb-2">
   <DIV class="cell-2 offset-1">
      <LABEL class="text-bold fg-grayBlue" for="MACHINE">Machine</LABEL>
      <INPUT id="MACHINE" name="machine" class="input-small" data-cls-input="text-bold" data-role="input" data-validate="maxlength=50" data-default-value="mrdo" />
   </DIV>
   <DIV class="cell-3">
      <LABEL class="text-bold fg-grayBlue" for="DESCRIPTION">Description</LABEL>
      <INPUT id="DESCRIPTION" name="description" class="input-small" data-cls-input="text-bold" data-role="input" data-validate="maxlength=100" data-default-value="Mr. Do!" />
   </DIV>
</DIV>

and is displayed like this

The Description field is perfect, while Machine is missing the right side of the field and the cross to clear the field is below the Description field.

If I remove

data-cls-input="text-bold"

from Machine field, this is displayed like

The cross to clear the field is in the middle of the two fields Machine and Description and the right side of the field is closed correctly.

The problem also occurs with fields with data-role = "calendarpicker". Code

   <DIV class="cell-2">
      <LABEL class="text-bold fg-grayBlue" for="LAST_RUN">Last Run</LABEL>
      <INPUT id="LAST_RUN" name="last_run" class="input-small"
             data-role="calendarpicker"
             data-cls-input="text-bold"
             data-cls-calendar-header="bg-grayBlue"
             data-cls-calendar="compact"
             data-clear-button="true"
             data-format="%d/%m/%Y"
             data-input-format="%d/%m/%Y"
             data-default-value="" />
   </DIV>

Displayed as

The problem appears to occur with class = "cell-2" or less.

In your opinion, is it a Firefox problem?

[olton]

Firefox used min-width=200 for input. I fixed it in 4.4.0. For 4.3.10 you can add global style:

<style>
.input input {
    min-width: 0;
}
</style>

[olton]

Example for 4.4.0 https://codepen.io/olton/pen/KKzedKW

[TorakikiSan]

Thank you very much!