CODEWITHSUNDEEP
htmlcss
K. Vind
K. Vind

Reputation: 40

Child is calculating 100% width from screen, not parent

I am trying to fit a progress bar into the parent, which is oddly difficult. It is done on a Jot form, but with access to custom CSS and so on, which I have utilized a lot (that could have created the problem I guess).

The progress bar is positioned fixed at the top, and is in the parent element div.form-all as the very first and second element. I have tried all the common suggestions on here about box-sizing and so on, but nothing seems to work.

My suspicion is that it is because the parent element does not have an explicitly stated width, as this fixes the problem monumentally (but breaks the responsiveness, as it goes from ≈36% width to 100% on small screens).

Any help would be greatly appreciated. The actual form can be found here, at Jot form, in Danish:

All added custom CSS should be visible by inspecting the elements, but I will mention that it has worked before.

The div containing the progress div has the following css-attributes: .progressBarContainer.fixed { position: absolute; top: 0; width: inherit; background: #FFF; z-index: 9999;}

The parent has by Jotform-coding the following relevant attributes, with no position attribute: .form-all { width: 690px; width: 100%; max-width: 690px;}

Thank you in advance, Kris.

Upvotes: 0

Views: 1526

Answers (2)

Pegues
Pegues

Reputation: 1783

Absolute Position Solution: You said you are using position: fixed, but this won't inherit the width of the parent. You need to change .progressBarContainer.fixed to position: absolute, and then the form parent, .form-all, add position: relative.

This will then set the width of the progress bar to be the same as the form.

Fixed Position Solution: There are a number of ways you can keep the progress bar sticky on the screen. You will either have to explicitly state the max-width of the progress bar in the CSS, or CSS with a JavaScript solution. The simple CSS solution would be to keep position: fixed assigned to .progressBarContainer.fixed, but then you have to specify max-width: 690px to .progressBarContainer.fixed.

Upvotes: 1

Dimitris Karagiannis
Dimitris Karagiannis

Reputation: 9358

Its position is fixed that's why it gets the whole screen's width when it's set to 100% width. See here for reference

Assuming that you want the progress bar to stick to the top and since the container element .form-all has a max-width property of 690px try applying it to the progress bar element as well to prevent it from expanding to 100% of the screen width.

Otherwise simply remove the fixed positioning from the progress bar.

Upvotes: 1

Related Questions