[Resolved] which class to use to edit view filters

[Author]

Posts

[massimoS527]

I can not find the class to change the size of the filters and the space between one and the other (see image)

[Nigel]

Hi Massimo

Toolset uses Bootstrap for its grid, which is where the classnames such as .col-sm-2 come from.

In this case your filter controls form is divided up into six equal width columns (the size of the gutters determined by Bootstrap's grid style rules).

You are not obliged to use this Bootstrap grid.

If you are comfortable with CSS you can edit the View where the filter controls are inserted and change the markup—including the classnames—according to your needs and update it if you wanted to, say, use flexbox for example.

The Bootstrap styles are a starting point and if you are able to improve upon them you should go ahead. Just be sure when editing the markup in the Filter Editor to preserve the Views shortcodes.

[massimoS527]

ok, to change the dropdown field of the "select" filter
I use the Css class "input[type=text], select"

<code
input[type=text], select {
width: 40%;
padding: 0px 0px;
margin: 0px 0;

}
[/php]

in View but does not take it
which class should I use

[Nigel]

Hi Massimo

Sorry it has taken a little while to get back to you, the support queues have been very busy.

The styles you are adding are not specific enough to override the existing styles set by, amongst other things, Bootstrap CSS.

Let me explain that first, and then explain why the styles you are adding won't work as you intend.

On my local test site I set up something similar, a View with 6 filter controls wrapped inside a Bootstrap grid of columns, so the markup looks like this:

<div class="row">
    <div class="col-sm-2">
        <div class="form-group">
            <label>[wpml-string context="wpv-views"]Status[/wpml-string]</label>
            [wpv-control-postmeta field="wpcf-status" type="select" url_param="wpv-wpcf-status"]
        </div>
    </div>
    <div class="col-sm-2">
        <div class="form-group">
            <label>[wpml-string context="wpv-views"]Some text[/wpml-string]</label>
            [wpv-control-postmeta field="wpcf-some-text" url_param="wpv-wpcf-some-text"]
        </div>
    </div>

    <!--- continuing with more controls  -->
</div>

Here is how the resulting markup actually looks:

<div class="row">
    <div class="col-sm-2">
        <div class="form-group">
            <label>Status</label>
            <select id="wpv_control_select_wpcf-status" name="wpv-wpcf-status" class="js-wpv-filter-trigger form-control">
                <option value="" selected="selected"></option>
                <option value="prospect">Prospect</option>
                <option value="active">Active</option>
                <option value="complete">Complete</option>
            </select>
        </div>
    </div>
    <div class="col-sm-2">
        <div class="form-group">
            <label>Some text</label>
            <input type="text" id="wpv_control_textfield_wpv-wpcf-some-text" name="wpv-wpcf-some-text" value="" class="js-wpv-filter-trigger-delayed form-control">
        </div>
    </div>
    <!--- more controls -->
</div>

Note that my select element has some styles, in particular .form-control.

Bootstrap applies some styles to .form-control.

A class selector is more specific (and so overrides) an element selector, so if I add a CSS rule for the select element it will be overridden by the .form-control style rules from Bootstrap.

So you need to make your style rules more specific, e.g.

select.form-control {
  border: 2px solid red;
}

This will work. It will add a red border to the select dropdown.

Now, the styles you are adding for the select and inputs are to manipulate the the width and margins etc. You can do that, but it will only affect the width of the select dropdown within its grid column.

You are using a Bootstrap grid with 6 equal-width columns. In your browser console inspect the container div with class .col-sm-2 and you will see that is where the width and other settings are that you would need to modify.

You can add classes to your markup to individual wrapper divs and then add styles to overrule the width for that particular column, remembering that they must add up to 100%, so if you make one column wider you will have to make another smaller.

Or, stop using the Bootstrap grid and come up with your own CSS rules for how the filter controls are laid out, such as flexbox.

[massimoS527]

I thank you, you're right. I saw the class by inspecting the browser!

I added some code, I change practically everything, I can not eliminate the space between the writing and the edge of the select field and its height.

I use the paddind and height command

select.form-control {
  height: 15px;
  padding: 0px 0px 0px 0px;

}

I tried with the submit and reset buttons, but with the buttons it does not work
I used this class:

input[type=submit].btn{

[Nigel]

Hi Massimo

I added styles to the select box with the same selector and they overrode the Bootstrap styles.

See my screenshot where you can see the styled select dropdowns and the styles added in the inspector (including the crossed-out Bootstrap styles that they replace).

Depending on your theme you may see that there are other styles being applied to the select box, and you would need to identify those in the browser dev tools and make sure the CSS selectors you use to target the fields are at least as specific as any others being applied.

Note when you insert controls you can also add custom classes. In the second screenshot you can see I add a "custom-class" when inserting the submit button, which I can then use in my style rules, e.g.

button.custom-class {
  border: 2px solid red;
}

[massimoS527]

Thanks Nigel, in these days of vacation I do some tests. My theme is OceanWP, I try to ask the builder if he has any suggestions.

As for Flexbox I can tell you that I know it and it's a simple and fantastic way to make content responsive. The only flaw is that it is not supported by old browsers (Explorer 10, etc.) and Android 4.2. But this is not a problem, the world goes on not back!

We update ourselves later and holidays. Relax and have a good vancaze at all!
(p.s. W google translator)

[Nigel]

Sure, I'll be away until Tuesday myself.

Enjoy your weekend.

[massimoS527]

hello Nigel, I asked the OceanWP builder, he told me to use this code:

select.form-control {
    min-height: 30px;
}

it works, but does not decrease the height below 10 px. According to the manufacturer there is a bugs and asks me the credentials to enter the site as an administrator, what do you say?...

[Beda]

Well, if they require access, I assume it is best to grant it if you feel comfortable with.

It seems after all not a Toolset issue, in this case, if I understand it correctly.

[massimoS527]

I'm afraid something goes wrong, I've been working on my site for months. I think I leave it like this.