Iven Posted April 9, 2018 Share Posted April 9, 2018 Hello I have a problem. I have been playing around with element width/heights and positioning to make sure everything look cool and neat regardless of how the window(or web browser window) is resized. One thing that constantly comes up is elements within a div that gets forced out of the div For example If I have a div and I set the width/height to percentages and I place elements within the div lets say a form with two inputs for username and password. If I resize my window very small there comes a point where the input boxes are totally pushed out of the div? Why is that and how can I fix it so that the element(inside div) also resizes as the div gets resizes(because of the window being resized). I am confused because I am thinking that if my div's width/height are percentages they resize dynamically as my window gets resizes why isn't this happening to the inputs or other elements(I tried with an image element and a few p elements nested inside the div) PLEASE NOTE(I already tried relative positioning didn't work, I also gave my form width/height percentages but that also doesn't work) Here is my example code for a better understanding If you look at the image called WRONG.png you will see my inputs from my form inside the div is pushing OUTSIDE the div? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 9, 2018 Share Posted April 9, 2018 Using position: absolute, takes it and child element out of flow from the other elements, its child input element are by default using a set width, and not responsive, so remain that width no matter the width of the parent container width; Link to comment Share on other sites More sharing options...
Iven Posted April 10, 2018 Author Share Posted April 10, 2018 I think maybe I asked the question wrong. If I can use the following link as an example https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_form I have been using this to try and get it right. Let's just focus on the First Name input(text) ,the Last Name(text) and Submit(submit) input elements.It doesn't matter how you resize the window(width resize or height resize the elements stay in the container div) I got the width right(meaning I can change my width and the text input elements will resize accordingly I just had to add the width to 100% in my css). HOWEVER if I resize my window height the elements get totally pushed out of the div?How do I force it to stay in the div(or as the link example the elements stay in the div but there is a appears a scroll bar to scroll to) Examples in the pictures below Link to comment Share on other sites More sharing options...
dsonesuk Posted April 10, 2018 Share Posted April 10, 2018 You asked the right question, but you didn't listen. Usually you wouldn't use a height, you allow it to grow with content, I.E. the input, paragraphs etc elements. Using position: absolute; takes it out of flow, other elements just move into the space it would occupy, if its dimensions are not detectable, you have to set the height of it parent container. BUT! if you use fluid vh unit, the height can easily shrink to a lower height, than the total height of the undetected absolute element, so overflow will occur outside parent container. Also the overflow outside the parent, means any elements below the parent, would be overlapped by the form inputs as well, THAT IS WHY YOU SHOULD NOT USE POSITION ABSOLUTE. https://www.w3schools.com/code/tryit.asp?filename=FQ99574DOPCR Link to comment Share on other sites More sharing options...
Iven Posted April 13, 2018 Author Share Posted April 13, 2018 Awesome thanks for the reply Regardless of changing the position value(relative or none) it still didn't work. Made a quick(kind-of) fix by changing the height when the screen gets smaller than a certain size(still not a solid solution but it kind of works) Link to comment Share on other sites More sharing options...
dsonesuk Posted April 13, 2018 Share Posted April 13, 2018 position: absolute; is the problem! By removing position: relative; you have removed the positioned absolute element from being positioned relative to the position: relative; element edges, it will now be positioned relative to the body element. Link to comment Share on other sites More sharing options...
AARRGGHHH Posted April 26, 2018 Share Posted April 26, 2018 dsonesuk, an absolute positioning follow up question: I'm using canvases layered with z-index on a page. And, as you know, everything that occurs after position: absolute; becomes a problem. I'm under the impression absolute is needed when layering canvases, is this correct? Thank you Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now