[Resolved] Text Inside Select Cut Off

[Author]

Posts

[aaronM-9]

I recently changed a view filter to display three select drop-downs in-line instead of vertically. When doing so, the text inside the selects started getting cut off (see screenshot). Can you assist? Thanks.

hidden link

[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group">
	[wpv-filter-search-box placeholder="Type search string..." output="bootstrap"]
</div>
<div class="row">
  <div class="col-md-4">
  	<div class="form-group">[wpv-control-post-taxonomy taxonomy="product_cat" type="select" default_label="Category" url_param="wpv-product_cat"]</div>
  </div>
  <div class="col-md-4">
    <div class="form-group">[wpv-control-post-taxonomy taxonomy="product-line" type="select" default_label="Sub-Category" url_param="wpv-product-line"]</div>
  </div>
  <div class="col-md-4">
    <div class="form-group">[wpv-control-post-taxonomy taxonomy="product-location" type="select" default_label="Product Origin" url_param="wpv-product-location"]</div>
  </div>
</div>
<div class="form-group croydon-horizontal-checkboxes" id="croydon-horizontal-checkboxes">
	[wpv-control-post-taxonomy taxonomy="product_tag" type="checkboxes" format="%%NAME%%" url_param="wpv-product_tag" class="croydon-horizontal-checkbox"]
</div>
[/wpv-filter-controls]
[wpv-filter-end]

[Nigel]

Hi Aaron

The problem arises from a conflict between WooCommerce styling and Bootstrap styles: you may be able to see in the screenshot that both are applying styles to the selects.

To fix the issue you would need to undo the padding set by WooCommerce, or the height set by Bootstrap.

I'm seeing more of these conflicts raised, perhaps arising from changes in WC 4.

It may make sense in some cases to disable Bootstrap on certain WC pages, but in this case this is a page with a View that uses Bootstrap styles for the table output, so that is not an option, and it would actually make more sense to disable the WC styles, this isn't a WC page so I don't see why there are enqueued here.

But the simplest option if this is an isolated problem would be to add a little custom CSS to your View that re-asserts the Bootstrap padding setting:

.woocommerce select {
  padding: 6px 12px;
}

[aaronM-9]

That did the trick! Thanks as always.

- Aaron