Make Blox Widget Display Horizontally When Carousel Is Set To False

[intapiuser]

Challenge

When you set the Carousel to false the widget will stack new items vertically. When we want the widget to populate itself horizontally we can use this code to change the display to inline-block instead of block.

Solution

In the widget editor view enter the script editor and enter the following code. Save the script, reload the page, and apply.

BloX 1.0:

widget.on('ready', function(a,b){ 
 $( ".BloX-container > div" ).css( "display", "inline-block" );
});

BloX 2.0:

widget.on('ready', () => {
   $(".blox-slides" , element).css( "display", "inline-block" );
})

Before:

After: 

If you'd like to use flexbox's perks in your columns (space between, flex grow etc), you can also use the following script as an alternative.

This script is meant to go into Blox's script tag, and contains an addition that limits the script's effect to the target widget only (without effecting any other BloX widgets in the dashbaord.

Syntax using space-around (equal spacing around containers):

const widgetElement = prism.$ngscope.appstate === 'dashboard' ? $('widget[widgetid=\"5d10a0ad4c2d4237741c2ec8\"]') : undefined; $('blox .content>div', widgetElement).css({ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around' }); $('.blox-slides, .blox-slides .c011', widgetElement).css({ display: 'flex' }); $('.blox-slides .c011>div', widgetElement).css({ width: '100%' });

Syntax using flex-grow (The containers will grow to fill the spaces between them, leaving no space):

const widgetElement = prism.$ngscope.appstate === 'dashboard' ? $('widget[widgetid=\"5d10a0ad4c2d4237741c2ec8\"]') : undefined; $('blox .content>div', widgetElement).css({ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around' }); $('.blox-slides, .blox-slides .c011', widgetElement).css({ display: 'flex', flexGrow: '1' }); $('.blox-slides .c011>div', widgetElement).css({ width: '100%' });

Please note:

1. Make sure to replace the widget ID to the target BloX widget's ID

2. This script might not work on old Internet Explorer versions that don't support Flexbox

3. In your widget, enable EITHER the above widget inline-block script OR the internal Flex blox-script. They won't work together.

Also, Use this for making the elements distribute equally in the line:

widget.on('ready', () => {
   $(".blox-slides" , element).css( "display", "inline-block" );

var parent = $('.blox-slides', element).parent()
$(parent).css({'display':'flex', 'flexWrap':'wrap', 'justifyContent':'space-around'})