CODEWITHSUNDEEP
htmlcssflexbox
user3142695
user3142695

Reputation: 17352

Incorrect layout in IE11 using flexbox

I know there are a lot of bugs for flexbox in IE11 and I need some help to find the problem with the simple layout which I just made. I'm doing my development work on chrome...

This is not working on IE11 at all: https://codepen.io/anon/pen/ewwOGB

I was not successful with trying to "debug" the issue as I do not find the part which is causing the problem.

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.container.segment {
  padding: 0 !important;
  display: flex !important;
  height: 100%;
  max-height: 700px;
}

#navigation {
  height: 100%;
  width: 60px;
  border-radius: 3px;
}
#navigation .menu {
  writing-mode: tb;
  writing-mode: tb-rl;
  writing-mode: vertical-lr;
  writing-mode: sideways-lr;
  transform: rotate(180deg);
  text-align: right;
  border: 0 !important;
  margin: 2em 0;
}

.ui.attached.menu {
  width: 100% !important;
  max-width: 100% !important;
}

#image {
  height: 100%;
  width: 400px;
  background-color: #ccc;
}

#content {
  height: 100%;
  overflow-y: auto;
  flex: 1;
  padding: 2rem;
  border-radius: 3px;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
  </head>
  <body>

    <div class="parent">
      <div class="ui raised very padded container segment">
        <div id="navigation">
          <div class="ui attached stackable borderless menu">
            <a class="item">
              Item 1
            </a>
            <a class="item">
              Item 2
            </a>
            <a class="item">
              Item 3
            </a>
            <a class="item">
              Item 4
            </a>
            <a class="item">
              Item 5
            </a>
            <a class="item">
              Item 6
            </a>
          </div>
        </div>
        <div id="image"></div>
        <div id="content">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </body>
</html>

Upvotes: 8

Views: 264

Answers (3)

live627
live627

Reputation: 469

The problem here seems to be multiple writing-mode properties in your #navigation .menu rule. We only want to declare it twice: one for IE (how special!) and the other for everything else. We then don't need the rotation, as it seems to give different results in IE.

The cleaned code is then consistent between IE, Firefox, and Chrome.

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.container.segment {
  padding: 0 !important;
  display: flex !important;
  height: 100%;
  max-height: 700px;
}

#navigation {
  height: 100%;
  width: 60px;
  border-radius: 3px;
}
#navigation .menu {
  writing-mode: tb-rl;
  writing-mode: vertical-lr;
  text-align: right;
  border: 0 !important;
  margin: 2em 0;
}

.ui.attached.menu {
  width: 100% !important;
  max-width: 100% !important;
}

#image {
  height: 100%;
  width: 400px;
  background-color: #ccc;
}

#content {
  height: 100%;
  overflow-y: auto;
  flex: 1;
  padding: 2rem;
  border-radius: 3px;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
  </head>
  <body>

    <div class="parent">
      <div class="ui raised very padded container segment">
        <div id="navigation">
          <div class="ui attached stackable borderless menu">
            <a class="item">
              Item 1
            </a>
            <a class="item">
              Item 2
            </a>
            <a class="item">
              Item 3
            </a>
            <a class="item">
              Item 4
            </a>
            <a class="item">
              Item 5
            </a>
            <a class="item">
              Item 6
            </a>
          </div>
        </div>
        <div id="image"></div>
        <div id="content">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </body>
</html>

An excerpt from MDN on writing-mode:

vertical-lr Content flows vertically from top to bottom, horizontally from left to right. The next vertical line is positioned to the right of the previous line.

And one from TechNet:

tb-rl Content flows vertically from top to bottom, right to left. The next vertical line is positioned to the left of the previous line. Wide-cell glyphs are positioned upright; nonwide-cell glyphs (also known as narrow Latin or narrow Kana glyphs) are rotated 90° clockwise. This layout is used in East Asian typography.

Upvotes: 1

Soothran
Soothran

Reputation: 1243

Its working in my IE11 perfectly except one thing that the navigation items are aligned to the bottom of the parent div.

For that give this css to div with navigation ID

#navigation{
display: flex;
align-items: flex-start;
}

Still then if you are facing issues try adding IE compatibility meta tag

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

If it not solving, please share the IE screenshots

Upvotes: 2

Stefan F.
Stefan F.

Reputation: 608

Just add this to your code, shift the menu to the top by making the Link Elements Flex-Items and flex them to the right end:

   #navigation .menu {
       display: flex;
       justify-content: flex-end;
    }

Upvotes: 1

Related Questions