Vertical align works well on Chrome but not working on Firefox

user_11378528 0
Viewed 133

This example works great on Chrome but not working as expected on Firefox.

We're using IBM BPM for making form-based web applications. We can't change html codes in BPM. So that we have to do this with CSS. Sorry :/ How can I solve this issue with css?

textarea {
    padding: 10px 0px;
    height: 150px;
}

.form-control {
    display: block;
    /* Remove this line */
}

.alignJustify>.layoutSec.hChild>.layoutCell {
    display: table-cell
}

.layoutSec.valignTop>.layoutCell {
    vertical-align: baseline
}

.CoachView_invisible {
    visibility: hidden !important
}
<div class="alignJustify">
    <div class="layoutSec valignTop hChild">
        <div class="layoutCell">
            <div>
                Label
                <div class="input">
                    <p id="input-readonly">
                    </p>
                </div>
            </div>
        </div>
        <div class="layoutCell">
            <div>
                <div class="input">
                    <textarea class="form-control" aria-multiline="true">Content</textarea>
                </div>
            </div>
        </div>
    </div>
</div>

Minimal example would be:

div {
  display: table-cell;
  outline: 1px solid;
}

textarea {
  display: block;
  min-height: 150px;
  padding: 10px 0px;
}
<div>
  Label
</div>
<div>
  <textarea>Content</textarea>
</div>

Rendered outcomes:

Chrome 77 Firefox 82

vertical-alignment firefox google-chrome css html
1 Answers

You need to match the paddings in textarea and in the label. Vertically you should align to top.

textarea {
    padding: 10px 0px;
    height: 150px;
}

.form-control {
    display: block;
    /* Remove this line */
}

.layoutSec.valignTop .layoutCell {
    display: inline-block;
    vertical-align: top;
}
.layoutSec.valignTop .layoutCell:first-child {
    padding-top: 10px;
}

.CoachView_invisible {
    visibility: hidden !important
}
<div class="alignJustify">
    <div class="layoutSec valignTop hChild">
        <div class="layoutCell">
            <div>
                Label
                <div class="input">
                    <p id="input-readonly">
                    </p>
                </div>
            </div>
        </div>
        <div class="layoutCell">
            <div>
                <div class="input">
                    <textarea class="form-control" aria-multiline="true">Content</textarea>
                </div>
            </div>
        </div>
    </div>
</div>

user_51739360
Related