If I understand the problem, I also have a situation like this. My login screen doesn’t need the splitter menu. But it doesn’t need a toolbar either. I first played with just removing swipeable, but later decided to keep my login page simple, and use “window.location = file.html” instead to go to the main page that has the splitter and everything.
Best posts made by Michael Redwine
-
RE: How to use splitter and navigation with a page that does not need the lateral menu?
-
RE: Android float not quite right
So I think I figured it out after a bit more digging. If anybody is interested, here are the changes I made:
[onsenui.js]
I added this to around line 18972:
_this._boundOnInput = _this._update.bind(_this); _this._boundOnFocusin = _this._update.bind(_this); _this._boundOnFocusout = _this._update.bind(_this);//<--- added this line
In the same area a little further down is a line “value: function _updateLabelClass() {”. I changed the whole block inside to this:
value: function _updateLabelClass() { if(this == document.activeElement.parentNode){ this._helper.classList.remove('text-input--material__label--inactive'); this._helper.classList.add('text-input--material__label--active'); }else if(this.value === ''){ this._helper.classList.remove('text-input--material__label--active'); this._helper.classList.add('text-input--material__label--inactive'); }else{ this._helper.classList.remove('text-input--material__label--inactive'); this._helper.classList.add('text-input--material__label--active'); } }
It probably could be a bit cleaner, but it does the job for me.
There are two lines a little further down that read “contentReady(this, function () {”. In those sections, I add the following, respectively:
contentReady(this, function () { _this2._input.addEventListener('input', _this2._boundOnInput); _this2._input.addEventListener('focusin', _this2._boundOnFocusin); _this2._input.addEventListener('focusout', _this2._boundOnFocusout);//<-- - added this line });
contentReady(this, function () { _this3._input.removeEventListener('input', _this3._boundOnInput); _this3._input.removeEventListener('focusin', _this3._boundOnFocusin); _this3._input.removeEventListener('focusout', _this3._boundOnFocusout);//<--- added this line });
[onsen-css-components.css]
I modified this css file a little bit. I based these modifications off my F12ing the Google login card using Chrome. I also added a new “inactive” style.
/* modified this style */ .text-input--material__label--active { font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; color: rgb(66, 133, 244); -webkit-transform: translate(0, -75%) scale(0.75); transform: translate(0, -75%) scale(0.75); -webkit-transform-origin: left top; transform-origin: left top; transition: color 0.15s ease-in, -webkit-transform 0.15s ease-in; transition: transform 0.15s ease-in, color 0.15s ease-in; transition: transform 0.15s ease-in, color 0.15s ease-in, -webkit-transform 0.15s ease-in; } /* added this style */ .text-input--material__label--inactive { color: rgba(0, 0, 0, .38); -webkit-transform: translate(0, 0%) scale(1); transform: translate(0, 0%) scale(1); -webkit-transform-origin: left top; transform-origin: left top; transition: color 0.15s ease-in, -webkit-transform 0.15s ease-in; transition: transform 0.15s ease-in, color 0.15s ease-in; transition: transform 0.15s ease-in, color 0.15s ease-in, -webkit-transform 0.15s ease-in; }
I think I got it all. I haven’t done extensive testing, but so far so good. Hope this helps someone out who might be looking for that one step closer to Material behavior. Again, I’m just a tinkerer, so there is most definitely a better way to do this. But this works for me.