Jump to content

CSS NOT CHANGING DYNAMICALLY


Iven

Recommended Posts

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?

 

CSS.PNG

HTML.PNG

WRONG.PNG

Link to comment
Share on other sites

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

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

 

Capture.PNG

Capture1.PNG

Link to comment
Share on other sites

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

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

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

  • 2 weeks later...

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...