Semantic-ui: [Sidebar] Sidebar in iOS

[LarsBuur]

Continuing on issue #2087 (currently closed)

Using the example from @Eliasvdb the output from the fiddle is this url:
http://fiddle.jshell.net/dzm8b28s/show/

The problem is that if you try to display that specific page in either iOS simulator or in safari on iOS then the height of the sidebar is only the height of the content - and the rest is hidden. Please see this image as an illustration.

I have tried to add this css (from the sidebar docs).

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

it is not clear from the docs (to me) if I manually should add the userAgent detection any ideas how this could be resolved?

[LarsBuur]

Please also see latest note on #3701

[AndrewMDuke]

I am also having this issue.

So far i have tried to add the CSS above, but from the documentation i feel that this is already included in the Semantic Ui CSS file. I have also experimented with height values for the sidebar, body and pusher div without any luck.

Have you had any luck finding a solution Lars?

[subotkevic]

Same problem, but I have solved it.

Basically, Semantic UI says that you need to add something like:
html.ios, html.ios body { height: initial !important; }

But instead of code above, you should add this one:
html.ios, html.ios body { height: 100% !important; }

The problem with that first code is that it sets html height to initial and after that it sets body height to initial... But what we really need is to set html and body height to 100%.

And the main problem is that Semantic UI includes "bad styles" by default, so you need to override them.

All in all, this solution works.

[jlukic]

Sidebar detects ios in its initialization code and automatically adds class ios to html.

I think I have a fix, but will have to verify it's all safe when i'm able to debug on my phone later this week.

[LarsBuur]

Bugger. Was hoping for this one in 2.2.3. Anything I can do to test your fix @jlukic ?

[arggh]

@jlukic Any updates on this? What's the proposed fix?

[pzi]

Fwiw, you can replicate the issue by going to any page on the Semantic UI site in iOS Safari, remove .main.ui.intro.container and .ui.black.inverted.vertical.footer.segment and you will get the following when opening the sidebar:

[jlukic]

I dont believe the height rules are necessary in the iOS fix anymore. The overflow rules however I can confirm are still very necessary, removing them will cause the bottom/top of sidebar to get cutoff due to the way iOS auto resizes document height when sidebar is visible.

Fixed in 2.2.8