Input width at 100% does not space itself correctly on the right side.

edited October 2013 in Newbie Questions
I am not sure if this was posted before but I found some weird behavior when it comes to an input. If the width of the decorator is 100%, the right end of the input looks like it is larger than the width of the screen. Now this wouldn't be a big deal if I could simulate that it works by adding margin on the right side, but you can't. Am I missing something? Here is the fiddle so you can play with it and see what I mean: http://jsfiddle.net/f8Yqc/2/

Comments

  • When you set the width to 100%, you aren't taking into account the automatic padding that the onyx styles add to the label... the actual width including padding is then larger than its surrounding container.
  • adding box-sizing: border-box to the input decorator should do the trick
  • I figured that's what it did Ben, but it doesn't change even if I add important. And I tried adding that on the div and decorator. Any reason why that didn't work either then? As for theryanjduffy, it doesn't seem to be working for me.
  • This worked for me in desktop Chrome

    http://jsfiddle.net/f8Yqc/3/
  • edited October 2013
    Would it make sense for the enyo team to put it in the base build? Would save lots of headache for new developers.

    I struggled with this too for many hours, then just ended up using float's and hacks to get mine to work. Wish I had known about this sooner!
  • I think we've been hesitant because box-sizing support in IE8 was a little off and doing it now would likely affect layouts of existing apps.
  • Thanks theryanjduffy and the Ben. Idk why using box-sizing didn't work for me the first time. But its working now :) Much appreciated.
Sign In or Register to comment.