Closed ulver2812 closed 4 years ago
Not possible, because the map on Android/iOS are not HTML element
Ok, thank you very much!
Hello!
Actually I faced same issue and created some "dirty" walkaround. Maybe it will be useful for somebody who visit this issue. It's a bit hacky, but if someone really needs such styling I think it's better than nothing.
Main idea of the solution is to create 4 divs placed on corners of map element. All divs will have cropped round area to simulate our border radius.
HTML: We are creating wrapper for map and 4 corners.
<div class="ps-basic__map-wrapper">
<div class="ps-basic__map-corner ps-basic__map-corner--top-left"></div>
<div class="ps-basic__map-corner ps-basic__map-corner--top-right"></div>
<div class="ps-basic__map-corner ps-basic__map-corner--bottom-right"></div>
<div class="ps-basic__map-corner ps-basic__map-corner--bottom-left"></div>
<div id="map" class="ps-basic__map"></div>
</div>
SCSS:
.ps-basic {
&__map {
display: block;
height: 31vh;
overflow: hidden;
}
&__map-wrapper {
position: relative;
}
&__map-corner {
width: 30px;
height: 30px;
position: absolute;
overflow: hidden;
z-index: 5;
&:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
box-shadow: -20px 40px 0px 50px #121212; // #121212 is color of our corner
border-radius: 8px; // This is our border radius which we want to set
}
// we can omit &--top-left as top: 0; left: 0 are defaults
&--top-right {
right: 0;
&:before {
right: 0;
}
}
&--bottom-left {
bottom: 0;
&:before {
bottom: 0;
}
}
&--bottom-right {
right: 0;
bottom: 0;
&:before {
right: 0;
bottom: 0;
}
}
}
}
Hi, is it possible to have the map border with radius property?
I'm trying to set the border radius of the map canvas to 40px, it works on browser but it doesn't work on iOS 9.3.5, seems that the overflow isn't hidden.
I'm submitting a ... (check one with "x")
If you choose 'problem or bug report', please select OS: (check one with "x")
Environment information
Cordova CLI version
Cordova platform version
Plugins & versions installed in project (including this plugin)
Dev machine OS and version, e.g.
iOS build issue:
Screen capture or video record: (the screenshot is taken from browser just to explain what is going wrong but it is identical on iOS 9.3.5)![Cattura](https://user-images.githubusercontent.com/25301598/72817645-6a8c4900-3c6a-11ea-930e-4c48e0d5c24b.PNG)