Perfectly solves the problem of incorrect select drop-down box options in iview.

Perfectly solves the problem of incorrect select drop-down box options in iview.

When using iview, I encountered such a problem by using the select drop-down box component in the Model. But when the pop-up box needs to scroll more than one screen, the select drop-down options will be misplaced (1 is normal, and figure 2 is rolling, the drop-down options are misplaced .)

Figure 1:

Figure 2:

After the component code is analyzed, the following style is found:

. Ivu-modal. ivu-select-dropdown {position: absolute! Important ;}

Solution

This style affects the positioning of the drop-down box. The solution is to overwrite the original style of the author.

However, unfortunately, the author adds one! Important, changed the priority.

So, how to make your style priority higher than him, you can add such a style in the Custom style file:

Body. ivu-modal. ivu-select-dropdown {position: fixed! Important ;}

This solves the problems mentioned above. For more information about how to add a body to change the style priority, see my blog article (how2js.cn)

The above Article perfectly solves the problem that the select drop-down box option of iview is misaligned. It is all the content shared by the editor. I hope you can give us a reference and support the help house.