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;
}
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 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;
}
I have a sliding toggle div that is hidden on page load and when a button is clicked gets revealed. The div is 250px in height and is positioned top 0px. I have also tried bottom 100% which sort of does the same thing. I am using several layers of z-index and have had to position some divs using absolute in order to get the layout I wanted. But I was hoping there is a way to push all of these divs down by 250px when the sliding toggle is revealed. I was thinking that instead of using toggle div, maybe there is a way to scroll the page to -250px so that all the content appears the same but is pushed down?
This is the css for the div I am using in case there is something that can be done here:
#slidingTopBar
{
background:#199651;
display:inline-block;
position: fixed;
height:250px;
width:100%;
left:0px;
top:0px;
z-index:56;
}
The script for the toggle is being used as follows:
$(document).ready(function(){
$("#slidingTopBar").hide();
$(".show_hide").css('position','absolute').show();
$('.show_hide').click(function(){
$("#slidingTopBar").css('position','absolute').slideToggle();
}); });
And the toggle is being called using this html:
<div id="TopBar">SHOW</div>
Which is all working, except it is overlaying the content that is already there whereas I want it to push it all down.
Any help appreciated.
Using the clearfix method directly below the toggle div or it's wrapper should fix this:
HTML: <div class="clearfix"></div>
CSS: .clearfix { clear: both; }
I am working on a responsive design where I have a div container that should be fixed at the bottom of the viewport. The problem is that the div keeps moving when I scroll up/down the page and it takes a little while until its back in its fixed position.
Does anyone have an idea how to fix this jumping around? What else can I do than position: fixed and bottom: 0?
Thanks!! :)
Using position: sticky; instead of position: fixed; solved jumping problem on iOS for me.
did you try:
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
or maybe
-webkit-overflow-scrolling: touch
Hope this helps you !
There is a great article here. In my case I had the fixed element inside of the scrolling div. Once I placed it outside, no more jitters.
https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios
For my current project, I had a <nav> element with a fixed position nested inside a <header> element with its own fixed position (semantically it could make sense to nest the nav the header for the DOM tree, but visually we wanted them to appear in separate places within the UI). Moving the nav out of the header, making it an immediate child of the <body> element, solved the problem.
I had a CSS block like this which was causing the issue.
html,
body {
overflow-x: clip;
...other styles
}
After the scrollable container tips above didn't work, I thought maybe the double overflow was the issue. I'm not sure why, but this fixed it for me:
html,
body {
...other styles
}
html {
overflow-x: clip;
}
How do I center align fluid layout (no fixed px values, only % values) for multiple screens ?
i.e. I am going to view the same HTML on desktop (can be multiple resolutions), can be mobile (e.g. iPhone) OR even a tablet (e.g. iPad).
I think the following solutions would not work in my case;
Using width:100% (there won't be any space left to center align)
Using widdth:80% or so and then using margin:0 auto (this would
work fine on desktops, but would waste space on mobile devices..i.e i
want to optimize limited space on mobile devices)
Using text-align:center (I want to center align the layout and not
the text)
Please suggest.
<div style="width:100%; text-align:center;">
<img style="margin:auto; display:block;" src="images/web_banner.gif"/>
<p>Website coming soon…</p>
</div>
Use align="center" in div then u will get content in div will center
It's extremely difficult to set a page unless it's just text to be completely liquid. Just because images need to be displayed at a certain size and then would need to be re-sized to fit smaller resolutions. That being said if this is just a text based site then the
width: 80%;
margin: 0 auto;
text-align: center;
iphone supports the the margin so this should work fine. If you have images and need to resize then you should really look at a jquery or javascript to adjust the images on resize.
Also use the text-align: center for backwards compatibility. Use all of that as a wrapper and then set for you content and navigation
text-align: left;