Html Question posted in
Some basic documentation can be found here.

Html – How to display label above a multiple select listbox?

I have two multiple select boxes with some javascript to move the items between the boxes. I want to add a label to the boxes that displays above each of the listboxes but cant get the CSS to work.
Below is what the UI looks like with the boxes added without the label added to the element:

Without label

And below here is what the image looks like with the label added:

With Label

Code that I’m currently using to generate the image with the label added is below:

.addprop-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.addprop-container label {
  display: flex;
  flex-direction: column;
}

.listbox {
  width: 250px;
  height: 300px;
  text-align: left;
}

.buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 20px;
}

.buttons button {
  margin-bottom: 10px;
  background-color: black;
  color: white;
  border-radius: 50px;
  font-size: larger;
  font-weight: bold;
}
<div class="addprop-container">
  <label for="listbox1">Available Properties:</Label>
  <select name="all-properties" id="listbox1" class="listbox" multiple>
    <option value="1001">Test Line 1</option>
    <option value="1002">Test Line 2</option>
    <option value="1003">Test Line 3</option>
    <option value="1004">Test Line 4</option>
    <option value="1005">Test Line 5</option>
    <option value="1006">Test Line 6</option>
    <option value="1007">Test Line 7</option>
    <option value="1008">Test Line 8</option>
  </select>

  <div class="buttons">
    <button type="button" class="prop-selection" onclick="moveAllOptions(listbox1,listbox2)"> >> </button>
    <button type="button" class="prop-selection" onclick="moveSelectedOptions(listbox1,listbox2)"> > </button>
    <button type="button" class="prop-selection" onclick="moveSelectedOptions(listbox2,listbox1)"> < </button>
    <button type="button" class="prop-selection" onclick="moveAllOptions(listbox2,listbox1)"> << </button>
  </div>
  <label for="listbox2">Assigned to User:</Label>
  <select name="assigned-properties[]" id="listbox2" class="listbox" multiple>
  </select>
</div>
Tags:

2

Answers


  1. 0

    You need one more wrapper and then stack the label and select in that container

    .addprop-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.select-group {
  display: flex;
  flex-direction: column;  /* Stack label and select vertically */
  align-items: flex-start; /* Align items to the start */
  margin-right: 20px;
}

.listbox {
  width: 250px;
  height: 300px;
  text-align: left;
}

.buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 20px;
}

.buttons button {
  margin-bottom: 10px;
  background-color: black;
  color: white;
  border-radius: 50px;
  font-size: larger;
  font-weight: bold;
}
    <div class="addprop-container">
  <div class="select-group">
    <label for="listbox1">Available Properties:</label>
    <select name="all-properties" id="listbox1" class="listbox" multiple>
      <option value="1001">Test Line 1</option>
      <option value="1002">Test Line 2</option>
      <option value="1003">Test Line 3</option>
      <option value="1004">Test Line 4</option>
      <option value="1005">Test Line 5</option>
      <option value="1006">Test Line 6</option>
      <option value="1007">Test Line 7</option>
      <option value="1008">Test Line 8</option>
    </select>
  </div>

  <div class="buttons">
    <button type="button" class="prop-selection" onclick="moveAllOptions(listbox1,listbox2)"> >> </button>
    <button type="button" class="prop-selection" onclick="moveSelectedOptions(listbox1,listbox2)"> > </button>
    <button type="button" class="prop-selection" onclick="moveSelectedOptions(listbox2,listbox1)"> &lt; </button>
    <button type="button" class="prop-selection" onclick="moveAllOptions(listbox2,listbox1)"> &lt;&lt; </button>
  </div>

  <div class="select-group">
    <label for="listbox2">Assigned to User:</label>
    <select name="assigned-properties[]" id="listbox2" class="listbox" multiple>
    </select>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    I am not sure if i understood your question clearly but based on the provided image and the question i think this is what you wanted to achieve right?

    #available_prop_container,
#assigned_prop_container {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.addprop-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.addprop-container label {
  display: flex;
  flex-direction: column;
}

.listbox {
  width: 250px;
  height: 300px;
  text-align: left;
}

.buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 20px;
}

.buttons button {
  margin-bottom: 10px;
  background-color: black;
  color: white;
  border-radius: 50px;
  font-size: larger;
  font-weight: bold;
}
    <div class="addprop-container">
  <div id="available_prop_container">
    <label for="listbox1">Available Properties:</Label>
    <select name="all-properties" id="listbox1" class="listbox" multiple>
      <option value="1001">Test Line 1</option>
      <option value="1002">Test Line 2</option>
      <option value="1003">Test Line 3</option>
      <option value="1004">Test Line 4</option>
      <option value="1005">Test Line 5</option>
      <option value="1006">Test Line 6</option>
      <option value="1007">Test Line 7</option>
      <option value="1008">Test Line 8</option>
    </select>
  </div>

  <div class="buttons">
    <button type="button" class="prop-selection" onclick="moveAllOptions(listbox1,listbox2)"> >> </button>
    <button type="button" class="prop-selection" onclick="moveSelectedOptions(listbox1,listbox2)"> > </button>
    <button type="button" class="prop-selection" onclick="moveSelectedOptions(listbox2,listbox1)"> < </button>
    <button type="button" class="prop-selection" onclick="moveAllOptions(listbox2,listbox1)"> << </button>
  </div>
  <div id="assigned_prop_container">
    <label for="listbox2">Assigned to User:</Label>
    <select name="assigned-properties[]" id="listbox2" class="listbox" multiple>
    </select>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search