I'm trying to use Semantic-UI sidebar .. But it is always displayed an empty space on right in sidebar: See the grey area...
For iPads (landscape) and computers (screens larger than 640px): Show sidebar
For mobiles or ipads (widescape) (screens smaller than 640px): hide and display sidebar menu
But it is always displayed an empty space when the screen is larger than 640px.
The sidebar has a width of 101px, but seeing the css is calculating how 260px.. in chrome dev tools transform: translate3d(260px,0,0);
Source here.. http://www.webpackbin.com/N1hpsz92Z
Related
In my application, in a page I have a carousel in toolbar, to have a top fixed position.
The Carousel is not visible until I put a position:fixed in a div containing the carousel.
In this page I have a sliding menu too.
When I slide the sliding menu, the carousel remains fixed in the view, over the sliding menu, instead to swipe right in the page.
I experienced this problem in Android default browser and like a builed app in Android. In the desktop browser (Firefox and Crome) it's all ok.
How can I solve this problem?
I solved my carousel issues with the sliding menu just by containing in in an column. If you have to, you may have to adjust the width to be under the set for the sliding menu. It may even work with width being set at 100% but, putting it in its own column or row helped me out a lot avoiding those overlapping issues.
Example:
<ons-row><ons-col width="10%"></ons-col>
<ons-col width="80%"><br /><h4>Carousel</h4>
<ons-list-item>
<ons-carousel swipeable overscrollable auto-scroll style="height: 50px; width: 100%; align: center;" initial-index="0" swipe-target-width="100">
<ons-carousel-item class="button--menu">
Item 0
</ons-carousel-item>
<ons-carousel-item class="button--menu">
Item 1
</ons-carousel-item>
</ons-carousel>
</ons-list-item>
When app bar is present, the height of the app bar affects the content on the rest of the page.
For example, if the app bar has a Height of about 25px when ClosedDisplayMode="Minimal", the rest of the content on the page (rootGrid) would have its actual height of Screen Height - 25px. So the app bar is not overlay on page content.
This is visible especially when the content is VerticalAlignment="Center" or Bottom.
Is there any way to avoid this? Something like a ZIndex on the AppBar so that it is displayed over the page content and not trimming it on the bottom side of the screen.
It is possible to tell the renderer that the whole "window" should be used when rendering and not just the visible part. By calling Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetDesiredBoundsMode(ApplicationViewBoundsMode.UseCoreWindow) the renderer will include the areas beneath the chrome of the window (ie the system tray on top of the screen and the app bar at the bottom). The chrome will always be on top of whatever is rendered from xaml.
ApplicationView is documented here.
If you don't want the system tray on the top of the screen to overlap the content, you'll have to compensate with a margin on the root container of your visible xaml.
I'm confused as to why the navbar does not collapse at its default breaking point of 768px.
In bootstrap's own example the navbar does not collapse at 768px.
I'm having a problem with this on my own website, and went and tested on bootstraps examples.
I tested bootstraps example page here in this screen emulator. I also tested on a real ipad. Both do not collapse at 768px.
IPad - Screenfly
Bootstrap navbar collapse at viewport width 767px, this means your window width is 781px. If your viewport width reaches 768px or any higher value, your navbar will be displayed normally like you see it on any desktop.
Width viewport 767px
Width viewport 768px or higher
You probably was confused by the window width, anyways, if you want to display the viewport and window size like i did in those screenshots, you need web developer addon for firefox, you can also see it in the screenshot, all you need to do is to press on that Resize button and pick Display Window Size but it also has other cool options like View Responsive Layouts or Resize Window.
Hope this helps.
I want to collapse navbar when screen size is <=750px.
You can use Bootstrap's customization tool to build a modified version of Bootstrap. From here, you can alter #grid-float-breakpoint to another breakpoint defined by Bootstrap (ie, xs, sm, md, lg).
You need to modified according to highlighted red in below image.
When you're finished, navigate to the Download section, and click On Compile and Download
& then use it bootstrap js & CSS.
Did you not read the docs?
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
I'm developing a website and there is white space on the right hand side of the home page. I know it's something to do with the image slider as it only happens on the home page where the slider is.
See here: Home Page
The issue is most noticeable on iPhone's and but desktop browsers add a scroll bar. On browsers you will notice that when you hover over the slider the scroll bar disappears.
The slider has been customized so the images are background images so they can be centered on the page.
Any help is much appreciated
Sorted it now!
It was the .flexslider:hover .flex-next and .flexslider:hover .flex-prev that had some CSS applied to them: left:-38px; and right:-38px;