Okay
  Public Ticket #1005656
How to put a widget inside a modal ?
Closed

Comments

  • Fourat started the conversation

    Dear Sir,

    Am trying to put a widget inside a modal, i can see in your example dashboards that you are using col-sm-6 class, this seems not to work inside a modal, please check the attached screenshots.

    I can get the widget correctly displayed with col-sm-3, but they are too big and ugly, i would like to get them inside the modal with col-sm-6 size, exactly like your provided dashboards.

    Thank you !

  • [deleted] replied

    Hi Fourat,

    It depends on container size so in a basic modal the where the size is 50% of the window it shrinks the widgets to small size and breaks its the layout, because these widgets have 28px padding. But I've made some fix on this, here is the result:


    (view large version)


    (view large version)

    So they look better. The CSS to reduce the padding of dialogs is this:

    .modal .xe-widget.xe-counter-block .xe-upper, 
    .modal .xe-widget.xe-progress-counter .xe-upper {
    padding: 10px;
    padding-bottom: 0px;
    }

    I hope this will help you.

  • Fourat replied

    Thank you for your help Arlind, i see it will be more or less difficult to have 4 widgets in a row ?

  • [deleted] replied

    Hi Fourat,

    It depends on the size of the modal, because it will break its UI, but you can style them just for modal to fit to your design layout.

    Icons in widgets are font, so you can adjust the size with font-size CSS property and you can assign for example 4 widgets per row.

    Just mind the modal width, it can solve this issue without needing to restyle the widgets.