Navigation

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

    Topics created by Michael Redwine

    • M

      change lazy-repeat behavior
      Onsen UI • • Michael Redwine

      1
      0
      Votes
      1
      Posts
      183
      Views

      No one has replied

    • M

      Checkbox and ripple
      Onsen UI • list button ripple checkbox • • Michael Redwine

      3
      0
      Votes
      3
      Posts
      798
      Views

      E

      Can you make a working example of this at https://onsen.io/playground/ and link it here? If it’s a bug (as it seems like it might be), I’ll add your example to a GitHub issue to track the problem.
    • M

      addEventListeners piling up
      Onsen UI • • Michael Redwine

      3
      0
      Votes
      3
      Posts
      1720
      Views

      D

      @Michael-Redwine Are you using React 16? Could be related to this issue: https://github.com/facebook/react/issues/12141 frehner created this issue in facebook/react closed React16 dev memory leak on render with event listeners #12141
    • M

      lazy list and "go to" an item
      Onsen UI • • Michael Redwine

      2
      0
      Votes
      2
      Posts
      1218
      Views

      The functionality of ons-lazy-repeat is relatively basic, allowing for the scrolling of simple lists. For this kind of dynamic functionality, I would recommend using ons-list instead. Unless you have hundreds or thousands of items, I don’t think you are likely to notice a huge performance difference.
    • M

      Solved Bug? Popover with one list-item
      Onsen UI • • Michael Redwine

      3
      0
      Votes
      3
      Posts
      1758
      Views

      I’m not sure why we do have that min-height. I guess it’s just a safety net, but in this case it’s definitely an issue. Thanks for the workaround.
    • M

      Changing GestureDetector property
      Onsen UI • • Michael Redwine

      1
      0
      Votes
      1
      Posts
      889
      Views

      No one has replied

    • M

      android back button with ons.notification.alert()
      Onsen UI • • Michael Redwine

      5
      0
      Votes
      5
      Posts
      2791
      Views

      @Michael-Redwine Could be, but I don’t think it’s the most common use case. You can easily change the global handler and ignore device back button if that’s what you want (explained in the previous link). Or ignore it if document.querySelector('ons-alert-dialog') returns something (i.e. there is an alert in the dom). Or simply disable handlers when you show the alert (ons.disableDeviceBackButtonHandler()). I think any of these possibilities would be enough for that use case.
    • M

      Splitter and navigator
      Onsen UI • • Michael Redwine

      4
      0
      Votes
      4
      Posts
      3791
      Views

      Can someone help me with my issue on nesting ons splitter inside ons-navigator? https://community.onsen.io/topic/3371/unhandled-promise-rejection-expression-split-is-not-a-function-when-using-splitter Thanks!
    • M

      Browser and Android back button
      Onsen UI • • Michael Redwine

      2
      0
      Votes
      2
      Posts
      2003
      Views

      @Michael-Redwine The Android back button in Cordova apps should work well. For browsers back button, we are not modifying the history stack since this framework was originally meant for Cordova apps. Perhaps we should add it for PWAs. In any case, I think you can use navigator’s postpush event to run history.pushState and then use window.onpopstate to call myNavigator.popPage. I think that should work :+1:
    • M

      Android float not quite right
      Onsen UI • android material design input float • • Michael Redwine

      2
      0
      Votes
      2
      Posts
      1538
      Views

      M

      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.