Skip Navigation

[Resolved] Text Inside Select Cut Off

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 2 replies, has 2 voices.

Last updated by aaronM-9 1 year, 6 months ago.

Assigned support staff: Nigel.

Author
Posts
#1559137
select-text-cutoff.PNG

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]
#1559595

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

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;
}
#1560117

That did the trick! Thanks as always.

- Aaron