Skip Navigation

[Resolved] Disable Bootstrap “form-control” styling

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to disable the blue glow and rounded borders on form inputs that have the "form-control" CSS class.

Solution: Either disable Bootstrap entirely in Toolset > Settings > General, or add your own styles that will override Bootstrap. The following code will remove the rounded corners and blue glow on focus:

.wpv-filter-form .form-control {
  border-radius: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
}

Relevant Documentation: https://toolset.com/documentation/user-guides/using-bootstrap-css-elements-content/

This support ticket is created 7 years, 3 months ago. There's a good chance that you are reading advice that it now obsolete.

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.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

Author
Posts
#553473

Support,

I need to disable the form-control styling on my filter. Usually, I'm able to remove the line of code, but it's not showing in my filter. Here is my filter coding:

<div class="productpadding"></div>
 <div class="product-box box">
  <a href="[wpv-post-url]" class="product-thumbnail">
    [wpv-conditional if="( NOT(empty($(_thumbnail_id))) )"]
    <img src="[wpv-post-featured-image  size='large' raw='true']" class="wp-post-image" alt=""/>
    [/wpv-conditional]
    [wpv-conditional if="( empty($(_thumbnail_id)) )"]     
    <img src="<em><u>hidden link</u></em>" width="160" height="200" class="wp-post-image" alt=""/> 
    [/wpv-conditional]   
  </a>
  <div class="producttitle">
    [wpv-post-link]
  </div>
  <div class="price">
    <b>Price:</b>&nbsp;&nbsp;[types field='price'][/types]
  </div>
  <div class="location">
    <span class="glyphicon glyphicon-map-marker"></span>
    [types field='city'][/types], [types field='state'][/types]
  </div>
 </div>

#553602

I'm sorry I don't understand, the code you added here doesn't include any filter-specific information. I see some conditionals, some Types fields, and a custom image. Can you tell me a bit more detail about what you are trying to accomplish? What styles do you want to remove? Show a screenshot of the current design, and describe how you want it to be different.

#553609

I'll elaborate.

"class=form-control" not active:
Screenshot: hidden link
URL: hidden link
Note the rectangle boxes, with no border radius. When active, the border changes to a darker grey.

"class=form-control" not active:
Screenshot: hidden link (city is active)
URL: hidden link
Note the boxes with border radius. When active, boxes have blue shadow.

I was told in a prior support thread that the blue shadowing and border radius was caused by the class "form-control". Not sure if that's what's happening hear, but I would assume. Like you said, it's not present in the code, so I'm not sure why the CSS is showing. Is it a filter related issue that automatically applies the CSS filter fields?

Thanks,
Chuck

#553655
form-control.png

"class=form-control" not active:
The form-control class is added to the markup for each filter control automatically by Views. There is no way to remove it. See the attached screenshot showing what I mean - the form-control class is applied to all form input fields. However, you have other options to modify the styles:

1. Do not load Bootstrap - this is the "nuclear" option, so to speak, because if you disable Bootstrap entirely in Toolset > Settings > General, you lose all Bootstrap formatting. I don't think this is a good idea because Toolset plugins rely on Bootstrap in many ways.

2. Override specific styles associated with the form-control class that you do not like. Add CSS of your own using more specific selectors so Bootstrap's styles will be overridden. For example, add the following to your View's CSS panel:

.wpv-filter-form .form-control {
  border-radius: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
}

This code will override Bootstrap's blue glow and rounded corners.

#553965

Thanks, that looks great!

Best,
Chuck