admin管理员组

文章数量:1312926

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>

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>

  • javascript
  • html
  • css
  • flexbox
Share Improve this question edited Dec 31, 2016 at 4:24 fiddlest asked Dec 30, 2016 at 19:58 fiddlestfiddlest 1,3022 gold badges19 silver badges44 bronze badges 2
  • Since your text overlaps, even in Chrome, could you post a picture showing the wanted result? – Asons Commented Dec 30, 2016 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 Commented Dec 31, 2016 at 1:26
Add a ment  | 

2 Answers 2

Reset to default 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>

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>

本文标签： javascriptFlex with absolute positioning does not work in safariStack Overflow

版权声明：本文标题：javascript - Flex with absolute positioning does not work in safari - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741906673a2404187.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。