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
Related
I'm going to simplify my problem a bit, because I really want to avoid adding a lot of code, because this is a gigantic project we are working on if I started adding code snippets, there would be a lot of it.
My project has one feature, where you have a list of different div elements in the left column of the page, and they can be individually dragged to the right column, where you can make your own list out of these elements in the order you choose.
These div elements are all the same child component. My task is to add a dropdown to these div elements, but only to the ones that have been dragged to the right column (you can choose additional preferences, once it's in the right column). It shouldn't be there on the divs in the left column.
The only way to differentiate between them is by the class name. The ones on the left have a class="left" and the ones on the right get the class="right".
Now I'm wondering if there's a way where I can write some code to the effect: if the element has the class 'left', hide the dropdown, else show the dropdown?
Yes, this is definitely possible.
Create a Directive that has a #HostBinding() for a specific class and just add the directive to every component.
Inject ChildComponent into the constructor of that Directive. You can also inject ViewContainerRef and then call this.viewContainerRef["_data"].componentView.component This will give you reference to that child element that the directive is put on.
Once the #HostBinding('.left') event handler is triggered this will be the function that gets called when the class you're looking for is added. Here you can then access that ChildComponent and then presumably call a method on that child component to show/hide the mat-select
I haven't actually tested this but thats the approach I would take.
You might also achieve this thru your css. Something like
div[class*="left"] dropdown-element {
display: none;
~or~
visibility: hidden;
}
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 create a profile menu for my polymer website, something on the lines of github.com
If you notice,there is a triangular tip at the top of the menu.I am trying to create a similar triangle at the top of paper-listbox.
The problem I am facing is that the triangle seems to hide as soon as it gets out of the boundaries of paper-listbox.
I have create a jsbin to demonstrate my problem: http://jsbin.com/samaloqowu/1/edit?html,console,output
If you change the top property of the triangle (say -16px), it hides when it gets out of the listbox region. Please help me solve this CSS issue.
Short answer : No you can't.
Explanation : Because the dropdown content get encapsulated in a slotted element that gets styled inside the shadowRoot of the custom element you try to modify the behavior. And the paper-menu-button doesn't actually gives you a way to directly customize the slotted.
But there is a trick ! You can access the slotted through classic javascript. Just alter your connectedCallback function and add this line :
...
connectedCallback() {
super.connectedCallback();
this.$.profileMenu.$.dropdown.querySelector('.dropdown-content').style.overflow = 'visible';
...
}
...
This should do the trick, I agree this looks totally awful and trying to force and change the initial behavior of an element is not really recommended but well it seems to work, just make some tests when the element gets in a new context to see if anything breaks.
UPDATE (22/09/2017) :
Thinking of that again, I think this is a terrible idea to change this overflow to visible, I guess the polymer team has set the overflow to auto because if the list get long and you force the height of the element, the list will flow and be visible which is not really a dropdown anymore, but more like a full list display and that will mess with the general design purpose of your app. IMO when you start trying to mess with the inner properties of a custom element it means this element doesn't quench your requirement, and that it's time to make your own, especially when you try to modify the design of a custom element that has a design already implemented.
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
I just wrote a tinymce plugin, which has a drop down box. I can increase the size of the select box, by manipulating the CSS file of the advanced theme (the theme I am using). Is there any other way to do it, without changing the CSS? Say in the function of the javascript code that actually creates the select box?
Edit:
I did set the max_width property while creating the listbox, in the createListBox function. But it only changes the width of the elements in the dropdown, not the drop down itself :(
You can always change the css using javascript:
document.getElementById("ATTRIBUTE_ID").style.width = "1000px";
See this SOF link for more details: Change an element's class with JavaScript
You should have a closer look at the tinymce configuration option editor_css.
Using this setting you may configure a css file which will overwrite the default css for the toolbar stuff. This way you don't need to change anything of the core css.
tinymce dropdown generates internally and it's hard to do this in right way, but you always can access the needed element by CSS like:
div[id*='mceu_'].mce-container.mce-panel.mce-floatpanel.mce-menu.mce-animate.mce-fixed.mce-menu-align.mce-in div.mce-container-body.mce-stack-layout {
max-height: 200px !important;
}
for me it works for all dropdown select lists inside modal windows like link-plugin - reduce height of select list block.