0

I have a problem with Firefox on a really specific graphic implementation.

I think you may understand the problem just by testing this fiddle: on firefox you'll see the problem, on any other browser you'll see the expected result (including IE9).

Design I need:

PNG illustration

  • I have a main block (dashed border) with a fixed width.
  • There is 2 lines, one above the other, within the main block. The 2 lines must be align on the right of the main block
  • Each line contains 2 children. The left ones have a dynamic text (gray background), the right ones are optionnals (blue background). The above right one contains an icon (orange) with a fixed width, the bellow right one is a dynamic temperature (with one decimal maximum).
  • Blocks are separated by a fixed 5px margin.
  • Texts and icon must be vertically centered.
  • In any case, the 2 lines need to have the same width: the smaller one takes the width of the bigger one.
  • If one line (or both) becomes too large for the main block, the left text (gray background) automatically linebreak.

HTML Code: 

<div class="main-wrapper">
  <div class="container">
    <div class="content upper">
      <div class="right-block"><!-- This block is optionnal -->
        <div class="icon"></div>
      </div>

      <div class="left-block">
        <div class="vertically-centered">
          <p>
            Some dynamic text
          </p>
        </div>
      </div>
    </div>

    <div class="content lower">
      <div class="right-block"><!-- This block is optionnal -->
        <div class="vertically-centered">
          <span>
            21,5°
          </span>
        </div>
      </div>

      <div class="left-block">
        <div class="vertically-centered">
          <p>
            Some other dynamic text
          </p>
        </div>
      </div>
    </div>

  </div>
</div>

CSS Code: 

/* utilities */
.vertically-centered {
  display: table;
  height: 100%;
  width: 100%;
}
.vertically-centered > * {
  display: table-cell;
  vertical-align: middle;
}

/* custom styles */
.container {
  display: inline-block;
  float: right;
  max-width: 100%;
}
.content {
  width: 100%;
  margin: 5px 0px;
  height: 85px;
}
.right-block, .left-block {
  height: 100%;
}
.right-block {
  float: right;
  font-size: 42px;
  margin-left: 5px;
  background-color: lightblue;
}
.left-block {
  font-size: 25px;
  line-height: 25px;
  overflow: hidden;
  padding: 0 20px;
  text-align: left;
  background-color: lightgray;
}

.upper .right-block {
  width: 85px;
}
.lower .right-block {
  padding: 0 15px;
}
.icon {
  position: relative;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  background-color: orange;
}

What I already tried:

  • Put a display: inline-block on the .left-block div, as suggested here, but it doesn't satisfy the need to have the same width on both lines.
  • Put a display: inline-block on the .content div; makes the line 100% width on other browsers, and create a big right gap within the .left-block on firefox.
  • Use white-space: nowrap on the .left-block; didn't help.
  • Make the .left-block div floating (right or left), but it doesn't work if the text is too large for the main container

And a lot of other things but not a single one compatible with all the browsers (Chrome, Firefox, Safari, IE9+, Edge)...

A precision although I don't think it will change anything: it is responsive.

I'm trying something with flexbox but... IE9... If anybody has a suggestion.

Community
  • 1
  • 1
Guillaume Girard
  • 1
  • 4

2 Answers2

0

You can use the CSS word-break property to allow line breaks in the middle of long words:

.content {
 width: 100%;
 margin: 5px 0px;
 height: 85px;
 word-break: break-all;
}
shipshape
  • 1,682
  • 2
  • 17
  • 33
  • I thought about it but the text has to be on one line as much as possible. It has to take 2 lines only if it's too long to be entirely visible on a single line. – Guillaume Girard Jan 20 '17 at 08:55
0

I found out a solution with flexbox!

I added a display: flex to the .content div with flex-direction: row-reserve to keep the order of the element and still be able to use float: right for IE9.

In addition, there is a flex: auto property on .left-block divs to take as much space as possible (Note: IE11 needs flex-basis to be set to be able to calculate the space wanted by the flex-grow property. That's why I used auto instead of 0 on the flex property. See details)

The completed CSS code 

.content {
  width: 100%;
  margin: 5px 0px;
  height: 85px;
  display: flex; /* Initialize flexbox */
  flex-direction: row-reverse; /* keep the order of the element */
  border: 1px dashed gray;
}
.left-block {
  font-size: 25px;
  line-height: 25px;
  overflow: hidden;
  padding: 0 20px;
  text-align: left;
  background-color: lightgray;
  flex: auto; /* the text blocks take all the available space */
}

Here's the fiddle with the correction. Sometimes IE9 takes 2 lines of text instead of 1 (the text is 2px larger that the container, I don't know why...) but atleast it's readable!

Guillaume Girard
  • 1
  • 4