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, 4 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)

Tagged: Content-submission forms, Toolset Forms, User-registration forms

This topic contains 4 replies, has 2 voices.

Last updated by Charles 7 years, 3 months ago.

Assisted by: Christian Cox.

Author

Posts

July 27, 2017 at 1:19 pm #553473

Charles

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>

July 27, 2017 at 5:41 pm #553602

Christian Cox

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.

July 27, 2017 at 6:02 pm #553609

Charles

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

July 27, 2017 at 8:23 pm #553655

Christian Cox

"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.

July 28, 2017 at 3:07 pm #553965

Charles

Thanks, that looks great!

Best,
Chuck