[Resolved] View grid / tabel results not as expected

[Author]

Posts

[tracyN]

Thanks Shane,

I've now added sorted the uneven column sizing, that worked great although I've just tested it on different devices and it doesn't seem to be responsive to screen size? The table needs to change the number of columns dpending on the screen size - ie only 1 or 2 columns for mobile screens, Do need to use something other than a table to do this?

I've also now added the custom user search to filter the results by event category which is working well but I need to restrict some of the values / categories that appear in the drop down list for selection. Is there a way to restrict which categories are available for selection within the customer search code?

Many thanks in advance.

[Shane]

Hi Tracy,

The table needs to change the number of columns depending on the screen size - ie only 1 or 2 columns for mobile screens, Do need to use something other than a table to do this?

Now this is not something I would recommend using a table for. In a case like this you will need to remake your view by using the Loop Wizard and using the bootstrap columns.

The bootstrap columns allow your layout to be responsive because tables are not responsive to different screen sizes.

Is there a way to restrict which categories are available for selection within the customer search code?

Unless you are using some javascript to disable the option then no.

e.g

jQuery("#selectid option[value="somevalue"]").attr('disabled','disabled');

Where you will replace selectid and somevalue with the actual ID and Value of the select field.

Thanks,
Shane

[tracyN]

Many thanks Shane,

I've switched to a bootstrap grid without content template but there seems to be an issue / conflict with the theme.

I believe the theme is using Bootstrap although I dont know which version I would imagine 3 though. However with either of the 2 'my theme has bootstrap' options in the settings there coulumns aren't formating as you would expect.

If I switch the settings to either Toolset load Bootstrap 3 or 4 then it does look as expected with 4 columns but this effects other layout options within the theme - I assume because the theme is using it too.

Can you take a look please and advise?

Many thanks in advance again!

[Shane]

Hi Tracy,

Seems that you've enabled wordfence once more which is locking me out.

Can you disable it again for me to have a quick look.

[tracyN]

Aplogies, please try again.

[Shane]

Hi Tracy,

From what I can see your theme isn't loading the bootstrap css. Its getting some Javascript and font awesome css but not the bootstrap css itself.

The only other option I can see helping here is to use our Blocks setup to create your view. However for this the block uses a content template which your theme will overwrite.

We are essentially stuck between a rock and a hard place where this is concerned because bootstrap is required for the columns to work. Unless your theme has a css framework for responsive columns that we can use.

Thanks,
Shane

[tracyN]

Many thanks Shane,

The theme does have it's own framework for responsive columns and rows so I will give that a try now - thanks so much for mentioning that, I'd forgotten it did.

With regard to the javascript to disable unwanted event categories from the search filter - do I add this to the JS editor section of the Search and Pagination section in the view?

Many thanks.

[tracyN]

Some progress / better result replacing the column div classes with the responsive framework from the theme bit it's not quite right yet...do I also need to replace / remove some of these classes from the start of the loop??

"container wpv-loop js-wpv-loop"

<!-- wpv-loop-start -->
<div class="container wpv-loop js-wpv-loop">
<wpv-loop wrap="4" pad="true">
[wpv-item index=1]
<div class="row">
<div class="span4">
<div class="whatson-img">[wpv-post-featured-image size="medium"]</div>
<div class="whatson-title"><h5 class="flipper-post-title">[wpv-post-link]</h5></div>
</div>
[wpv-item index=other]
<div class="span4">
<div class="whatson-img">[wpv-post-featured-image size="medium"]</div>
<div class="whatson-title"><h5 class="flipper-post-title">[wpv-post-link]</h5></div>

Thanks so much!

[Shane]

Hi Tracy,

Actually yes you will need to.

Boostrap uses "container" as their starter div class.

So you will need to replace it with the starter div class of your theme columns.

Thanks,
Shane

[tracyN]

Just realised I need to change the columns to span 3 rather than span4 so it's looking ok now 🙂

Just the previous query below to sort now hopefully...

With regard to the javascript to disable unwanted event categories from the search filter - do I add this to the JS editor section of the Search and Pagination section in the view?

Thanks again.

[Shane]

Hi Tracy,

With regard to the javascript to disable unwanted event categories from the search filter - do I add this to the JS editor section of the Search and Pagination section in the view?

Yes that is correct.

[tracyN]

Just seen your last reply about replacing yje class 'container' - what about wpv-loop js-wpv-loop too?

Thank you!

[tracyN]

Also...with regard to the dropdown list removal of options...there is no ID for the select field assigned automatically - can I add this somehow within the code in the search?

Can I add multiple values in the value="" bit of the JS? Or do I add another JQuery statement for each value?

Thanks so much!

[Shane]

Hi Tracy,

For the "wpv-loop js-wpv-loop" you can let those remain.

Can I add multiple values in the value="" bit of the JS? Or do I add another JQuery statement for each value?

You will need to add multiple JS to do it.

Finally you can target the select by using the option value. See example below.
https://stackoverflow.com/questions/314636/how-do-you-select-a-particular-option-in-a-select-element-in-jquery

Please let me know if this helps.
Thanks,
Shane

[tracyN]

Many thanks Shane,

The JS code doesn't seem to be working, I've tried various things including the following none of which work, am I missing something?

jQuery("select.js-wpv-filter-trigger option[value="theatre-booking"]").attr('disable','disable');

jQuery("select.js-wpv-filter-trigger option[value="performances"]").attr('disable','disable');

jQuery("#whatson-select option[value="performances"]").attr('disable','disable');

jQuery("select.form-control option[value="performances"]").attr('disable','disable');

jQuery("#whatson-select option[value="performances"]").attr('disable','disable');

Can you help please?

Many thanks!