[Resuelto] Disable Bootstrap «form-control» styling

[Autor]

Mensajes

[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>enlace oculto</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>

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

[Charles]

I'll elaborate.

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

"class=form-control" not active:
Screenshot: enlace oculto (city is active)
URL: enlace oculto
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

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

[Charles]

Thanks, that looks great!

Best,
Chuck