Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. Michael Redwine
    3. Best
    M
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups

    Best posts made by Michael Redwine

    • RE: How to use splitter and navigation with a page that does not need the lateral menu?

      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.

      posted in Onsen UI
      M
      Michael Redwine
    • 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.

      posted in Onsen UI
      M
      Michael Redwine