Skip Navigation

[Gelöst] All cells use col-sm-X. I can set col-md, col-lg, etc. How to override col-sm?

This support ticket is created vor 7 Jahre, 9 Monate. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 5 Antworten, has 2 Stimmen.

Last updated by chrisH-10 vor 7 Jahre, 7 Monate.

Assigned support staff: Minesh.

Author
Artikel
#297838

I visited this ticket which comes close:
https://toolset.com/forums/topic/create-layout-with-mixed-mobile-tablet-and-desktop-col-width/

What I've done is to create my layout to work on most devices. The one exception is the -sm for factor. Not Layout creates columns using col-sm by default. I tried overriding the generated col-sm-x. This was emitted in the class section of the tag, but so was the default generated one and my change did not stick.

Is my only option to make the colums look like that I want in the -sm layout and then add classed to all other columns in the layout with the appropriate classes? This would be lame... I would expect the UI to show what I have drawn and the render code to check if I've entered col-sm- into class field and let that win.

#298035

Minesh
Supporter

Languages: Englisch (English )

Timezone: Asia/Kolkata (GMT+05:30)

As described in the old thread you can add additional classes under the CSS Styling tab, when editing a row or column. Please add required classes to "Tag Classes" input box, as described in the following link:
=> https://toolset.com/documentation/user-guides/using-html-css-style-layout-cells/

To override the CSS attributes you should try to use " !important". For example:

.col-sm-9 {
width: 25px !important;
}
#298062

Thanks for your reply Minesh. Your suggestion does not address my issue. Let me try to re-state.

The Layout UI only allows me to specify one layout for a page. The code generated from the UI layout uses col-sm-X to specify the layout. As it happens the layout I created in UI is applicable to all devices of size -md- on up. On -sm- devices I want a slightly different layout. I am hiding some items in the footer and need the layout to accommodate that.

Now if I add the -sm- layout in the UI and then adding -md- classes for all columns this is less than ideal because non-developers will see a layout that is not reflected on the front end most of the time and they will not have the tools to affect the layout that will be in primary use. Also I may have an issue that if I use all 12 columns for an -sm- layout then how to add cells for a larger -md- layout where I can show more columns.

So, I see two solutions.

1. I would expect the UI to show what I have drawn and the render code to check if I've entered col-sm- into class field and let that win. I think I must have this to do my work, or else not use your module. I'd be happy to patch it. If you have pointers for which PHP file I will need to work with that would be helpful.

2. The way better option would be to enhance the UI to perhaps default to -sm- and then allow users to create additional layouts for -xs-, -md-, -lg-. Other UI builders have this. Is this on your roadmap?

#298078

Minesh
Supporter

Languages: Englisch (English )

Timezone: Asia/Kolkata (GMT+05:30)

I consult your issue with our developers, for now I have raised your issue as a new feature request, I will get in touch with you as soon as I know more.

#309578

Minesh
Supporter

Languages: Englisch (English )

Timezone: Asia/Kolkata (GMT+05:30)

I have reported your issue as a feature request and our developers will work on it in order to made this feature available in near future release though I do not have any timeframe when it will made available. Please keep your eye on our blog to get latest updates.
=> https://toolset.com/blog/

#313274

.