By default, a max-width specification constrains the content of the dropdown menu. If you use a tool like the Chrome developer suite to examine the dropdown upon expansion, you will notice a max-width specification on the child of the div with ID contentWrapper.
See examples in polymer docs.
How can we change this max width to say something bigger? It seems like the content can't be wider than the selector in its collapsed state.
Related
I have a set of nested HTML, elements that are made up of a parent (AssetContainer) and two main nested parts (MediaViewContainer & AssetDetailsContainer) that are side by side. The right side component (AssetDetailsContainer) has a couple of sub-divs, but they have no styling of their own.
My issue is that the right side component is not rendering at the size it is styled to. The AssetDetailsContainer CSS sets a width of 600px, and this appears in the inspector, but then a different, much smaller value is used to actually render the element. If I set a larger or small value it grows and shrinks but at some non-integer scale of the value that was set. Though "Scaling" is probably a bad term as the rendered value/input value ratio is not a constant.
I'm attaching some images of the inspector panel for the main elements involved in the width, showing their HTML, CSS, and actually rendered properties. I know images aren't ideal, but these seemed to best represent the pertinent data in one place.
AssetDetailsContainer (right side child element) inspector snapshot
Looking at the resulting AssetDetailsContainer shown in the inspector we see the original 600px in the CSS, but then it's rendered as 104.5px instead.
AssetContainer (parent element) inspector snapshot
MediaViewContainer (left side child element) inspector snapshot
What am I missing here with respect to layout?
Turns out the solution was to nest the AssetDetailsContainer in an unstyled <div>. I think since the AssetDetailsContainer had a relative positioning property, that was not playing well with the flex positioning of the parent that was being used to create the side-by-side layout. The extra div layer seems to give it the proper segmenting of the different positioning properties and I now get the expected behavior.
I run into this problem sometimes when a site is not contained inside the mobile viewport, and I need to determine what is causing the width to exceed.
Usually I do this by trial and error of hiding different elements until the elements resets to the desired 100% width. Then I repeat for each child element until I find the one that is causing it.
Is there a way in Firefox or Chrome devtools (or using a plugin) to see which DOM child element is deciding the current elements dimensions?
Determining what is defining an element's calculated width and height can be quite tricky. And neither the Chrome nor the Firefox DevTools provide an easy way to get that information in all cases. And to my knowledge, there are also no extensions available that make this easier. The Firefox DevTools team started a discussion on this some time ago, though.
There are two reasons why an element might be wider or higher than expected: Some CSS or some text on the element itself or on one of its descendant elements.
When there is no other solution, the one with hiding or removing the elements is probably the fastest one.
Nonetheless, here are some tips how to use the DevTools to determine what's defining an element's width and height:
Select the element and check in the Computed side panel whether the computed value is defined via a CSS rule. Expand the entries for width or height to see what CSS rules applied. Also check min-width and max-width or min-height and max-height and the other layout related properties like margin, border, and padding but also `line-height, etc.!
Check the text within the element influences its width or height. Long words with no break opportunities like spaces can be the culprit but also CSS property definitions like white-space: nowrap.
When you've checked the above for the element itself and couldn't find the reason, the width or height is influenced by one or more descendant elements. So you need to repeat those two steps for them.
a) To quickly see the dimensions of the direct child elements, first press → to expand the element if it isn't already, then ↓ to toggle through them. While stepping through them, check their CSS and text as noted in steps 1 and 2.
b) When you see one that is as wide as the element you are observing, repeat the previous step to get one more level down in the DOM structure.
The steps mentioned above can also be automated by using some JavaScript to walk through the tree and check the element widths or heights. A relatively simple snippet for that (which can be executed in the DevTools console) is
rootElement = $0;
rootWidth = rootElement.getBoundingClientRect().width;
walker = document.createTreeWalker(rootElement, NodeFilter.SHOW_ELEMENT, {
acceptNode: element =>
element.getBoundingClientRect().width === rootWidth ?
NodeFilter.FILTER_ACCEPT :
NodeFilter.FILTER_SKIP
});
currentNode = walker.currentNode;
while (currentNode) {
console.log(currentNode);
currentNode = walker.nextNode();
}
Where the $0 refers to the currently selected element.
I have a complicated page where the width:auto returns a width that is smaller than I think it should be for several of the divs. If I go to the Computed section in Developer Tools, I can see where the width for a given element is obtained by css line (this usually points to a line for a given element that says width:auto. If the width is a smaller number derived elsewhere though, it is grayed out. Is there a way to see where in the cascade that that width is determined more absolutely?
For starters, check this fiddle -> http://jsfiddle.net/xV4s3/
As you can see, we have a wrapper with overflow: hidden and inside there is a native select with three options and an ul styled to look like a select with three items. Now, when you click on the ul, you can see its height changes (due to the script), but nothing beyond the wrapper is seen, because of the overflow: hidden. And that works as expected.
My question is about the default select's options, since I couldn't find anything in the specifications. Why are they not affected by overflow: hidden ?
This is probably nothing more than an implementation detail. The only thing CSS2.1 says about overflow control is that the overflow property controls overflowing of content according to the containing block to which the property is applied. It does not define the behavior and rendering of form elements and such with respect to this property.
As I commented, it's clear that the drop-down menu isn't being created as a descendant of the wrapper, or even the select element. In fact, it's possible that most browsers choose to render it completely independently of the canvas and as an application-level or system-level UI element in its own right (likely for usability reasons). Note that while you can apply CSS to the option elements to influence the way the drop-down menu displays, you cannot actually style the drop-down menu itself.
I want to know if there's a HTML/CSS only way to detect (or at least, show/hide some elements with pseudo classes etc.) to take action when an element's contents overflow (in vertical only). Yes, I KNOW it can be done and I KNOW how to do it (I don't need JS examples on this, PLEASE), I just want to know if there's a clever way, without any javascript.
I'm trying to show a "more..." button which will appear ONLY when there's overflow, and trying to achieve this without JS if possible.
100% height solution
Here's a version of this solution for 100% height - so when content tries to take up more than the whole page, you get a "more..." link. This works fine in all browsers.
http://jsfiddle.net/nottrobin/u3Wda/1/
I've used JavaScript only for the "Add another row" control - for demo purpoes. There is no JavaScript used in the actual solution.
Caveat:
Since the height of the user's browser is variable, there is no way to ensure that lines won't appear cut in half at the point of the "more" link, or that the "more" link will be completely visible.
Original solution
Make the container element overflow: hidden and give it a max-height. Then put your "more" link inside that container element, with position: absolute so it's just inside that max-height. Now the "more" link won't be shown unless the content inside the container pushes the container to its max-height.
If you're careful with your line-heights then you should be able to prevent any lines from being chopped in half.
Example:
Just enough text: http://jsfiddle.net/nottrobin/MrAKv/17/
Too much text: http://jsfiddle.net/nottrobin/MrAKv/16/
The shorter version will only work in browsers that support max-height:
http://caniuse.com/#search=max-height
If you need IE6 support, use this slightly less succinct solution:
http://jsfiddle.net/nottrobin/MrAKv/18/
(Disclaimer - only tested in Google Chrome)
Here is one for fixed height containers: http://jsfiddle.net/NGLN/PC94w/