Make Blox Widget Display Horizontally When Carousel Is Set to False

Comments

7 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
  • Avatar
    Artem Yevtushenko

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

    0
    Comment actions Permalink
  • Avatar
    Mike Slater

    Is there any way to have scripts apply to the PDF Display?

     

    I'm using a similar script to display tag elements in in inline list. Problem is that our clients need to access this as a PDF. The Blox scripts aren't rendered in exported PDFs.

     

    Is there any way around this issue?

    0
    Comment actions Permalink
  • Avatar
    Robert Blaisdell (Edited )

    Hope this helps

    edit.............

    Artem Yevtushenko

    I think it is the use of the arrow function that causes issues printing to pdf?

    From what I've read, that was implemented in ES6 -  so, i guess my question is, is Blox v2 ES6 compliant?  

    I did check the the plugin.json file in the Blox plugin folder but I did not see the es6 implementation requirements that are posted here: https://developers.sisense.com/pages/viewpage.action?pageId=557127

    I could be way off, I am far from knowing what the heck i'm talking about lol , please keep that in mind if you get to answering this..

     

    Thanks for all your contributions !! 

    1
    Comment actions Permalink

Please sign in to leave a comment.