I'm using Angular's flex-layout library, but running into an issue when I create a row with 2 columns whose widths are 50%. When one of the dropdowns is any way used, then the other column will shrink by a little bit. Inspecting the elements in Chrome, I'm not seeing anything obvious that would cause the issue.
You can reproduce the issue by selecting an option from the Select #1 dropdown.
http://plnkr.co/edit/aL1qrrP3sX2XZQcfaglQ?p=preview
What am I missing?
The problem is that when you select an item, the placeholder which goes to the top of your select input has its width increased by some javascript. As it is in position: relative, its place in the DOM doesn't change, so its still like it is in the select field but with an increased width, which push the arrow to the right.
To fix the issue, you can add
.mat-select-arrow {
position: absolute;
right: 0;
}
So the arrow will be in absolute positioning and won't be pushed by the placeholder.
It's strange though that the width of the placeholder is changed...
Related
I am developing a configuration page using React. I have a list of configurable elements that are displayed in a table, and the "save" button is disabled and made transparent until a data field is modified, at which point the button is enabled, and becomes fully opaque.
However, when the button is in the disabled state, the buttons are rendered over top of parent elements, such as the sticky table header and nav bar. This becomes very apparent when scrolling. Enabling the buttons fixes the issue, and are no longer rendered over the parent elements.
Currently I am using the react-bootstrap Button component to render the button, but using a regular HTML button produces the same results. It also seems both disabling the button, or changing the opacity field independently will cause the issue as well.
<td className="saveButton">
<Button
variant="primary"
id={this.props.id}
disabled={!this.state.modified} //Only enable saving after data has been modified
style={this.state.modified ? {opacity: 1} : {opacity: 0.3}}
onClick={this.updateListItem}
>Save</Button>
</td>
The buttons should disappear beneath the sticky table header and navbar with the rest of the table row, but the buttons that are in a disabled state end up being rendered over top, like so:
(Note the enabled button correctly scrolling beneath the table header)
Any ideas where I've gone wrong?
I was able to reproduce your bug with a basic table layout using a sticky header. If you un-comment the z-index in the th you'll see it fixes the problem. https://codepen.io/sallf/pen/BaaBwmR
You've only shown the button inside the table, so I don't know exactly how you have your table set up, but this seems like a likely fix.
th {
position: sticky;
top: 0;
background: white;
// Remove z-index and td will appear
// to be over the td
z-index: 1;
}
As to why this is happening, I really don't know. It seems like a bug in the browser to me, but would be curious if anyone knows more.
Update
This happens because any element with an opacity less than 1 creates a new stacking context. Position inside a stacking context is determined by a stacking order.
According to the color module:
If an element with opacity less than 1 is not positioned, then it is painted on the same layer, within its parent stacking context, as positioned elements with stack level 0.
This basically means that a static element with opacity < 1 will be on the same stack level as a positioned element with the default z-index: auto (when they share the same parent stacking context).
When elements are on the same stack level, the stacking order is determined by the rendering tree (aka order of elements in your html). In this case, since the td comes after th in the html tree, td will be painted in front of th.
See an example on What No One Told You About Z-Index.
Related question.
My problem is when popover comes out it always stay inside of scroll. So that when I need to see popover content I need to scroll down then I can see it. I use z index. But I can not show the popover out side of scroll. I am using angular popover.
If I use position fixed instead of absolute it always open aspect of window and I don't want it.
This is an aspect of how CSS works. You are using incompatible CSS techniques. A child element (popover) that is absolutely positioned cannot be rendered outside a parent element boundary with overflow restrictions (hidden or scroll). The overflow property tells the browser to enforce rendering restrictions on all child elements except ones with "fixed" position.
If you show your code, we can probably help you achieve your goal with some modifications.
Edit
With the example provided, all that needs to be done is to add a CSS rule to the .sectionone element for position: static
.sectionOne {
position: static; // solution
overflow-x: scroll; // in example provided
}
.table {
width:1000px; // in example provided
}
I have tried everything within my repetoire to fix this. I fall on my knees with open hands!
You can view a draft of the page here:
www.barrettcv.com/draft_so.html
If you would like the gist of how the page should work, simply view it in Firefox (with browser window smaller than 992 and scroll down. The side panels start off attached, and then 'fix' to become static while the rest of the content moves. This is the correct behaviour
Main problem.
The problem arises in Chrome. When the menu column and the details column 'fix,' (scroll down the page a little) all digital hell breaks loose.
Secondary problem.
When the view window is about 1200px, the space between the menu column and the main content panel doubles up. This isn't as big a deal as the first problem (which has had me attempting to destroy my flat's retaining wall with my forehead) - but it's got me relatively flumoxed, as I'm sure there must be a more elegant solution that forcing it back into position with media queries
It looks like you are coming up against an issue in how the different browsers calculate the position of fixed position elements when no positional CSS properties are defined for the element e.g. top and left. From the spec:
...user agents are free to make a guess at its probable position.
For the purposes of calculating the static position, the containing
block of fixed positioned elements is the initial containing block
instead of the viewport...
I think the only way around this is to choose a different positioning scheme. You can remove the .col-md-pull-* and .col-md-push-* classes and reposition the Bootstrap columns by using absolute positioning (depending on media queries to arrange those columns how you want for different viewport sizes). In this case it appears all browsers honour the position of the fixed element.
.row {
position: relative;
}
/* apply to the details column */
.push-9 {
position: absolute;
left: 75%;
}
Example: http://bootply.com/92096
What you need to do is to fix both left and right column, starting from that you will have a much better way of controlling your divs (since you want them fixed as I can see).
So, sumarizing: you need to add position:fixed to both your left and right columns. Modify your left: x% and right: x% so that they match your criteria.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Edit to reopen:
It seems to be difficult to position elements over a google map. Using z-index does not solve the problem which is described below: Google Maps will stay on top of some other elements even when using high z-indexes.
The question is:
Is it possible to have a div cover parts of a google map?
I have the following popup:
But when i move this popup up to appear over the map, it gets hidden:
How to force something to be the top most, always displayed object on screen?
I have tried setting the z-index on my CSS property sheet, but this did not work.
Is there some HTML/CSS property i can set so that the popup, which is a DIV, actually always sets on top of everything else?
z-index is not that simple friend. It doesn't actually matter if you put z-index:999999999999..... But it matters WHEN you gave it that z-index. Different dom-elements take precedence over each other as well.
I did one solution where I used jQuery to modify the elements css, and gave it the z-index only when I needed the element to be on top. That way we can be sure that the z-index of this item has been given last and the index will be noted. This one requires some action to be handled though, but in your case it seems to be possible.
Not sure if this works, but you could try giving the !important parameter too:
#desired_element { z-index: 99 !important; }
Edit: Adding a quote from the link for quick clarification:
First of all, z-index only works on positioned elements. If you try to set a z-index on an element with no position specified, it will do nothing. Secondly, z-index values can create stacking contexts, and now suddenly what seemed simple just got a lot more complicated.
Adding the z-index for the element via jQuery, gives the element different stacking context, and thus it tends to work. I do not recommend this, but try to keep the html and css in a such order that all elements are predictable.
The provided link is a must read. Stacking order etc. of html elements was something I was not aware as a newbie coder and that article cleared it for me pretty good.
Reference philipwalton.com
Try setting position to absolute, ie.
#yourDiv{
position: absolute;
z-index: 10;
};
Are you using position: relative?
Try to set position: relative and then z-index because you want this div has a z-index in relation with other div.
By the way, your browser is important to check if it working or not. Neither IE or Firefox is a good one.
you should use position:fixed to make z-index values to apply to your div
Set the DIV's z-index to one larger than the other DIVs. You'll also need to make sure the DIV has a position other than static set on it, too.
CSS:
#someDiv {
z-index:9;
}
Read more here: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
One form to do this is insert the panel that you want to expand inside a DIV setted as relative: let me show you:
<div style="position:relative">
<div style="position:absolute; z-index: 1000;">
your code
</div>
</div>
You use the first div to position the inner content in a specific area inside your page and the second absolute should be referred to the container (because is relative) The z-index in this case is referred also to container and if it higher that the container should be at top. You can put the style in a CSS class and change the size of the absolute div to expand it on hover or another action that you want to control.
I hope that this help
dropdowns always show up on top, only solution for this problem is to hide dropdowns when image is displayed (display:block or visibility:visibile) and show them when image hidden (display:none or visibility:hidden)
I am creating a span in javascript to append to a td. Works great. However, for some reason when I call
document.getElementById("myTd").appendChild(thisNewSpanObject);
the new span seems to think it is a child of the window. So when I set the attribute of
top:-10px;
the span is actually off the page, yet aligned horizontally with where it should be, when in reality, I just want it to display 10 pixels above where it would load if it did not have the css property assigned to it. Should I be using something other than top here? If I don't use top then the span loads right in place, 10 pixels too low (position:absolute; is set).
Add position: relative to the span element.
You are currently using position: absolute, meaning it will be relative to its nearest ancestor with something besides position: static (the default for elements) or the document.
Add position: relative to the element with ID myTd, not the span.