CODEWITHSUNDEEP
htmlcss
hbgamra
hbgamra

Reputation: 889

CSS rule not working (width: auto)

I put within my css file the following rule : 

.navbar-form .select2-container ul.select2-choices,
.navbar-form .select2-container ul.select2-choices .select2-search-field input {
  max-width: auto !important;
}

Unfortunately, the rule is barred and in addition of that, this message was displayed :

Invalid property value

In brief, what value can I put ?

Upvotes: 1

Views: 1926

Answers (2)

cdwyer
cdwyer

Reputation: 697

Max-width cannot be set to "auto". See here, and scroll down to valid Property Values. For max-width, these include:

none : No maximum width (the default)

length : Define maximum width in px, cm, etc.

percent(%) : Define maximum width in percent of the containing block.

initial : Sets the property to its default/initial value.

Typically, max-width can be used together with a width property. So you can say "I want my div.container to have width:100%;, but I also want to 'cap' that width at 1024px, by also setting max-width:1024px;."

This is especially useful for controlling your styles across different devices/breakpoints.

Upvotes: 1

Asons
Asons

Reputation: 87303

Here are the valid values

none
- The width has no maximum value.

length
- See length for possible units.

percentage
- Specified as a percentage of containing block's width.

Src: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

Upvotes: 3

Related Questions