[Resolved] can't style wpv-control-post-relationship

[Author]

Posts

[yvesM]

I'm building a view with custom search.
But I can't style the ancestor post drop down filter control.

I've tried to put my class about everywhere (with class, with surrounding div's), but nothing works

This is the piece of code.

      <span class="font-large">
[wpv-control-post-relationship ancestors="venue" url_param="p-venue" class="font-large"]
<div class="form-group col-sm-2 font-large"><span class="font-large">
	[wpv-control-post-ancestor type="select" default_label="Venue" class="mls mrs font-large" ancestor_type="venue" label_class="font_large"]
  </span>
</div>
[/wpv-control-post-relationship]
  </span>

Other 'simpler' filter controls , I could style this way

[wpv-control taxonomy="category" url_param="p-category" type="select" default_label="Category" hide_empty="true" class="col-sm-2 mls mrs font-large"]

[Luo Yang]

Dear yvesM,

Are you going to add CSS class "mls mrs font-large" into the Views shortcode [wpv-control-post-relationship]?
Please check our document:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-control-post-relationship
This shortcode does not support attribute "class"

in your case, you can setup the HTML codes manually, for example:

<div class="my-css-class">
...
</div>

[yvesM]

Hi Luo,

I have tha class put about everywhere, indeed the [wpv-control-post-relationship] doesn't show a class in the documentation, but you never know, it was forgotten in the documentation, and has the same functionality as other shortcodes.

I also tried to wrap the [wpv-control-post-relationship] in a <span></span>.

 <span class="font-large">
    ....
</span>

But this class isn't applied (It contains a font-size...).
You can see in the export of my views and types I've submitted for the other issue.
https://toolset.com/forums/topic/the-post-types-listed-in-this-view-do-not-have-ancestors/

[Luo Yang]

As I mentioned above the shortcode [wpv-control-post-relationship] does not support attribute "class", there isn't such a built-in feature within Views plugin.

Please elaborate more details for the problem:
But this class isn't applied (It contains a font-size...).
Where do you want it to be applied? how does it contail a font-size?

I have already tried your codes in my localhost, I can see the the span tag HTML codes does output correctly, for example:

<span class="font-large">

<div class="form-group col-sm-2 font-large"><span class="font-large">
    <select id="wpv_control_select_p-venue" name="p-venue" class="mls mrs font-large js-wpv-filter-trigger form-control">
...
</select>
  </span>
</div>

  </span>

[yvesM]

Various things, which make me go insane, in trying to figure it out....

[wpv-control-post-ancestor], in the doc
https://toolset.com/documentation/user-guides/views-shortcodes/
doesn't contain a 'class' attribute

If I use the Edit / New Filter wizard in the view designer, I get an option to style the control (see screenshot)

Anyway, that seems to be only a discrepancy in the documentation. Putting a class with styling in there, works. The styling of the class is applied to the element (great!!)

But I also found the source of my 'apparently' classes not being applied.

As you can see in the screenshot, the category and country are the same height, but the venue not.
Category and country have the 'default' height applied.
But for the venue this is tackled by the .form-control class that is applied to the control.
This is what I don't understand the

[wpv-control-post-relationship ancestors="venue" url_param="p-venue"]
      <div class="col-sm-2">
	[wpv-control-post-ancestor type="select" default_label="Venue" class="font-large" ancestor_type="venue"]
        </div>
[/wpv-control-post-relationship]   

generates this HTML

<select id="wpv_control_select_p-venue" name="p-venue" class="font-large js-wpv-filter-trigger form-control"><option value="0" selected="selected">Venue</option><option value="47373"></option>
....
</select>

And in the debug window I see the classes applied (see screenshot).
It's the height of the .form-control class that makes the venue dropdown stay smaller than the others.

Where does the form-control class come from. Since in the generated HTML, it doesn't occur....
Neither is it applied to the other dropdown boxes....

[Luo Yang]

Q1) If I use the Edit / New Filter wizard in the view designer, I get an option to style the control (see screenshot)
Thanks for the details, I can duplicate same problem, you are right, there should not be "Element classnames" option for the shortcode [wpv-control-post-relationship], I forward it to our developers.

Q2) Where does the form-control class come from?
The css name "form-control" is from Views plugin, that is for Views ajax pagination and AJAX search, in your case, you can write some CSS codes to override it, for example:

.form-control{
height: 50px !important;
}

[yvesM]

Thanks.
Q2) Is this applied to all filter controls? Since I in make case, it isn't.
If it was applied to all filter controls it would have been logical. But since it isn't, it is maybe due to not being applied to all, or a bug...

[Luo Yang]

The CSS class "form-control" is required by Booststrap, for example:
hidden link

Do you want disable all CSS class name "form-control" in the Views custom search form, that would need a feature request.

[yvesM]

No, I don't want to disable all css class name. But was looking at consistency, so it makes it simpler and more straight forward to understand.
At first it was confusing, because I didn't know those are classes from bootstrap, and was thinking about functionality related to wp-types.