I would like to click the alarm icon and that creates a dropdown menu.
I have already seen this
Here is what I have already tried on this demo
I still have the dropdown input box, which I want removed, so I can only see the icon before clicking. I would like it so that it is only the icon and when that gets pressed, it generates the dropdown.
How can I achieve this?
PS: it would be great to see a demo of it on Stackblitz :)
I think you can achieve what you're looking for just by using some CSS, essentially hiding the .mat-select-arrow-wrapper element and adjusting some padding.
I've created a StackBlitz example that you can have a look at.
Related
I have kind of a weird problem in my website, but which seems to be a problem of the UI library I'm using.
Every time I click a select element in my page the background is slightly changing, in width, which flickers the background image.
At first I though this is a problem in my code, but after checking, I see that in the UI library docs it also happens.
Example:
My site : https://dinsangun.github.io/crypto-converter/
The lib docs: https://mui.com/components/selects/
(In the lib docs, when you click a select element, pay attention to the slider on the right side, it disappears when the dropdown menu of the select items is clicked)
Is there a way to overcome this little bug?
Thanks.
Your problem comes from the scrollbar, when you click on the select it dissapears and so the background extends to cover all the screen.
It's the same problem for MUI website.
One of the solution I can propose would be to put on your body or root div height:100vh;overflow:hidden;
I'm trying to resolve a problem that I encountered with the creation of a tooltip interface in a website I'm developing. I constructed the tooltips with help of HTML, CSS and JavaScript. The script is pretty simple as you can see in the fiddle underneath, and is based on a toggle behaviour, on witch a trigger element open a pop-up tooltip.
jsFiddle
Now! My problem is that i can't figure out how to place the trigger on the top of everything so they are not hidden by the pop-ups! Let me explain. Since the pop-up, even when they are off, sometimes cover the trigger elemets they (the triggers) just result not clickable. is like they are hidden behind invisible pop-ups. Here is a link of how is right now online.
http://271116.lucamule.com/studio-1
I hope you can see the problem! Does anyone know how to resolve this?
You've changed the .pop-ups to "block" as soon as it initializes. $("div.pop-up").css({'display':'block','opacity':'0'})
If you want to show/hide, I would recommend using .fadeIn/.fadeOut: http://api.jquery.com/fadein/
I have select list and I am using bootstrap.
It is having its default blue color which I want to overwrite.
I want to define custom color on :hover, selection and clicked(:focus and :active.).
*Some body told me its not possible to achieve using css.
So, I tried to achieve this using javascript or jQuery. But it doesn't work. Now *
But it's not working for hover. Please see the demo.
Here's my JSFiddle
Please guide me.
I have a div selector script with icons as pagination that I'm working on. So far everything is working well, the question I have is how can I change the active state of a an icon dependent on the div or "page" that is currently being shown. Here is a simple example of what I have so far. The images being used for the navigation right now are clickable as well.
Here is the example:
http://jsfiddle.net/Rua2B/
Thanks for any possible help!
EDIT: Just to clear things up I mainly trying to get active states to change when the "prev" and "next" buttons are hit.
Your code for pagination isn't the most efficient - you should look into tidying this up. But a simple fix for you for next/prev buttons is this line:
$("#pager img").removeClass("active").eq($("#container .boxes:visible").index()).addClass("active");
DEMO: http://jsfiddle.net/Rua2B/1/
We are trying to replace a set of four radio buttons with a set of four images, each with its own hover and selected image.
We have sent the radio button off screen using CSS, created the main images to show as the label and also set the hover, but we are experiencing issues with the Javascript/jQuery we are using which adds a 'selected' class to the buttons. It works for the first button, but I am lost on how to replicate this for the other three - your advice on this would be very much appreciated.
The JS Fiddle for this can be seen here:
http://jsfiddle.net/HVk7d/8/
Managed to get it working in the end - here is the code: http://jsfiddle.net/HVk7d/18/
All the best,
Matthew