Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bFormSelect: styling width doesn't match other form components

See original GitHub issue

Bug

Description: The default styling of a form select doesn’t match the styling of text inputs.

I’ve noticed that bootstrap-vue text inputs use the bootstrap class form-control, but the select does not use this class unless a size is entered (applied via the formMixin). The class custom-select seems to be used instead as a base class for the element.

The css for custom-select includes a max-width: 100%, but it does not establish a width. The bootstrap class form-control does apply a width: 100% rule.

For now, I’ve gotten around this by adding the width: 100% rule to the custom-select class in my own css.

Rendered Form

`.custom-select` styles

`.form-control` styles

Issue Analytics

State:
Created 6 years ago
Comments:9 (9 by maintainers)

Top GitHub Comments

1reaction

tmorehousecommented, Jun 17, 2017

@alexsasharegan & @pi0 should we add .form-control class to the custom select?

0reactions

tmorehousecommented, Jun 21, 2017

Actually this is now in the master 😄 from a previous commit.

I’ll close the issue

Top Results From Across the Web

Why are select elements not as wide as other form elements?

I think it has something to do with the box-sizing that is rendered. The select visual part is less than the box that...

Select

Select. Customize the native <select> s with custom CSS that changes the element's initial appearance. Other frameworks. CoreUI components are available ...

Select API - Material UI

Name Type Default autoWidth bool false children node classes object

Form Select | Components

Custom component using cross-browser custom styles. Optionally generate entries based on an array, array of objects.

Images, media, and form elements - Learn web development

This lesson has highlighted some of the differences you will encounter when working with images, media, and other unusual elements in CSS.