[Bug] 1% padding and 98% height, scroller still there


CSS file

So, the bug is, that saying, that <input> is supposed to have 1% padding and 98% height, making it total of 100% (padding from 1% top and 1% bottom). Saying this causes scroll-bar to display. If it wasn’t enough. Ultimately to get rid of the scrollbar (besides of overflow: hidden;), I need to set height of 91%. Which would normally leave 7% of free space below the <input> field, however, setting it to 91% seems to fill the application completely (as it should do with 98%):

input { width: 98%; height: 91%; padding: 1%; }

We could complain about my non-professional coding. But this bug wouldn’t occur naturally in a website. So, either I’m missing a very vital part that I don’t know yet (about electron), or it’s a bug and I think it’s worth investigating.

Apparently new users, can use just two links. I’ll post Pastebin links in next two posts.

PS: Great job guys. Electron is precisely what I sought for an entire week.
PS 2: Only horizontal (height) creates this problem. Vertical lengths (width) adjusts accordingly and problemlessly as it should. Weird.



Here’s probably more vital two.


Pretty sure this isn’t a bug.
Try adding box-sizing: border-box; to the input maybe?


But this bug wouldn’t occur naturally in a website.

Yes, it would. http://output.jsbin.com/mahuzuwuze


My suspicion is that this isn’t a bug … or if it is it exists in Chromium too. I don’t believe Electron does anything to layout and rendering … but I’m Not a CSS Guy™, so I leave that kind of thing to people that know more than me :laughing:


I’m not really a CSS Guy™ either, I just happen to have struggled with CSS quite a bit in the past.
Anyway, the output in the jsbin linked above was tested in Firefox so…


Note that the body has as default 8px margin.
So make sure you have this also in your CSS:

body { margin: 0; }


I copied the content of your index.html and style.css, and I was seeing a vertical scroll bar. The problem is in this little known fact about CSS: percentage values for vertical padding use the width of the element to calculate a percentage from! Because your screen is wider than it is tall, 1% vertical padding is more than 1% of the height of the viewport. So when you use height: 98%;, the extra padding will cause the input to overflow the body, hence the vertical scrollbar. A solution to your problem is, as @DiscordantNode suggests, to use box-sizing: border-box;. Add the following lines to your input rule:

input {
    box-sizing: border-box;
    width: 100%;
    height: 100%;

You can read more about the box-sizing property here.