POPUP
Application Type
Traditional Web
Service Studio Version
11.14.0 (Build 54483)
Platform Version
11.14.0 (Build 32648)

Hi Friends,

My problem is regarding how can we styling the popup widget as cornering the border on each end or particular end only (ex:topleftend) Like how we are doing in Container alignment in controls?

Couldnt do it by myself

Is any css style for this (base theme)????

Hope anyone will answer this...Thanks

Hi Steve, 

You can style the popup by picking its class element using Inspect element. For your scenario, the class and styling will be

 For all 4 sides border-radius,

div.os-internal-Popup .os-internal-ui-dialog, div.os-internal-Popup.os-internal-ui-dialog {

border-radius: 10px;

}

For Top left end example scenario,

div.os-internal-Popup .os-internal-ui-dialog, div.os-internal-Popup.os-internal-ui-dialog {

border-top-left-radius: 10px;

}

Try applying this CSS class to your page or theme level, It will work. hope this helps!

Regards,

Saravanan Santhanam.

mvp_badge
MVP

Just to add to this answer to be sure and complete. These are all the border:

Alternatively you could just use:

border-radius: 10px 10px 0 0;

In sequence this sets:

border-top-left-radius to 10px
border-top-right-radius to 10px
border-bottom-right-radius to 0px
border-bottom-left-radius to 0px





Hi Steve,

You can apply this for your case at your screen where you call popup screen:

div.os-internal-Popup .os-internal-ui-dialog,
div.os-internal-Popup.os-internal-ui-dialog {
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

Regards,

Khuong

can not set a width size on popup...even if i applied in container of popup it wasn't working 

which way to do that to get that exactly what we need &

how to set the popup on atmost right end without any gap on screen?

mvp_badge
MVP

Hi Steve,

I assume you are using the modal for the popup rather than the popup editor (which is deprecated) 

if so you can add the following css style:

.modal {
    padding-right: 0;
}	


this together with setting the position to center right should move it right without a gap:

To change the width you can add the class, where you either unset the max width or specify a new max width and width:

.modal-wrapper {
    max-width: unset;
    width: 600px;
}

Hi Steve,

I updated my reply above and included padding 0 for no gap in popup screen. Please note that make sure no container under LayoutPopup's MainConten popup has padding setup. (For example container with class is card will have padding: var(--space-m); ) 

div.os-internal-Popup .os-internal-ui-dialog,
div.os-internal-Popup.os-internal-ui-dialog {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0;
}

For setting popup size, you can set it from Popup_editor, not from container in popup.


Regards,

Khuong

mvp_badge
MVP

Hi Khuong, 

Do keep in mind that the popup editor is deprecated 

Hi Eric,

Thanks for your reply.

I haven't notice that popup editor is deprecated (as I turned to work on reactive more than 1 year already).

Regards,

Khuong

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.