CODEWITHSUNDEEP
htmlcss
leyjl2
leyjl2

Reputation: 29

How do I put my label above the dropdown with a slight gap in between?

I'm trying to move my label above the dropdown select box and have this in the center but not luck - here is what I have done so far.

.select_label {
  display: inline-block;
  width: 10em;
  margin-bottom: 100px;
  margin-right: .5em;
  padding-top: 1.5em;
  text-align: center;
  color: black;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 8pt;
  font-weight: bold;
}

.selectors {
  max-width: 150px;
}
<div id="datebar">
  <div>
    <label class="select_label" for="strat1">Label
  <select name="column" class="selectors" id="strat1">
    {% for col in column[1:] %}
    <option>{{col}}</option>
    {% endfor %}
  </select></label>
  </div>
</div>

Here is a JSFiddle: https://jsfiddle.net/7dnxaupt/

Upvotes: 1

Views: 1258

Answers (2)

Arman Ebrahimi
Arman Ebrahimi

Reputation: 2297

Use from grid and do this changes:

.grid{ /* here */
  display: grid;
  grid-gap: 10px;
}
.select_label {
  display: inline-block;
  width: 10em;
  /* remove margin-bottom */
  margin-right: .5em;
  padding-top: 1.5em;
  text-align:center;
  color: black;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 8pt;
  font-weight: bold;
}

.selectors{
  max-width: 150px;
}
<div id="datebar">
<div class="grid">
<label class="select_label" for="strat1">Label</label> <!-- here -->
  <select name="column" class="selectors" id="strat1">
    {% for col in column[1:] %}
    <option>{{col}}</option>
    {% endfor %}
  </select>
  </div>
</div>

Upvotes: 1

vinalti
vinalti

Reputation: 1194

You could display them as block and put the select out of the label.

Another option could be to add the following lines to the label :

.select_label {
  position: relative;
  height: 3em;
  ...
}

And this to the select:

.selectors {
  position: absolute;
  bottom: 0;
}

Using absolute position is not always good, but it would work. That should be fine with a fixed height on the label. That might not be optimal for responsive design...

You could also manage it a tons of other ways, like with a grid layout, flex-box, etc.

Upvotes: 1

Related Questions