CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromefirefox
Reza
Reza

Reputation: 3919

Height of "input" with "white-space:pre-wrap" in Firefox Android is bigger than Chrome in Android

Please take a look at the following simplified version of this bug:

.wrap {
  white-space: pre-wrap;
}
<div>
<input type="date" class="wrap">
</div>

If you open this code it Firefox Android (latest version), you could see that the height is bigger than what it is in Chrome.

Firefox

Chrome

The problem is because of "white-space: pre-wrap". I don't know why it cause the height to be bigger. Could someone explain it to me and a possible solution or alternative for it. By the way, I don't want to set a fixed height for my input.

Upvotes: 5

Views: 1369

Answers (3)

Tom
Tom

Reputation: 101

<div> <--linebreak
>whitespace<.innerHTML <-- linebreak
</div>

Those linebreaks and whitespace do make your element stretch because you have preserved them in the .innerHTML with {white-space: pre;}

<div>.innerHTML</div>
-or-
elem.innerHTML = elem.innerHTML.trim()

Fixes the issue for elements with a </closing tag>

However,

<input type="date" id="wrap" value='2021-12-06'>

has no .innerHTML nor a closing tag. Its value has no whitespace.

element contents, not reflected in inspector, being clipped by {max-height: 20px} rule

element's displayed contents, not reflected in inspector, being clipped by {max-height: 20px} rule

I have looked for a way to access the displayed contents of this tag, but couldn't find one. I would advise against using default input tags and to use js solution instead. Default input fields are known to be hard to predict and stylize across devices.

Upvotes: 0

Brebber
Brebber

Reputation: 3054

It seems you found an interesting bug in Firefox.

A. First of all a suggested(!) solution

SIMPLY: Don't use whitespace: pre-wrap to <input type="date"> or <input type="time">. You still do not need this ... and obviously the browser developer don't expect anyone doing so that that behavior has not been not found yet by the developers.

It is really hard to imagine any reason or scenario why the property whitespace: pre-wrap needed to be used to that element. The date do not flow to next line on its own.

B. The background (the why you asked for)

Elements with included functionality like date-/time-picker have additional hidden inner elements. For <input type="date" the normally not seen structure is as follow:

<div id="input-box-wrapper" class="datetime-input-box-wrapper">
    <span id="edit-wrapper" class="datetime-input-edit-wrapper"></span>
    <button id="reset-button" class="datetime-reset-button"></button>
</div>

// you can see this normally hidden structure in Firefox using the developer tools
// when 'white-space: pre-wrap' is set to the element ...

The CSS for that elements is placed in the browser integrated styles you normally cannot access/overwrite by css/js. Especially it is not possible in Firefox as there is no by the developers intendend way to remove the date/time behavior in Firefox at all.

If you don't want to use the browser integrated mechanic in firefox use a text field and add a date picker extension i.e. by jQuery. (Could be a workarround for you as well!?)

As further information here is the browser integrated CSS for the integrated hidden elements:

// file: datetimebox.css
// you may have a look on them using Firefox dev tools as well

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@namespace url("http://www.w3.org/1999/xhtml");
@namespace svg url("http://www.w3.org/2000/svg");

.datetimebox {
  display: flex;
  /* TODO: Enable selection once bug 1455893 is fixed */
  user-select: none;
}

.datetime-input-box-wrapper {
  display: inline-flex;
  flex: 1;
  background-color: inherit;
  min-width: 0;
  justify-content: space-between;
  align-items: center;
}

.datetime-input-edit-wrapper {
  overflow: hidden;
  white-space: nowrap;
  flex-grow: 1;
}

.datetime-edit-field {
  display: inline;
  text-align: center;
  padding: 1px 3px;
  border: 0;
  margin: 0;
  ime-mode: disabled;
  outline: none;
}

.datetime-edit-field:not([disabled="true"]):focus {
  background-color: Highlight;
  color: HighlightText;
  outline: none;
}

.datetime-edit-field[disabled="true"],
.datetime-edit-field[readonly="true"] {
  user-select: none;
}

.datetime-reset-button {
  color: inherit;
  fill: currentColor;
  opacity: .5;
  background-color: transparent;
  border: none;
  flex: none;
  padding-inline: 2px;
}

svg|svg.datetime-reset-button-svg {
  pointer-events: none;
}

Bringing all together:

The real problem is the integrated element .datetime-reset-button. Prove it on your own: using white-space: pre-wrap for the input let 'grow' that reset button wrapper element to the however given height. If you now add a display: none (in Firefox direct) in the browser integrated style to that element the behavior of the input the element is removed and the size of the input changes back to normal state.

So, - white-space: pre-wrap changes the behavior for the field and preserves place for sequences of white space (more details: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space). Normal behaviour is, that the property display: inline-flex from the parent element of the reset-button-container let the container flow inline and flow to the next line. If you set white-space: wrap you can see the button in the next line below the input field. (Seeing this seems to be a bug as well.) But with pre-wrap the flow is not longer possible and the button is pressed in the field ... and let grow it higher.

Upvotes: 3

ARNON
ARNON

Reputation: 1217

When you use white-space: pre-wrap, Safari preserves sequences of white space.

The simplest solution is:

.wrap {
  white-space: none;
  white-space: -moz-none;
}

I recommend you to check CSS-Tricks.

Upvotes: 0

Related Questions