Meteor & Semantic UI - Sidebar

help
1

I’m building a mobile app with Meteor and Semantic UI. Every time I open the sidebar though my screen gets cut so that just the part of of the body with something on it shows and then the part without anything in the body shows grey. It re-renders based on the size of the body. Semantic says to do this:

iOS Sidebars
Sidebars use a special fix for iOS that are added using userAgent detection.

This should have no meaningful affect on your code, but will prevent the canvas from incorrectly autoresizing when a sidebar opens.

html.ios {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
html.ios,
html.ios body {
  height: initial !important;
}

However, that doesn’t seem to fix the problem. Anyone with any experience with this?

2

Here is a picture

742×1206 38.9 KB

3

Hi sscaff1,

you can fix this with this code:

html.ios, html.ios body{
  height: 100%!important;
}

best norbu

4

This fixes it if you don’t have a fixed bottom menu. It seems to float that menu when you scroll…I’ve looked it up and it seems like people recommend the above solution to fix the grey space and then use the one recommended on semantic’s site in order to fix the floating menu bar…I wish I would have used ionic or something else…Oh well.