[Resolved] I have several doubts about the Toolset block view.

[Author]

Posts

[Francisco Ramón Molina Busquiel]

Hi,
I have several doubts about the Toolset block view.
Please see the screenshot.
Thanks for your help.
Regards,
Jose

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Jose,

Thank you for getting in touch.

1. You can add the search option when you are creating your view with Gutenberg editor, there is actually a step by step process to add the search bar.

2. There is also an option in the step by step process to add the sorting option.

3. When you say space between the columns, is it that you want the space between them to be wider ?

Finally I would recommend taking a look at the video below for some further information on Views and the Gutenburg editor.
hidden link

Please let me know if this was able to clarify things for you or if further clarity is needed.
Thanks,
Shane

[Francisco Ramón Molina Busquiel]

Hi Shane,
No, I know how to define the search, etc ... I was referring to the visual format of the search, the search button and the link to clear the text of the search.
I have used the Gutenberg columns, but as you will see on the page everything is visually very unpaired, the ideal would be that the search button is placed next to the search field with a small margin, and the link to clear the search text be located next to the search button with a small left margin. Also, as you will see on the page, the search button has been aligned at the top, it should be aligned to the search field.
How can all this be done to make it look better?
Regarding the columns, I want to know how to modify the width between each column, either put more width or put less width, I have not seen in the configuration of the Toolset block View how to modify this parameter.
Thanks for your help.
Regards,
Jose

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Francisco,

As you can see from my screenshot, it is possible to setup the filters like how you want it with our Toolset blocks.

However for the results column width, the only way this is possible is if you add a custom class to the column in the view and use css to increase or decrease the spacing between the columns.

Thanks,
Shane

[Francisco Ramón Molina Busquiel]

Hi Shane,

But you have not explained to me how to do anything that I have asked you. I have already made the columns but I need to know how to do what I have asked you. In the picture you don't show me how to do everything I've asked you.

"I have used the Gutenberg columns, but as you will see on the page everything is visually very unpaired, the ideal would be that the search button is placed next to the search field with a small margin, and the link to clear the search text be located next to the search button with a small left margin. Also, as you will see on the page, the search button has been aligned at the top, it should be aligned to the search field.
How can all this be done to make it look better?"

Please, tell me how to do what I have told you, also in your screenshot the button and the link for "clear all items" are not next to the search field and aligned in height.

Toolset Blocks should have the option to modify the width between the columns. This is something basic.
It is assumed that CSS should not be required with Toolset Blocks, except in very special cases.
And what would the CSS be like to do it?

Thanks for your help.
Regards,
Jose

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Jose,

In order to have the search box like how I have it in the screenshot you would've first needed to have added the Views block to your page.

1. After adding the views block click on Add Other Blocks.
2. Select the columns block and set it to 3 columns. In this case you can adjust the column width for your needs.
3. Click on the Add Search Field button then add your text search. You can then click on the block and drag it into your first column by click on the 6 dots when the block is highlighted, See Screenshot
4. Similarly you will need to click on the Add Reset button and Add Search button and drag them into their respective columns that you want them

This is how you will build out the search section. The alignment is done based on the width of the column. Unfortunately the block editor is meant to be a visual builder and some advanced use cases will require the classic way of building out views with the classic editor.

"Toolset Blocks should have the option to modify the width between the columns. "

This is not possible to do however it would be a great feature request to suggest to our development team or provide some non-css way to adjust this.

An example of how you would do this to adjust the width between the columns would be.
1. Assign the column a custom class by clicking on one of your results like this. See Screenshot
2. You will then be presented with the Block Settings. From here you can add any custom class you wish.
3. Style your custom class like this

.mycustomclass{
margin-right: 10%;
}

This will adjust the right margin between each of the columns. You can add the custom CSS when you highlight the entire view block and you will see the custom css section.

[Francisco Ramón Molina Busquiel]

Hi Shane,
As you will see in the screenshot of my first ticket I already did what you said about the 3 columns and then put the elements in them, but that was not what I asked you. If that is done, everything is disorganized (see screenshot g01.jpg)
What I want is to be organized as in the image g02.jpg.
After putting each element in its column what should I do to make it look like in the image g02.jpg?
Thanks for your help.
Regards,
Jose

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Jose,

Thank you for the clarity, in order to adjust this you will need to use some css.

What you can do is to send me a link to the page from your screenshot and I will identify the correct classes that you will need to adjust the margins for and also provide you with the css to ensure that the items are aligned correctly.

Looking forward to hearing from you soon.

Thanks,
Shane

[Francisco Ramón Molina Busquiel]

Hi Shane:
The page link is:
hidden link
Thanks for your help.
Regards,
Jose

[Francisco Ramón Molina Busquiel]

Your help is no longer necessary. I have been able to solve it.

[Francisco Ramón Molina Busquiel]

My issue is resolved now. Thank you!