cancel
Showing results for 
Search instead for 
Did you mean: 
intapiuser
Community Team Member
Community Team Member

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'})
Version history
Last update:
‎02-15-2024 09:48 AM
Updated by:
Contributors
Community Toolbox

Recommended quick links to assist you in optimizing your community experience:

Developers Group:

Product Feedback Forum:

Need additional support?:

Submit a Support Request

The Legal Stuff

Have a question about the Sisense Community?

Email [email protected]

Share this page: