QTab -> Scroll new tab into view
-
Re: Omissions in QTabs component
In reference to the above topic, has the following issue been addressed, or does someone have a solution to this?
“When inserted, new tabs that go past the current width are not scrolled into view. Apparently there are not events for doing this.”
I am dynamically creating tabs, and to my knowledge there is no programmatic way of scrolling tabs into view.
Any help very welcome!
Andrew -
I haven’t seen any comments on the above so far. Would be great to at least get some info on whether there are plans to address this.
-
@tandrew been solved a while ago, check this example https://quasar.dev/vue-components/tabs#Dynamic-update. The old way to do this is using a key.
-
Thanks for attending to my post. I am not sure whether I explained myself correctly as I am already working with dynamic tab creation.
The issue I have is that a newly created tab is created outside the viewable area if the area is too small. The sample you provided is actually a perfect example: If you activate all the tabs one after another, you can see how the last ones are created outside the viewable area. I need them to be created and scrolled into view so that it is obvious to the user. I am happy to so so programmatically also, but I don’t see how I can accomplish this.
Thanks for any comments!
-
@tandrew check the api methods section you can select newly added tab using one of the methods there. https://quasar.dev/vue-components/tab-panels#QTabPanels-API
-
I’ll give it a shot. Thanks @metalsadman.
-
@tandrew updated that example to give you something simple to work on https://codepen.io/metalsadman/pen/MWKrJYO. test on the first 3 tabs on the list.
-
@metalsadman I think we are not talking about the same thing. I know how to move the Tab Panels into view. I was talking about the actual Tabs above the panels. So to replicate using our example:
- Click on the first four check boxes -> tabs Mail, Alarms, Movies and Photos open visibly in the row of open tabs.
- Then check “Videos” --> An arrow to the right in the tab bar indicates that there is another entry in the row of tabs. You can only guess, however, because you cannot see it.
- Repeat by also checking “Address Book” --> There is no visible evidence that it is open, because it is too far right in the tab bar view.
Here is what I need:
I need a newly opened tab in the tab to scroll into view when opened. Either automatically when creating it, or programmatically, if possible. -
@tandrew check scroll utils if you can do that horizontally, head to the docs, otherwise youll have to cook your own solution.
https://quasar.dev/quasar-utils/scrolling-utils -
Will do. Really appreciate your support, however!
-
@tandrew updated my last post above, its scroll utils what i meant, and seem like it’s the way to go, there some methods there for scrolling horizontally or via elements and etc. Good luck.
-
Will revert with results.
