I have the zoom control and the scale bar in the bottom left corner.
The problem I have is that when my map is rotated on mobile, they overlap with a custom control panel in the top left corner.
So how can I make the scale bar sit horizontally next to the zoom control?
You can do this by changing the css for the scale control. By default, controls on the left side of the screen will be styled as display:block and float: left, but if you add this to your css, the scale should display inline with the zoom control:
.leaflet-left .leaflet-control-scale {
display: inline-block;
float: none;
}
Related
I am unsure on how to add "spacing" between my slides in pure react carousel.
Is there any easy option how to add gaps between slides ? I've tried several approaches. I need correct padding when sliding one by one. When using margin, applying on slide or inner element, slider get broken, pushing last slide on new line block.
Pure React Carousel components behave like a suite of HTML tags. A good analogy for the suite of Pure React Carousel components are the Table tags in HTML: table, thead, tbody, tr, th, tr, tfoot, colgroup, etc. The table tags are bare-bones, and only use default styles. You must apply css to them in order to customize your carousel.
Pure React Carousel is responsive by default. Meaning, it will stretch to the full width of its parent container unless the parent container uses CSS to restrict the width of Pure React Carousel.
The slides in Pure React Carousel have an intrinsic height by default. Meaning, just like an image tag, the height of each slide gets taller the wider each slide becomes. Just like the height of an image with no height attribute set gets taller the wider the image becomes in a browser.
The <Slide /> component has a child div with the class .carousel__inner-slide. To give your carousel the "illusion" of spacing between cells, create a css rule for .carousel__inner-slide in your project. That or pass the <Slide /> component a class name via the innerClassName prop.
Example:
.carousel__inner-slide {
width: calc(100% - 20px);
height: calc(100% - 20px);
left: 10px;
top: 10px;
background-color: burlywood;
}
View a demo:
https://codesandbox.io/s/withered-wood-4bx36?fontsize=14&hidenavigation=1&theme=dark
This worked for me:
.carousel__inner-slide {
margin-right: 20px;
}
I just wondered if there's a way to centralize the sap.m.IconTabBar. So that the icons don't start straight on the left but they are all central. The icons should take the whole length of the sap.m.IconTabBar.
Is there any possibility or no way to adapt the orientation?
Thanks
There is no property in the IconTabBar control which would allow you to center align the selection Icons. But it is achievable with some CSS trickery.
If you assign a text-align: center property to the container of the selections they will align to the center, as each of the child div's being inline-block elements.
XML:
<IconTabBar
class="tabbedBar"
...
...
CSS:
.tabbedBar .sapMITBHead{
text-align:center;
}
Why is the like box bottom being cut when I set a custom height? It just cuts the faces and its lower part isn't shown.
How can i fix it?
Thanks
If I understand your correction properly, this would be because you're not setting the height of the contents of the box, but rather the box itself.
<div height="x">
doesn't care about what's in the div, it makes the div only show x amount of it.
I was having the same issue and added these to my CSS
.fb-like span {
height: auto !important;
}
.fb-like iframe {
position: relative !important;
}
I've got a div with a background image that includes both the normal and hover state, so when you mouse over, the bottom half of the background image is shown. I'm making a mobile version of the same site, and I'd like for only the first half of the image to be shown as the same div grows in height. However, as it is currently, when the div grows, I obviously see the second half of the background image. Any thoughts on how to hide the bottom half of the background image while still showing the top?
.community a{background: url(images/migtea.jpg) 0 0 no-repeat #FFF; display:block; float:left; margin:0 10px 10px 0; padding: 10px 10px 10px 151px;}
.community a:hover{background-position: 0 -131px;}
Well only problem is that "clip-path", "mask" and "filter" (no not the
IE "filter" but SVG "filter") only works for Firefox and Safari (yes
no Chrome). And they do it differently. Firefox needs an svg clippath
specified via an id eg:
.box { clip-path: url("roundedrect.svg#cp1"); }
while Safari just uses
the shape itself to create clippath from:
.box { clip-path: url("roundedrect.svg"); }
I have yet to discover a
way to do it in Opera and Chrome.
But for FF and Safari "cross browser" example i have created this:
http://tokimon.dk/testing/css-svg-test.html.
Otherwise maybe you can get something out of the background
manipulation in CSS 3: http://www.css3.info/preview/
Tokimon
(source: Showing only part of background image using CSS3)
Else, all you can do is either separate the background images, or put a container (div) with a solid background over it and "hide" the part you want to hide (but it's not a very elegant solution)!
Hope this helps!
hey guys,
I have a div.mapFullscreenContainer
#mapFullscreenContainer {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
This div is shown when I scroll to the bottom and click on a button. In normal browsers this works just fine. The overlay is 100% wide and 100% high and lies on top of the page.
However on touch devices there is the problem that the overlay is always out of the viewport. Imagine the button that makes the overlay visible is in the footer of a rather long webpage. The overlay is always at the very beginning of the page so it's not immediately visible to the user. The user has to scroll back to the top to see the overlay.
Any idea how I could fix that so it behaves like on a normal browser. bottom:0; instead of top:0 doesn't make a difference.
you can use JS to count and apply total height of your page to this div http://jsfiddle.net/seler/FjeyK/