[Resolved] Bootstrap styling on Table View using Toolset View Blocks

[Author]

Posts

[ashiA]

Hi,

If I use the classic view editor and the table view, I have greater control over the css output .. specifically the ability to add bootstrap table styling, specifically
<div class="table-responsive">
<table width="100%" style="table table-striped table-sm">

However, if I use the new block editor to create a table view, I am not being able to input the required CSS classes for bootstrap styling. The only place that I can add css classes is in the 'view loop' block.. but adding these classes do not seem to have any effect.. Can you help me with putting in the relevant classes to get the bootstrap styling required (as possible in the classic view)

[ashiA]

I had a few follow up questions ... I am quite comfortable with HTML and CSS and find the classic editor much easier to navigate especially for Table Views.

My additional queries are as follows:
(a) Is there any way to replicate the toolset star block for number fields in the classic editor .. The main reason I am trying to use the new Toolset Block views is that I need to display the star ratings in the table and the classic editor does not seem to offer a way to do so
(b) the classic editor provides an option to make the table sortable by clicking on the columns ... is there a way to allow for the same using the new blocks editor ... from whatever I have tried, there does not seem to be an option for making a table view sortable using the new block editor for a table view

[Jamal]

Hello and thank you for contacting the Toolset support.

Currently, Blocks do not offer the same range of features that the legacy views do. For example, bootstrap is not used with blocks at all. Sorting a table by the header is also not yet available in Toolset blocks.
I'll suggest using the legacy views if you want to use Bootstrap styles.

Star rating is not available within the classic views, but you can build a CSS based solution. Check this similar ticket https://toolset.com/forums/topic/best-way-to-create-a-star-rating-field-in-types-with-graphic-output-in-views/

Or you can build a content template, with blocks, that only displays the star rating block. Then include it inside the classic view using the wpv-post-body shortcode.

[ashiA]

Hi Jamal,

Thanks for your inputs. I will go ahead with the legacy view editor as recommended.

I am not sure if the content template would suit my requirements ... The star field is only one out of many custom fields, and am assuming that this will become very heavy.

The CSS solution sounds interesting. The link to the other ticket does not really give an explanation of how to go ahead and implement the same (the CSS code is not included, and if I am not mistaken this may require some Jquery as well). If possible, can you please share the CSS & Javascript code that can be used to display number fields as stars in the legacy view editor.

Thanks.

[ashiA]

Hi Jamal,

In addition to my previous reply, I was playing around with the options and I realised that I can also achieve the required star output using conditional statements in toolset .... I effectively saved 5 image files (for 1,2,3,4 and 5 star ratings) and then use a conditional statement in toolset legacy views to identify which one to display .... the code is given below

[wpv-conditional if="( $(wpcf-scheme-rating) eq '1' )"]<td><img src="mydomain.com/1-star.png" width="124" height="34" class="size-full" /></td>[/wpv-conditional]
[wpv-conditional if="( $(wpcf-scheme-rating) eq '2' )"]<td><img src="mydomain.com/2-star.png" width="124" height="34" class="size-full" /></td>[/wpv-conditional]
[wpv-conditional if="( $(wpcf-scheme-rating) eq '3' )"]<td><img src="mydomain.com/3-star.png" width="124" height="34" class="size-full" /></td>[/wpv-conditional]
[wpv-conditional if="( $(wpcf-scheme-rating) eq '4' )"]<td><img src="mydomain.com/4-star.png" width="124" height="34" class="size-full" /></td>[/wpv-conditional]
[wpv-conditional if="( $(wpcf-scheme-rating) eq '5' )"]<td><img src="mydomain.com/5-star.png" width="124" height="34" class="size-full" /></td>[/wpv-conditional]

I wanted to understand whether such a conditional statement is similar to the CSS solution mentioned in your previous reply. Specifically with relation to performance, since the site is data & query intensive, so would like to avoid a performance-heavy solution to the star rating.

Thanks.

[Jamal]

Having several conditions will, of course, add some processing time to it. I would suggest the following code, where we use only one condition to check for a rating > 0, and we use the value of the field directly in the image name.

[wpv-conditional if="( $(wpcf-scheme-rating) gt '0' )"]<td><img src="mydomain.com/[types field="scheme-rating"][/types]-star.png" width="124" height="34" class="size-full" /></td>[/wpv-conditional]

But, if you would prefer a CSS based solution, check this article, it has several codepen's snippets that may inspire you:
hidden link
For example:
- hidden link
- hidden link

[ashiA]

Hi Jamal,

Thanks a lot for this ...Simply using the value of the field in the file name is a nice elegant solution ..

Will also check on the CSS solutions ...

Thanks.

[Jamal]

Thank you!

If you don't need further assistance on this request, I have to kindly ask you to mark this ticket as resolved and open a new ticket for any other question or request.

Best regards,
Jamal

[ashiA]

My issue is resolved now. Thank you!