Back Button and Switch Issues with Beta 2.0.7 vs Beta 2.0.0

[munsterlander]

So as the subject says, when I upgraded to Beta 7 to solve one issue, a few others have cropped up. If this should be posted elsewhere, please let me know - I was torn on github or here, but I wanted to post images.

Anyway, with beta 7, the back button on android doesn’t display correctly as shown and the same goes for the switches. I have pulled all custom CSS out to confirm it wasn’t a conflicting class. I have been able to confirm it is in the onsen.js file. I suspect it is these sections detailed below.

First up, Beta 2.0.0:

Now beta 7 (again, the custom CSS does not cause the issue):

As you can see, with Beta 7, the back button is missing the icon and is in the upper left corner. The switches are also not of the correct size.

For the back button in previous versions, they were defined as:

var iOSTemplateElement = util.createElement('\n    <span\n      class="toolbar-button--quiet"\n      style="height: 44px; line-height: 0; padding: 0 10px 0 0; position: relative;">\n\n      <i class="ion-ios-arrow-back ons-back-button__icon"\n        style="\n          vertical-align: top;\n          background-color: transparent;\n          height: 44px;\n          line-height: 44px;\n          font-size: 36px;\n          margin-left: 8px;\n          margin-right: 2px;\n          width: 16px;\n          display: inline-block;\n          padding-top: 1px;"></i>\n\n      <span\n        style="vertical-align: top; display: inline-block; line-height: 44px; height: 44px;"\n        class="back-button__label"></span>\n    </span>\n  ');

  var MaterialTemplateElement = util.createElement('\n    <span class="toolbar-button toolbar-button--material">\n      <i class="zmdi zmdi-arrow-left"></i>\n    </span>\n  ');

In 7, they are:

this.classList.add('back-button');
var label = util.createElement('\n      <span class="back-button__label">' + this.innerHTML + '</span>\n    ');
this.innerHTML = '';
var icon = util.createElement('\n      <span class="back-button__icon"></span>\n    ');

Is there CSS that I am missing for beta 7? Is the back button performing as it should as it believes it is material and should I be using ons.disableAutoStyling();? I tried using that in ons.ready() function but it didn’t do anything that I could tell.

Any thoughts as I am stuck?

Thanks!!

[Fran Diox]

@munsterlander Hey! You said you “pulled” the latest CSS. Therefore I assume you are not installing Onsen UI with bower or npm, but pulling the Github repo, right?

We are using stylus for the CSS what means that you will need to build the CSS as well: cd css-components && gulp build. I think that will fix the problems :)

[munsterlander]

@Fran-Diox Thanks! I meant I had removed my custom CSS. When I was on github I was unable to find the updated CSS in the repo when using the link for the JS: https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.7/js/onsenui.js

I searched the repo but came up short. Please excuse my lack of knowledge with git but is there a direct link to the CSS or is the build via gulp / npm the only way? My project wasn’t created via CLI so my build path is a bit different. I can create a empty project though via CLI and build it that way though, if that is the only way.

Thanks!

[Fran Diox]

@munsterlander said:

https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.7/js/onsenui.js

You can access the CSS exactly in the same way:

https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.7/css/onsenui.css
https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.7/css/onsen-css-components.css

It’s basically serving this directory: https://github.com/OnsenUI/OnsenUI-dist/tree/2.0.0-beta.7 (notice that the repo is “OnsenUI-dist”).

[munsterlander]

@Fran-Diox Ah! It was the tree I was missing! I searched the repo high and low and couldn’t find those pesky files. None the less, I have them now and it has solved the issue while introducing some new ones! LOL! At least now, I know its due to conflicting classes which I can fix.

Thank you!