[Resolved] Search fields in view breaks the table layout

[Author]

Posts

[Luo Yang]

Hello,

I have checked it in our to-do list, it is escalated to our developers as a bug of Toolset Blocks plugin, we will update here if there is any news. But I am not sure when will it be fixed.

For the new issue "I can't create a grid and then change it to table":
Yes, it is expected result, you will need to erase and rebuild this view block.

[tomerH]

HI,
Any update with fixing this bug? When will this be fixed?
thanks

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thanks for checking in.

I've checked and I'm afraid, we still don't have a time estimate to share at the moment.

However, I do have a workaround that you can use meanwhile, to have a look of the table layout, without actually using the table format in the loop's settings. The good thing about this workaround is that you'll not have to redo your already created views, once the issue with the actual table format is fixed. You can leave and old view, as it is.

1. Please create a new post view, but instead of the "Table" loop style, select "Unformatted".

2. In the "View Loop" block, include a "Container" block and in it include a "Grid" block wrapped inside, that is set to have the columns equal to the columns you need for your table.

3. In each grid, include an individual "Single field" block to show the respective fields data.
( example screenshot: hidden link )

The last step would be to include some custom CSS code, to show this completed grid with borders, similar to a table. You can create such a view and share it's link with us and we'll be able to help with some pointers.

regards,
Waqar

[tomerH]

Hi Waqar

Attached the requested view: hidden link

You have the login details (gave you before)

Headlines are needed: Company Name, Ticker, Stock Exchange, Currency, Market Cap, Volume, Adjusted Market Cap, Adjusted Volume.

Will I be able to modify the table later After you create the table? Because I'm still testing what fields I want in the table.

Let me know if you need anything else.

Thanks

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thanks for the update.

In your view's custom CSS field, you can include the following code, to adjust the borders, paddings and margin, to make this grid based structure appear more like a table:
( screenshot: hidden link )

.js-wpv-loop-wrapper .wpv-block-loop-item .wp-block-toolset-blocks-container .wp-block-toolset-blocks-grid {
    border: 1px solid;
}

.js-wpv-loop-wrapper .wpv-block-loop-item .wp-block-toolset-blocks-container .wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column {
    border-right: 1px solid;
}

.js-wpv-loop-wrapper .wpv-block-loop-item .wp-block-toolset-blocks-container .wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column .tb-field {
    display: block;
    text-align: left;
    height: 100%;
    margin: 0px;
    padding: 10px 0px 5px 5px;
    vertical-align: middle;
}

Adding the static header text should be easy. Just above the "View Output" block you can incluce another "Container" block with a "Grid" block wrapped inside, to show each columns heading text.
( similar to what you did for step 2 )

To modify the fields in this table structure anytime, you'll just need to adjust the number of columns in the used grid blocks.

regards,
Waqar

[tomerH]

Thanks.
I did that: hidden link

3 questions:

1. How can I adjust the "headline" grid block I added to the table (attached an example) and also make it look like as a part of the table?

2. How can it be with horizontal scrolling (desktop & mobile)?

3. I'm still trying to work somehow with the table layout. How can the table be with horizontal scrolling (please check the following link on mobile :hidden link)

Thanks.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thanks for writing back.

> 1. How can I adjust the "headline" grid block I added to the table (attached an example) and also make it look like as a part of the table?

- You can update the custom CSS code that I previously shared to:

.js-wpv-view-layout > .wp-block-toolset-blocks-container .wp-block-toolset-blocks-grid,
.js-wpv-loop-wrapper .wpv-block-loop-item .wp-block-toolset-blocks-container .wp-block-toolset-blocks-grid {
    border: 1px solid;
}

.js-wpv-view-layout > .wp-block-toolset-blocks-container .wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column,
.js-wpv-loop-wrapper .wpv-block-loop-item .wp-block-toolset-blocks-container .wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column {
    border-right: 1px solid;
}

.js-wpv-view-layout > .wp-block-toolset-blocks-container .wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column .tb-heading,
.js-wpv-loop-wrapper .wpv-block-loop-item .wp-block-toolset-blocks-container .wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column .tb-field {
    display: block;
    text-align: left;
    height: 100%;
    margin: 0px;
    padding: 10px 0px 5px 5px;
    vertical-align: middle;
}

@media only screen and (max-width: 781px) {
.js-wpv-view-layout > .wp-block-toolset-blocks-container .wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column,
.js-wpv-loop-wrapper .wpv-block-loop-item .wp-block-toolset-blocks-container .wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column {
    grid-column: auto !important;
}
}

> 2. How can it be with horizontal scrolling (desktop & mobile)?
> 3. I'm still trying to work somehow with the table layout. How can the table be with horizontal scrolling (please check the following link on mobile :hidden link)

- To enable horizontal scrolling in both these layouts (on smaller screens) you can additionally include some CSS code:

@media only screen and (max-width: 781px) {

.js-wpv-view-layout {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;	
}

}

Tip: To check which CSS code is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/