lundi 8 janvier 2018

Checkbox list, alphabetically ordered in topdown columns

I'm trying to display my list of checkboxes so that the alphabetical order is vertical instead of horizontal. Obviously things are fine when the container in the fiddle is dragged to only single column width, but from 2 columns onwards the checkbox order runs horizontally. I can't seem to apply any of the previous related posts to this (using display:block, float: left, etc) but nothing works and it's doing my head in! Any help much appreciated. Fiddle: http://ift.tt/2qDK3Gj

http://ift.tt/1q8JMjW

<div class="CountryListBoxClass_prodn">
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN40" value="Austria" />Austria</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN100" value="Bulgaria" />Bulgaria</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN191" value="Croatia" />Croatia</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN208" value="Denmark" />Denmark</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN233" value="Estonia" />Estonia</label>
 <label class="myEuropeCountries">
    <input type="checkbox" id="UN276" value="Germany" />Germany</label>
 <label class="myEuropeCountries">
    <input type="checkbox" id="UN348" value="Hungary" />Hungary</label>
 <label class="myEuropeCountries">
    <input type="checkbox" id="UN372" value="Ireland" />Ireland</label>
 <label class="myEuropeCountries">
    <input type="checkbox" id="UN428" value="Latvia" />Latvia</label>
 <label class="myEuropeCountries">
    <input type="checkbox" id="UN470" value="Malta" />Malta</label>
</div>

.

.CountryListBoxClass_prodn label {
  display: inline-block;
  border: 1px solid transparent;
  width: 213px;
  background-color: white;
  margin: 0px 7px 2px 0px;
}

.CountryListBoxClass_prodn input {
  position: relative;
  vertical-align: middle;
  bottom: 1px;
  margin-right: 10px;
}

.CountryListBoxClass_prodn {
  border: 1px solid #ebebeb;
  Padding: 10px 0px 0px 5px;
  background-color: #fcfcfc;
  overflow-y: scroll;
  font-family: "Verdana";
  font-size: 11px;
}




Aucun commentaire:

Enregistrer un commentaire