Make Blox Widget Display Horizontally When Carousel Is Set to False

Comments

4 comments

  • Avatar
    Ron Oren

    Good Idea Artem, let us explore this and potentially add this ability to BloX 1.2 ( ETA end of Q1 this year)

     

    0
    Comment actions Permalink
  • Avatar
    Delsaran Bigglesworth

    Has the class name on this changed, this isn't working for me

    0
    Comment actions Permalink
  • Avatar
    Adi Lewenstein (Edited )

    Hi All,

    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%' });

     

    You can see both in action in this dashboard

     

     

    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.

     

    1
    Comment actions Permalink
  • Avatar
    Delsaran Bigglesworth

    Thank you Adi,

    I think I was just trying to grab the wrong element.

    0
    Comment actions Permalink

Please sign in to leave a comment.