[Silk UI Web] column breaks for tablet portrait

[Silk UI Web] column breaks for tablet portrait

  
Forge Component
(71)
Published on 4 Oct by OutSystems R&D
71 votes
Published on 4 Oct 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



Hello,


The code you are looking for is located in ColumnsCSS.css. You can search for this stylesheet using your web browser.


Brit'ne Sissom wrote:

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





Okay, so just in case anyone has a similar need,


I wanted my theme to look the same as a phone-landscape when viewed in a tablet in portrait mode.


Since it seems there is no alternative but doing some hacking, instead of creating dozens of new/conflicting CSS classes, I created a small JavaScript that should do it.


Just add the code below to the "JavaScript" parameter (not as an expression!) of the layout webblock or any other webblock that is reused in all pages.


The obvious downside is that it works just for the client-side. This has no effect over server-side device detection (e.g. IsTablet() / IsPhone() functions). Webblocks that use those server-side functions might not work as expected (e.g. DisplayOnDevice), too.


SyntaxEditor Code Snippet

// Modify Silk UI device detector -- treat tablet portrait as phone landscape
if ( SilkDeviceDetect ) {
    var baseGetOrientation = SilkDeviceDetect.getOrientation;
    var baseGetDevice = SilkDeviceDetect.getDevice;
    var baseFnToggle = false;
    
    SilkDeviceDetect.getOrientation = function() {
        var baseOrientation = baseGetOrientation.call( SilkDeviceDetect );
        
        if ( baseFnToggle ) {
            return baseOrientation;
        }
        else {
            baseFnToggle = true;
        }
        
        var baseDevice = baseGetDevice.call( SilkDeviceDetect );
        
        if ( baseDevice == "tablet" && baseOrientation == "portrait" ) {
            baseFnToggle = false;
            return "landscape";
        }
        else {
            baseFnToggle = false;
            return baseOrientation;
        }
    };
    
    SilkDeviceDetect.getDevice = function() {
        var baseDevice = baseGetDevice.call( SilkDeviceDetect );
        
        if ( baseFnToggle ) {
            return baseDevice;
        }
        else {
            baseFnToggle = true;
        }
        
        var baseOrientation = baseGetOrientation.call( SilkDeviceDetect );
        
        if ( baseDevice == "tablet" && baseOrientation == "portrait" ) {
            baseFnToggle = false;
            return "phone";
        }
        else {
            baseFnToggle = false;
            return baseDevice;
        }
    };
    
    // Refresh device/orientation during window resizing
    function onResize() {
        
        // Do nothing if simulating
        if ( SilkDeviceDetect.isDeviceSimulation() ) {
            return;
        }
        
        var page = $( ".Page" );
        page.removeClass( "desktop small hd big tablet phone landscape portrait" );
        page.addClass( SilkDeviceDetect.getDevice() );
        page.addClass( SilkDeviceDetect.getOrientation() );
    }
    if ( window.addEventListener ) {
        window.addEventListener( "resize", onResize, false );
    }
    else if ( window.attachEvent ) { // IE 8 and addEventListener not supported browsers
        window.attachEvent( "onresize", onResize );
    }
}