CODEWITHSUNDEEP
javascripthtmlcssflexbox
fiddlest
fiddlest

Reputation: 1302

Flex with absolute positioning does not work in safari

I am trying to make a text slider with flexbox.

I want all the child element under the question div to be collapsed like the one you seeing in the chrome.

In the real code, inactive element will be set to translateX(100%) and active index element to 0%.

The reason why I want to use flexbox is that Ques*: should be aligned with first line of the question text and text-container div should be center of the question div no matter what length is the q-text div. ( Tried without flex but I could not align Quest* and first line of text )

Like the sample code, it has different center position due to text length difference.

In the Chrome it works fine. However, it is not centered in Safari ( using latest version of Safari ).

If there is better way to achieve this, I am happy to see ! 

#container {
  width: 100%;
  height: 200px;
  background: black;
}

.question {
  display: -webkit-flex;
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  -webkit-justify-content: center;
  -webkit-align-items: center;
}

.text-container {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  position: absolute;
  color: white
}

.q {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-justify-content: center;
  -webkit-align-items: center;
  align-self: baseline;
}
.q-text {
  width: 75%;
  padding-right: 12%;
}
<html>

  <body>

    <div id="container">
      <div class="question">
        
        <div class="text-container">
          <div class="q">
            Qest1:
          </div>
          <div class="q-text">
            1Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type an
          </div>

        </div>
         <div class="text-container">
          <div class="q">
            Qest2:
          </div>
          <div class="q-text">
            2Lorem Ipsum is simply dummy text of the printing and ty
          </div>

        </div>
         <div class="text-container">
          <div class="q">
            Qest3:
          </div>
          <div class="q-text">
            3Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
          </div>

        </div>
        
      </div>

    </div>
  </body>

</html>

text 1

text 2

Upvotes: 4

Views: 15669

Answers (2)

Geeky
Geeky

Reputation: 7496

I guess you want all the questions to be centered and they should appear one after the other.

Few things here, Flexbox and positioning does not work well together. Check this link for reference: flex and absolute positioning

If you want all the divs to be absolutely positioned wrap each text-container div with a div and make it absolutely positioned.

Check the following snippet:

#container {
  width: 100%;
  height: 200px;
  background: black;
}

.question {
  display: -webkit-flex;
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-justify-content: center;
  -webkit-align-items: center;
}
.abs{
  position:absolute;
  
  color:red;
}

.text-container {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  color: white
}
.q {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-justify-content: center;
  -webkit-align-items: center;
  align-self: baseline;
}
.q-text {
  width: 75%;
  padding-right: 12%;
}
<html>

<body>

  <div id="container">
    <div class="question">
      <div class="abs">
         <div class="text-container">
        <div class="q">
          Qest1:
        </div>
        <div class="q-text">
          1Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type an
        </div>

      </div>
      </div>
   
      
      <div class="abs">
       <div class="text-container">
        <div class="q">
          Qest2:
        </div>
        <div class="q-text">
          2Lorem Ipsum is simply dummy text of the printing and ty
        </div>

      </div>
      </div>
     
      <div class="abs">
       <div class="text-container">
        <div class="q">
          Qest3:
        </div>
        <div class="q-text">
          3Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
        </div>

      </div>
      </div>
     

    </div>

  </div>
</body>

</html>

Upvotes: 1

Asons
Asons

Reputation: 87201

Here is one option, using display: inline-block instead of flexbox, and transform: translate.

window.addEventListener('load', function() {
  document.querySelector('button').addEventListener('click', function() {
    var ques = document.querySelector('.text-container:not(.hidden)');
    ques.classList.toggle('hidden');    
    var next = ques.nextElementSibling;
    if (next) {
      next.classList.toggle('hidden');
      return;
    }
    document.querySelector('.text-container').classList.toggle('hidden');
  })
})
.container {
  height: 160px;
  background: black;
}
.question {
  position: relative;
  margin: 0 auto;
  width: 90%;
  height: 100%;
  overflow: hidden;
}
.text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%,-50%);
  color: white;
  transition: left 0.5s;
}
.text-container.hidden {
  left: -50%;
}
.q {
  display: inline-block;
  width: 20%;
  vertical-align: top;
}
.q-text {
  display: inline-block;
  width: 80%;
  vertical-align: top;
  padding-right: 12%;
  box-sizing: border-box;
}
button {
  margin: 15px 0;
  padding: 10px;
}
<div class="container">
  <div class="question">

    <div class="text-container">
      <div class="q">
        Qest1:
      </div><div class="q-text">
        1Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type an
      </div>
    </div>

    <div class="text-container hidden">
      <div class="q">
        Qest2:
      </div><div class="q-text">
        2Lorem Ipsum is simply dummy text of the printing and ty
      </div>
    </div>

    <div class="text-container hidden">
      <div class="q">
        Qest3:
      </div><div class="q-text">
        3Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
      </div>
    </div>

  </div>
</div>
<button>Next question</button>

Upvotes: 3

Related Questions