I'm building an element( Component in react), that can enclose a child component/element. There are some styles defined on the element. The element should have styles such that, it'd allow the child element to be positioned anywhere on the screen (i.e, relative to the viewport).
There are 2 catches, however,
I can't set the custom element's height and width to be 100% with position: absolute, because there's an element behind this element that needs to be visible and clickable (My first approach was to set opacity:0 on the custom element so that the element behind could be visible, but this would not make it clickable).
The child element is conditionally mounted/unmounted, so during this process a scrollbar is visible and it goes away after the mounting/unmounting completes, making it to a not-so-good UI.
Let's call the custom element ABC.
The HTML structure would look something like this:
<ABC props>
<div><p>Child element</p></div> //This could be anything for the matter of fact.
</ABC>
CSS of ABC component:
position: absolute;
z-index: 25;
top:0;
margin: 0 auto;
border: 5px solid blue;
transform: translateY(15px);
transition: opacity 1s ease,transform 1s ease;
In the above case, I'd want to be able to apply styles to the child div element so that it can be positioned anywhere relative to the viewport, and occupy any size as specified. I did try using position: fixed with other combinations, but none seem to solve the issue.
Any input is appreciated. Thanks.
You can either:
have a container 100% height/width of viewport and disable mouse interactions on it with pointer-events and touch-events (and re-enable them on the child element)
use position:fixed and vh/vw units on top/left properties for position
References:
CSS pointer-events property
CSS Position property
CSS values and units
Related
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.
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.
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.
I have an exterior parent div with two child divs within. I want to hide both of the child divs until the user scrolls to certain section of the page, at which point, the divs will fade in. How can I make the parent div retain its size when the interior divs have their visibility attribute set to hidden?
visibility:hidden
The HTML element takes space but is not visible. The element is simply transparent, so to speak.
display:none
The HTML element does not hold its space and is not visible.
visibility:hidden is probably what you want
Bishal is right, another approach that you could use is to animate the opacity property and in both cases (either using visibility or opacity), you can set an animation to produce the fade in effect:
The CSS:
.element {
opacity: 0;
transition: all 1s ease-in-out;
}
Then you can target your .element on scroll with JS and set the opacity property to 1 (the transition property will ensure the fade in).
In Wordpress, I'm trying to style the dropdown menu used in .primary-menu. Unfortunately, things don't really go as planned.
I copied the HTML from the inspector in Chrome and removed the clutter such as href's and id's and tried to debug it in jsFiddle: https://jsfiddle.net/1cL8fq8b/1/
When hovering over the last item in the results tab, .sub-item seems to take the width of it's parent. I gave .sub-menu an absolute position to make it independent. Still I can't get .sub-item to have it's own width.
Here's a screenshot for a better view.
How can I make the sub-item to have it's own width, and not rely on it's parent's width?
You can add a negative margin-left style to extend your drop down menu to the left.
.sub-menu {
position: absolute;
right: 0;
display: none;
margin-left:-100px;
}
See this: https://jsfiddle.net/jokbd6L5/
Or define a custom width for your drop down:
.sub-menu {
position: absolute;
right: 0;
display: none;
width:100px;
}
See this: https://jsfiddle.net/hjoctv5x/
Since its position is absolute I don't think there is a way in CSS to make it expand according to the width of its content (variable width). But you can write some javascript to calculate the max content width for each dropdown menu and set the dropdown menu width accordingly.
It's because on hover its display is set to block. Set it to inline-block instead
First and foremost.. read this http://learnlayout.com/position.html
absolute is the trickiest position value. absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling. Remember, a "positioned" element is one whose position is anything except static.
So basically absolute positioning only takes it out of the document flow
also.. this piece of code..
&:hover .sub-menu
is only targeting the submenu. Try targeting the li of the submenu to give it its own width. the submenu ul (which is what your targeting has nothing to do with the width of the li's unless they are sized based on percentages.
I have some questions regarding the following css that I found:
html, body {
height:100%;
min-width:100%;
position:absolute;
}
html {
background: none repeat scroll 0 0 #fff;
color:#fff;
font-family:arial,helvetica,sans-serif;
font-size:15px;
}
is it necessary to have height and min-width to 100% on the html and body? What's the benefit?
what is the reason for using position absolute?
why did they set the background/color/font on the html and not the body? Is there a difference? Or is it just preference?
It's usually unnecessary. However, there are a few times where you may need it. For example, maybe your base/site-wide website css file specifies the size to be different (you know those sites where the sides are just borders, usually blogs? Those widths have been resized down). Note that when you have percent it's of the parent container. So Div A may have width: 100% but if it's parent container has width: 500px Div A will have 100% of 500px.
There is no reason for position: absolute on the html + body that I can think of. One side effect of absolute positioning is that the element nolonger "floats inline" with the rest of the elements (not sure how you would describe/word this).
For example, position: relative ignores absolutely positioned elements. So if you had Image A (absolute) and Image B (relative) and B had left: 10px;, Image B would be offset from the left of the parent, instead of where A would have been. Hopefully I'm making sense here.
So sometimes I just set "position: absolute" whenever I have a background image. If it's the first child, it everything will show up on top of it (since the new elements are "added on top" and ignore the absolute-positioned element).
The body will inherit those properties, and so yes it's just preference.
Setting the width or height of an element to 100% only works when its parent element is also at 100% of that dimension. Which means that if the body or even html tag isn't, for some reason, at 100% of either height or width, an element inside it with those properties will have 0 height or width.
For example: http://jsfiddle.net/KZaum/
I want to display a children element of my html page all over the browser window.. in other words I would like to enlarge it and keep it the same size the browser window also when it is resized after loading.
I was wondering if I have to move this object outside the parent elements or I can set these properties with css.
At the moment if I set width:100% and height:100%, it fits the parent (of course) and not the window.
thanks
It is typically better to use relative positioning when possible, and any large child elements should be equal to the parent. But you can always absolutely position it:
position:absolute;
width:100%;
height:100%;
left:0px;
top: 0px;
width is easy:
width: 100%;
for height, you need something like this:
100% Height Layout Using CSS
Width always aplies regarding to the parent element. You could use absolute positioning to have that particular element "out" of it's parent (regarding positioning and flow, that is), and set it to 100%. Be carefull though, it might no end up where you want it to be visually.
.someElement {
position: absolute;
width: 100%;
height: 400px;
}
The parent element cannot have "position:relative" specified for this to work.