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!
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.
Will do. Really appreciate your support, however!
metalsadman last edited by
@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.