I wanted to know if it is possible to display the drawer of Headlessui combobox above the input once we reach the bottom of the page; because, by default we have this:
And I wanted to make something like these once I reach the bottom of my page
I feel it could have been easy if, after the page loads, if the options were in the DOM, in that case, I select the options container, get it's clientHeight and translate.
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;
When viewing the dayGridMonth view on mobile, the squishing causes the calendar to enable a scrollbar for you to sift through.
I would like for the height to remain in full, and only the width to dynamically resize, so that you only need to scroll through the page and not the actual calendar itself (since you already do have to scroll some on the page, it's awkward). The header doesn't look too hot either but the focus right now is really on the calendar itself.
My CSS is weak to begin with, but playing with a library's styling is tenfold intimidating. Any tips in the right direction would be appreciated. Below is a sample of what the scrolling looks like (obligatory cursor because the bar fades otherwise)
Technically mobile would warrant switching to maybe week view or even day view, that solves it quick and easy, but the person i'm setting this up for really likes the full month view and wants it in all media formats to stay as is.
I located the element for the full container, but messing with height or width seems to do nothing and I can't see why.
Thanks for any help
There were two element containers manipulating the whole box content, I was editing the outer container, but the inner one needed to also be extended as it was the one where the table/rows were being populated.
In some apps, when a user focues on a certain element, a tooltip will float at the bottom of the page which displays information about that element. For example:
Does anyone know of a good way to achieve this effect (preferably using Angular, although jQuery is also fine)?
Note that I'm NOT looking for the tooltip that hovers nearby the actual element itself, like so:
Instead, I'm interested in the tooltip that floats at the bottom of the page.
The control you are NOT looking to use is called a popover. A popover and a tooltip are both tied to an element on the DOM that has to be interacted with to be shown.
If you want to something in between that shows up in a fixed position on the window, use something like the angular port of Toastr and configure it to show up when and where you want.
Maybe you are looking for a plugin like the famous ToastrJS which can position a toast in the middle of the screen.
I am a junior programmer and struggling with a plugin.
Everything works well except when you want to confirm all the details. The confirmation page display incorrectly and you can't see the whole page.
Any ideas to what I am doing wrong?
Here is a link to the single page with the form:
http://www.creatiffweb.co.za/emillingTester/list.html
Thanks!
I think there is a problem in your calculation of the widths array. Some child elements of your pages (the fieldset.step elements) also have the class step. That's because you are calculating too much widths and for the last page the width is too short.
This results in the page being only half displayed. Then you focus the button on the page, which is not entirely visible yet. The browser then scrolls your steps to the left to fully show the button and breaks the layout.
You should propably adjust the selector to something like the following, to only include the actual pages:
$('#steps fieldset.step').each(function(i) {
// ...
});
I have a website where I want to achieve the following behavior:
if someone clicks on a particular item (image or swf) everything else on the page would either disappear or blur out.
this way the only thing left on the page that is visible is the thing that was just clicked
Is this possible to make everything change except this one div?
Generally speaking, this effect is achieved by setting the z-index of the 'selected' item to a very high value, then adding a position:fixed div to the page that covers the entire page and has a z-index just lower than the selected item. It's generally referred to as a 'modal div'. Searching for 'modal' along with your JS framework of choice will return you a number of usable solutions almost out of the box.
I think you want a modal. Check out the jqueryui dialog widget's modal option:
http://jqueryui.com/demos/dialog/#modal