Why does placing two canvas element and having position absolute apply on second element increase their width? | Sololearn: Learn to code for FREE!

+6

Why does placing two canvas element and having position absolute apply on second element increase their width?

https://code.sololearn.com/W17cK3U0IHTV/?ref=app

7/29/2021 7:57:38 AM

Abhay

14 Answers

New Answer

+5

Hello Abhay , both canvas still maintain their original with and height. However, I'd like to inform you that canvas aren't actually a block element. It appears like the width of another canvas was stretched out because they have the same color but in reality, that's two diferent canvas placed beside themselves. To fix this bug, you have to add an additional property to #canva2 left: 0px; ``` To see this bug in action, add different colors to each canvas ```

+5

Runtime Terror ty .Maybe it is working fine according to you but i can't understand how it is . I still have the following questions , 1) why adding position:absolute to second canvas make both of the canvas width stretch more than widow width . 2) and why adding position:absolute and left:0 px hides the first canvas permanently . I used z-index on canvas1 but it seems like it disappeared . Btw , i thought making elements absolutely positioned makes them start at top left of the window, didn't knew or understood that i had to use left property as well. Edit: i just noticed that canvas1 is still there but z-index doesn't seems to work on it!

+4

Abhay - Your question seems to be misunderstood by everyone here. Or... it could just be me. ;) If I understand you correctly, #canva2{ position: absolute; } is creating some odd behaviors with the window.innerWidth value. My observations are as follows: From Android: - Running Code As Is: -- console displays: -- 612 616 - Running code after removing line 15 in CSS tab: -- console displays: -- 477 481 From Web Browser: There are no differences in the console output for window.innerWidth in any scenario. In fact, the same value is always displayed on both lines. In my case, for the width of my output panel, the value was: 496 496 This was the case regardless of the css position value on #canva2. In short... I have NO idea why this behavior is occurring on the Android app. It would be good to know if this is the same for those running the iOS app.

+4

I should also note that adding left: 0px; to #canva2 with position: absolute; does return the console output back to: 477 481 However, the following still remain unclear: - Why the difference between Android and Web? - Why left: 0px; restores to the original width prior to using absolute position? - Why the border widths affect the 2nd output value in Android? - Why the visual difference isn't affected when the width is increased? There's no scroll bar for the increased width. It's very odd.

+3

As long as my device is concerned, this is a fixed version of your code tested on many browsers including sololearn web for Chrome, chromium and firefox11, android os 6 - 10, Ios 7 - 8 and it's working like I think it should https://code.sololearn.com/WuW8L4mEpfFO/?ref=app

+2

i understood what he meant, but i was shocked by this odd behavior like you. i have tested this code in Chrome android . on Chrome a scrollbar added to page. And the width of the page really increased. But on Android webview in SoloLearn , only the value of the numbers changed and not the real width of the page.

+2

Thank you all for the answers. For me it works the same in browser (chrome) and on android sololearn app. Looks like it has do with those element being inline elements . I don't really know what is happening but from all the answers (especially by Nico's one) ,what i understand is that the second canvas increases the body element size which results in increase of window's innerWidth value. However, i still can't understand how all of it works. I have few questions , 1) Are styles applied immediately after each line is executed in javascript ?,if yes then initially window width was equal to 360 (for my device) , and it shouldn't result in increase of width . You can try to set it explicitly. If the answer is no , how is it working then ?

+1

Add left: 0; and it works

+1

Runtime Terror ty for answering . But i have different colors added to both and making them block level element works fine ,similar to what position absolute do with left :0px . Also they seem to work fine without making them block. And now all this doesn't makes any sense to me . I thought css was easy (at least something that makes sense) . Anyway , tyvm!

+1

The position absolute doesn't do anything unless you explicitly mention or add either a left/top property

+1

1. I dont understand your first question about stretching so I may not be able to answer it. The reason for this is because when I tried to output both width, it's always equal and there was no sign of stretch in the resulting output. 2. Position doesnt hide a container but if a container is on top of another, and that container has a solid color then obviously you wont be able to see what's behind it. The reference for this is known as the "painter's algorithm"

+1

Abhay 1. Both are stretching because the second pushes the size of the body and the first canvas ajusts itself 2. It draws html element from the top to the bottom. If the absolute element is on lower line, than it gets drawn later

+1

Runtime Terror ty vm , i will look into painter's algorithm. My first question is very clear .What i mean is Both elements have a width set to window innerWidth which should be 360 according to my device screen size .But adding position absolute on second canvas stretch both of them to almost double width of that .

+1

when you add border to first canvas and you initialize a explicit value to canvas width, box-sizing loses its affect. border is 4 pixel and innerWidth is "x" so innerWidth becomes x+4. thereby width of second canvas is x+4.