После псевдоэлемента скрывается при использовании Flexbox - PullRequest
Новая
       12

После псевдоэлемента скрывается при использовании Flexbox

1 голос
/ 08 ноября 2019

Мне нужно два деления, занимающих 100% ширины, в идеале 50% каждый (но я гибкий). Со стрелкой, отображаемой ниже на активной вкладке.

Функция flex-grow в flexbox, похоже, не влияет на размещение стрелки после псевдоэлемента. В полноэкранном режиме вы можете видеть стрелку, но когда флик-растущие удары в стрелке остаются на месте и скрыты цветом фона.

https://codepen.io/sherrylking/pen/MWWXEBv

.qo-tab-section {
    display: flex;
}

.qo-tab-section div {
    padding: 20px 20px 20px 20px;
    flex-basis: 50%;
}

.qo-active-tab:after {
    content:'';
    position: relative;
    border-style: solid;
    border-width: 20px 20px 0;
    border-color: #027777 transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: 43px;
}

arrow hidden

1 Ответ

1 голос
/ 08 ноября 2019

Проблема в том, что вы используете top: 43px, который в качестве фиксированной позиции не позволяет стрелке корректировать свое положение относительно гибкого элемента при изменении его размера.

Вместо этого используйте абсолютное позиционирование настрелка и относительное положение для установки содержащего блока.

Добавьте это к своему коду: 

.qo-tab-section div {
    padding: 20px 20px 20px 20px;
    flex-basis: 50%;

    /*new */
    position: relative;
}

.qo-active-tab:after {
    content:'';
    /* position: relative; */
    border-style: solid;
    border-width: 20px 20px 0;
    border-color: #027777 transparent;
    /* display: block; */ /* not necessary */
    width: 0;
    z-index: 1;
    /* top: 43px; */

    /* new */
    position: absolute;
    top: 100%;
    left: 0;
}


.qo-tab-section {
  display: flex;
}

.qo-tab-section div {
  padding: 20px 20px 20px 20px;
  flex-basis: 50%;
  /*new */
  position: relative;
}

.qo-active-tab {
  color: white;
  background-color: #027777;
}

.qo-active-tab:after {
  content: '';
  /* position: relative; */
  border-style: solid;
  border-width: 20px 20px 0;
  border-color: #027777 transparent;
  /* display: block; */ /* not necessary */
  width: 0;
  z-index: 1;
  /* top: 43px; */
  /* new */
  position: absolute;
  top: 100%;
  left: 0;
}

.qo-purchase-area {
  background-color: #E4F6F9;
  overflow: auto;
  padding: 25px 15px 15px 15px;
  margin-top: -15px;
}

.qo-purchase-amount {
  font-weight: bold;
  font-size: 2em;
}

.float-l {
  float: left;
}

.float-r {
  float: right;
}

.qo-container {
  border: solid 3px #027777;
  padding: 15px;
}

.h1-small {
  font-size: .6em;
}

.main-button-not-selected {
  background-color: #EDEDED;
  color: #999999;
  border: solid 1px #999999;
}

.margin-r-15 {
  margin-right: 15px;
}

.qo-helptip {
  width: 20px;
  margin-bottom: 5px;
}

.qo-coverage-amount {
  background-color: #F7F6F6;
  padding-top: 15px;
  padding-bottom: 15px;
}

.qo-coverage-amount input {
  font-size: 2.35em;
  width: 6em;
  text-align: center;
}

.qo-coverage-alignment {
  float: left;
}

.qo-coverage-clear {
  padding: 5px;
  line-height: 45px;
}

.cov-a-warning:before {
  content: url("exclamation-triangle.svg");
  width: 20px;
  position: absolute;
  left: 13px;
}

.cov-a-warning {
  margin-left: 26px;
}

.qo-coverage-title {
  font-size: 1.4em;
  font-weight: bold;
}

.qo-section-body {
  font-size: 1.7em;
  padding-bottom: 120px;
  text-align: center;
}
<div class="qo-tab-section">


  <div><span class="qo-coverage-title">Title Here</span>
    <br> This content is longer than the other box. This content is longer than the other box. This content is longer than the other box. This content is longer than the other box. This content is longer than the other box. </div>


  <div class="qo-active-tab"><span class="qo-coverage-title">Title Here </span><br> small discription goes here.</div>

</div>

<div class="qo-container">

  <div class="row form-group qo-purchase-area">
    <div class="float-l qo-purchase-amount margin-r-15">$134.67 / month
    </div>

    <div class="float-l margin-r-15">please note that the arrows shows under the active tab in full screen but when the flexgrow kicks into effect the possitioning of the after not longer works well. The extra growth is not considered.
    </div>

    <div class="float-r">
      <button class="main-button" type="button">Purchase</button>
    </div>


  </div>
</div>

jsFiddle demo

...