Adding a label to my css flexbox (using spectre framework) causes overlap

user_15771314 0
Viewed 25

I'm trying to create a "hat" with two textarea columns using the spectre.css framework. The intent is to have them resize depending on the size of the screen, with anything lower than 600px making the columns stacked on top of each other. I can do this just fine with the framework as long as the textarea doesn't have an associated label. However, with a label, it breaks - the textarea overlaps the current column space at the bottom. As far as I can tell, the label is not being factored in when calculating the size of the column and I don't know why. How do I fix this?

*, ::before, ::after {
  box-sizing: border-box;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: .4rem;
  padding-right: .4rem;
  width: 100%;
}

.columns {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -.4rem;
  margin-right: -.4rem;
}

.column {
  -ms-flex: 1;
  flex: 1;
  max-width: 100%;
  padding: .25rem;
}

.col-12,
.col-11,
.col-10,
.col-9,
.col-6 {
   -ms-flex: none;
    flex: none;
}

.col-12 {
  width: 100%;
}

.col-10 {
  width: 83.33333333%;
}

.col-9 {
  width: 75%;
}

.col-6 {
  width: 50%;
}

@media (max-width: 600px) {
  #hattop {
    height: 35vh;
  }
  
  .column.col-sm-12,
  .column.col-sm-11 {
   -ms-flex: none;
    flex: none;
  }
  
 .col-sm-12 {
    width: 100%;
  }
  
  .col-sm-11 {
    width: 91.66666667%;
  }
}

.col-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.col-ml-auto {
  margin-left: auto;
}

.col-mr-auto {
  margin-right: auto;
}

.form-label {
  color: #fff;
}

.form-input {
  appearance: none;
  background: #fff;
  border: .05rem solid #5755d9;
  border-radius: 10px;
  color: #3b4351;
  max-width: 100%;
  padding: .25rem .4rem;
  position: relative;
  transition: background .2s, border .2s, box-shadow .2s, color .2s;
  width: 100%;
  word-wrap: anywhere;
}

textarea {
  overflow: auto;
  resize: none;
}

textarea.form-input {
  height: 100%;
  width: 100%;
}

#hattop {
  background-color: rgb(31, 26, 44);
  padding: 1rem .5rem;
  height: 50vh;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

@media (max-width: 600px) {
  #hattop {
    height: 35vh;
  }
}
<div class="container">
    <div class="columns col-sm-11 col-10 col-mx-auto">
        <div id="hattop" class="columns col-9 col-mx-auto">
            <div class="column col-sm-12 col-6 col-ml-auto">
                <label for="nams" class="form-label">Enter names separated by line</label>
                <textarea class="form-input" id="names" placeholder="Names"></textarea>
            </div>
            <div class="column col-sm-12 col-6 col-mr-auto">
                <label for="tasks" class="form-label">Enter tasks separated by line</label>
                <textarea class="form-input" id="tasks" placeholder="Tasks"></textarea>
            </div>
        </div>
    </div>
</div>

spectre.css flexbox css html
1 Answers

Figured it out. The #hattop height attribute along with the textarea height attribute being 100% meant the textarea was going to always be the full height of the hattop, not factoring in the label.

I took out the #hattop height attribute. Then I changed the textarea height attribute to 50vh for when the screen is bigger than 600px, and 20vh for when the screen is smaller than that. It's basically the same size as the previous version but actually responsive now!

*, ::before, ::after {
  box-sizing: border-box;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: .4rem;
  padding-right: .4rem;
  width: 100%;
}

.columns {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -.4rem;
  margin-right: -.4rem;
}

.column {
  -ms-flex: 1;
  flex: 1;
  max-width: 100%;
  padding: .25rem;
}

.col-12,
.col-11,
.col-10,
.col-9,
.col-6 {
   -ms-flex: none;
    flex: none;
}

.col-12 {
  width: 100%;
}

.col-10 {
  width: 83.33333333%;
}

.col-9 {
  width: 75%;
}

.col-6 {
  width: 50%;
}

@media (max-width: 600px) {

  .column.col-sm-12,
  .column.col-sm-11 {
   -ms-flex: none;
    flex: none;
  }
  
 .col-sm-12 {
    width: 100%;
  }
  
  .col-sm-11 {
    width: 91.66666667%;
  }
}

.col-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.col-ml-auto {
  margin-left: auto;
}

.col-mr-auto {
  margin-right: auto;
}

.form-label {
  color: #fff;
}

.form-input {
  appearance: none;
  background: #fff;
  border: .05rem solid #5755d9;
  border-radius: 10px;
  color: #3b4351;
  max-width: 100%;
  padding: .25rem .4rem;
  position: relative;
  transition: background .2s, border .2s, box-shadow .2s, color .2s;
  width: 100%;
  word-wrap: anywhere;
}

textarea {
  overflow: auto;
  resize: none;
}

textarea.form-input {
  height: 40vh;
  width: 100%;
}

@media (max-width: 600px) {
    textarea.form-input {
    height: 20vh;
  }
}


#hattop {
  background-color: rgb(31, 26, 44);
  padding: 1rem .5rem;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
<div class="container">
    <div class="columns col-sm-11 col-10 col-mx-auto">
        <div id="hattop" class="columns col-9 col-mx-auto">
            <div class="column col-sm-12 col-6 col-ml-auto">
                <label for="nams" class="form-label">Enter names separated by line</label>
                <textarea class="form-input" id="names" placeholder="Names"></textarea>
            </div>
            <div class="column col-sm-12 col-6 col-mr-auto">
                <label for="tasks" class="form-label">Enter tasks separated by line</label>
                <textarea class="form-input" id="tasks" placeholder="Tasks"></textarea>
            </div>
        </div>
    </div>
</div>

user_157713140
Related