Question 208878 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Styling select field and options

I have a multi select field with a bunch of options that i want to display as small blocks rather than having a long list of items. I can do this by setting the "option" to "display: inline-block" however i get a problem where the options dont go into a second line when reaching the container border but get hidden behind the container.

enter image description here

As you can see here the last item us cut off and all following items are not visible.

.column-select {
    width: 100%;
}
.column-select option {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    background: #2b3035;
    color: #FFFFFF;
    margin: 5px;
    outline: none;
}

Is there any way to have the options pass into the second line instead of going behind the container?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It does not seem possible to do this with the select element. I changed the field to structure from "select>options" to "ul>li>checkbox" so i can style the box the way i like and each li as well. After hiding the checkbox with "appearence: none" the result is the same as with the select.


  2. 0

    By giving the style display: flex and flex-wrap: wrap; to the container, the options will automatically wrap to the next line when they reach the containers width limit.

    Here is the updated CSS code:

    .column-select {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.column-select option {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  background: #2b3035;
  color: #FFFFFF;
  margin: 5px;
  outline: none;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search