<ion-modal-view /> — Having rounded corners

ionic-v1
1

Hey guys,

I thought I was a able to solve this with my CSS skills, but somehow I just don’t manage to style the modals on larger screens (where you see the black-translucent background behind) to have rounded corners.

HTML structure: I have a long list in a scrollable ion-content-view, which is embedded in a modal view.

I tried applying

overflow:hidden;
border-radius: 8px

on so many elements, including , in modal views, etc., but due to the absolute positioning of the .scroll element, the overflow property of parent elements is being ignored.

Does anyone have an idea how to get rounded corners?

Screenshot: http://cl.ly/image/1y1K1m043s3L

2

This should do it

@media (min-width: 680px){
  .modal{
    border-radius: 8px !important;
    overflow:hidden !important;
  }
}
1 Like
3

Thanks for that, @mhartington!
However, this solves it only if you have no scrollable content inside. In the case there is a long scrollable list in the modal, that list will be drawn over the rounded corners of the modal, due to its position: absolute.

4

Hmm, I’m not seeing that in this example.

Any chance you could provide a demo of this?

5

Thanks for this answer,
How to make ion-list rounded corners ?