Hello I'm using the Google MDL Framework with the getmdl-select from CreativeIT but I have an issue.
The select has "position:absolute;z-index:999" attributes and the parent has "position:relative"
But the select doesn't display outside the container if it is too small : https://i.imgur.com/Jrns1YI.png
The select's elements should appear in the blue square but they are hidden behind the mdl-card.
How to prevent this behavior ?
Thanks
Here are the files :
Google mdl css file : http://pasted.co/b8ff155a
getmdl-select css file : http://pasted.co/c651769d
I think the issue comes from mdl-menu__container and mdl-card
Most likely, the parent card element should have overflow:visible added to it.
Related
I recently learned about this way of targeting specific ( or all ) children in a container: [&>h1]:text-sm. This should make all <h1> elements in the parent with the text-sm. Which works.
Now I need a specific case where I can't target the element ( h1 ) itself, since it's coming from a variable in Laravel blade, so I want to target specific children from the parent. It does not register when I try any of these possibilities:
[&>h1]:lg:text-lg
[&>lg:h1]:text-lg
lg:[&>h1]:text-lg
What happens with the complete code is that the <h1> is text-sm on all screen sizes.. It does not register for the bigger font-sizes on md and lg.
ex: [&>h1]:text-sm [&>h1]:md:text-md [&>h1]:lg:text-lg
The exact structure you should use would be lg:[&>*>h1]:text-3xl. To illustrate this, I have prepared a demo for you. You can control the font size by enlarging the screen. If your h1 tags are not a quadratic child, it will be sufficient to use the [&>*] structure directly. To access all h1 tags in a div regardless of their position, it will be sufficient to use the [&_h1] structure.
Child selector demo
I am using Antd v4.2.4 Tree (example: virtual scroll) from the link. I woulld like to use the virtual Scroll which can be used by setting "height" prop of the Tree. All is fine till here as in the example.
I would like to apply some css to the scrollbar like both overflowX and Y should be enabled on hover in the container
I would like have the Tree node show in only single line when the title is really big and not wrap it, if I use overflowX css, it doesn't work.
codesandbox
Update1: I see when we set "height" prop to Tree a lot of Divs have the inline css elements so not sure how to override them.
May be there is something small here but I am unable to figure out
I want to have such a look for my TreeNode and when hovered on this container the scrollbar X and Y is visible to see the longer node title please advice
update 2
if the set following css I am able to get the title in single line, but the scroll-X behaves strange. i.e. the scoll-x gets hidden when the Tree height/contents are big and when ypu collapse all treenodes, it shows up
.ant-tree .ant-tree-treenode {
white-space: nowrap;
}
codesandbox
TIA
I am trying to use select in a card.
Problem is that when the select list is open and it should overflow outside of card, it doesn't.
The overflowing part is hidden/blocked/gone.
I've tried following and failed:
overflow:visible
increasing z-index
changing position to relative (this would dynamically increase the card to fit the select - not desired outcome)
on a side question, is it not a proper material design to use select (or other inputs) in a card?
This is because the .card class has the style overflow: hidden on it. If you remove this from your card, it will allow the content of the select to flow outside of its boundaries.
Adding overflow: visible to .card works. Here's a codepen. Just make sure you are correctly overriding the .card class styles.
You have to initialize the select manually
something like :
$(document).ready(function(){
$('select').formSelect();
});
Or
M.AutoInit();
If you dont want to initialize manually on pages all just add above one line in your script tag.
follow their documentation https://materializecss.com/select.html navigate to the initialization section
https://materializecss.com/auto-init.html
I have run into an issue with the paper-dropdown-menu component, where it's expansion height seems to be limited by an enclosing core-collapse on its containing element. Is there a way to prevent this from occurring? (see images demonstrating symptoms below) Another related side effect seems to be that when the number of items in the dropdown creates a dropdown height that would normally expand below the bottom of the containing collapsible element, it causes the CSS top styling of the dropdown to be overridden, nudging the top of the element higher within the collapsible container element itself while it is expanded. Irregardless of its new top alignment, it still doesn't show the entire list of options as the height of the dropdown itself remains the same. Has anyone run into similar issues? I can post a jsbin, but its a bit convoluted due to me using a custom polymer element that consists of the icon, input control, and an optionally displayed/selectable unit of measure. So before doing that I was hoping someone might recognize this issue right away and be able to point me in the right direction. This is using chrome v38 and the latest paper-dropdown-menu and core-collapse components (bower ^0.4.0)
Unexpanded (note the top alignment):
Expanded (there should be 5 options, but they are being cut off by core-collapse and note the altered top alignment as well):
Proper operation (when dropdown height is same or less than containing collapsible element height):
In core-collapse there is new property 'allowOverflow' to allow collapsible element to overflow when it's opened. This should help paper-dropdown-menu to expand inside core-collapse. The new property is only in core-collapse#master branch and will be available in the next release.
<core-collapse allowOverflow>
<div class="content">
<paper-dropdown-menu>
...
</paper-dropdown-menu>
</div>
</core-collapse>
The new 'layered' attribute of the latest version of paper-dropdown resolves this issue.
I'm trying to place a down-arrow in my navigation menu, if there is a li within an li.
Hover over the Shop link to see where I'm having difficulty - http://codepen.io/anon/pen/ABucF
The arrow (or V for my demonstration purposes) should be just after the Shop tab, Check Out and My Account, not inside it.
How would I be able to achieve this in the CSS?
Thank you.
You're trying to look at an element to check for a specific condition and style its parent based on that.
CSS can't yet be used to style parent elements unfortunately.
Your best bet is to simply add a class onto each element you want styled and do it that way or to physically place an icon/img in each anchor tag that requires it.
Alternatively use JavaScript to make it happen.
give a class to the parent who has sub child in it i.e Shop
.parent:after{
content:"V";
//or
background:url(image.png) no-repeat position;
}
updated pen