Right align item typeahead so that it doesn't display offscreen - 2hrs-7hrs depending on solution

[3gen]

Issue the search and item typeahead dropdowns are sometimes close to the right edge of the screen. If the dropdown has long names in it, the dropdown expands and displays partially off-screen

Possible Solutions Changing alignment for one typeahead may need to change them for all.. Find a way to apply right align style to only those Or find another typeahead

[yitzyy]

Add another class, eg "door" won't work?

[3gen]

How does adding another class have to do with this issue ?

[yitzyy]

Maybe I misunderstood this:

Changing alignment for one typeahead may need to change them for all.. Find a way to apply right align style to only those

I thought it was an issue regarding changing the properties for "typeahead"

[3gen]

This is what we talked about. The dropdowns for item entry and search may go off to the right edge of the window if the window is not wide enough. The dropdown is such that if I set one of the dropdowns to align itself to the right of the input, all of them will follow suit. Which I don't want.

[yitzyy]

If you assign a specific class to only that dropdown, you can change the design that way

[3gen]

That is not how that dropdown works. It is a dynamic dropdown that does not grant access to add classes to its dropdown portion. There are ways around it, which is what I was referring to. There are other components which do expose their dropdown classes, which is also what I was referring to. It is mildly annoying to be told the simple possibilities of a thing that I know about in depth

[3gen]

I can muck around in the js of the component, but I'd rather find a simpler way

[yitzyy]

Will adding a div around it help to isolate? .new .typehead { whatever css }

[yitzyy]

It is mildly annoying to be told the simple possibilities of a thing that I know about in depth

I apologize

[3gen]

if you want to collaborate that's fine, we should talk about it, and the boundaries around it that make working together possible.

[3gen]

If you can show me that adding a div around the input and typeahead that get's dynamically created will work, that is a good idea. I can say that I tried some things, but not that. The component is an older version of bootstrap typeahead that plays nice with laravel and other things I have going on there.

[yitzyy]

try adding class "door" to the div in which you have the

, and then put .door ul.typeahead.dropdown-menu {} it seems to work in the inspection tools

[3gen]

That's because it is already created by the time you're in the inspection tools. I'm pretty sure I've been through this, but happy if it works

I'll take a look soon.

[3gen]

Do you see what happens in the dom when you activate the dropdown ? It pops up another element inside the original container. That's the one we need to manipulate. Are you referring to that second element or the first ? I need a hook to the second one if you have ideas