[Silk UI Web] column breaks for tablet portrait

[Silk UI Web] column breaks for tablet portrait

  
Forge Component
(52)
Published on 15 Nov (4 weeks ago) by OutSystems R&D
52 votes
Published on 15 Nov (4 weeks ago) by OutSystems R&D

I'm using outsystems 9.0 with silkui and am trying to get the columns to break using the responsive silkui stuff. I've gotten them to break successfully for both the phone and tablet but the problem is I only want a column to break for the "tablet portrait" class (basically < 767px) and not for "tablet landscape" ( >= 768px). Is there any css or setting I can change to achieve this? I've looked around the css and in outsystems and haven't been able to find anything other than actually changing the js or css in the silkui espace itself which seems like a bad idea. I've tried using media queries but I guess they don't work if I'm using silk ui whatever.


Thanks

Hello!

Unfortunatelly there isn't an easy way to do it, Columns need 3 parts to work properly:

  • The Columns Block
  • The CSS
  • The Columns Break static entity

To create that behavior, you'll need to clone those parts and change them manually to accept a new configuration. Doing this on Silk UI Web would result in a breaking change, so we're not expecting it in short term.

However, you can override the CSS to always have the same break behavior in Tablet Portrait, this would be easier and not require any changes to Silk, this can be made in the application only, by using the .tablet.portrait selector.

My regards

Thanks! Do you know which css to override? I've looked through the silkui file but it's super long and tedious ha. If you don't, that's fine, I can find it.


Dinis Carvalho wrote:

Hello!

Unfortunatelly there isn't an easy way to do it, Columns need 3 parts to work properly:

  • The Columns Block
  • The CSS
  • The Columns Break static entity

To create that behavior, you'll need to clone those parts and change them manually to accept a new configuration. Doing this on Silk UI Web would result in a breaking change, so we're not expecting it in short term.

However, you can override the CSS to always have the same break behavior in Tablet Portrait, this would be easier and not require any changes to Silk, this can be made in the application only, by using the .tablet.portrait selector.

My regards