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


#1

CSS file
package.json

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.


#2

main.js
index.html

Here’s probably more vital two.


#3

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

Edit:

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

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


#4

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:


#5

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…


#6

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

body { margin: 0; }

#7

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.