4

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

fiddlest
  • 1,262
  • 2
  • 17
  • 42
  • Since your text overlaps, even in Chrome, could you post a picture showing the wanted result? – Asons Dec 30 '16 at 22:56
  • I want all the things overlap. So that I can set all the inactive ones to translateX(100%) on load then slide one by one using js. But in the safari flex center does not work. – fiddlest Dec 31 '16 at 01:26

2 Answers2

3

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>
Asons
  • 84,923
  • 12
  • 110
  • 165
1

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>
halfer
  • 19,824
  • 17
  • 99
  • 186
Geeky
  • 7,420
  • 2
  • 24
  • 50
  • Thanks for the answer but I want all the things to be centered and overlaped like my sample snippet. but the divs are stacked not overlap. I am making slider. In real code there will be button so that you can move to next or previous. – fiddlest Dec 31 '16 at 01:33
  • Can you add a snapshot of how exactly you want the display to be – Geeky Dec 31 '16 at 02:38
  • My code snippet result is exactly what I want. The text containers are in different position which is centered in the black box. it is because text-container has different height. – fiddlest Dec 31 '16 at 04:11
  • Modified the code snippet...Confirm if this is what u r looking for – Geeky Dec 31 '16 at 05:02
  • Thank you for your effort but Qest2 is not aligned with other Qest* and the code does not work in safari ( 10 ) same as my code ... – fiddlest Dec 31 '16 at 06:07
  • Check this fiddle https://jsfiddle.net/pyeqzc7b/...Not sure if this is what you are looking for? – Geeky Dec 31 '16 at 07:48
  • but this does not work well in safari again because flex and positioning does not go together ..i suggest go for non-flex solution – Geeky Dec 31 '16 at 07:55