I am learning Ionic and I am stuck in one place because I want to change my default tabs layout to other one.
When I change to state where I reload my tabs layout, in new layout there is always selected second one, no matter what I do... I want first tab to be selected.
Here is plnkr. Go to friends, click one and look on tabs at bottom. Second one is active :(
$ionicTabsDelegate is not working (Or I have done something wrong)
http://plnkr.co/edit/AGNLaMqY6Hzbm5SVcgwI
Do you have any ideas why it's happening?
Related
I'm trying to create a tabbed section for comments in react, one tab for personal comments and one tab for others comments. I'm using react-tabs package for creating tabs and tab panels and simple-react-comment package inside it to show comments.
Loading old comments from database is done, and the user is able to insert new comment. but the problem is that new inserted comment won't be shown unless you change tabs. I tried setting selectedIndex to change selected tab programmatically. but couldn't get what I wanted.
How can I re-render the tabs component so that new comments be shown?
I'm using ui-router.
A similar question has been asked on this a Number of times... But the solutions seem to be all over the place and either the question doesn't address a simple idea or the answer doesn't, either.
Here's my simple ui-view setup:
A master view has the navbar and footer
Children of the master view/route that can be activated include the Homepage, About Us page and Learn More page
Pretty simple...
By default, if the homepage is activated, and scrolled down 500px, and I click on a route to the "About Us" page, that page will be scrolled down 500px. Obviously this is not desired.
So... Everyone's solution is some variation of setting document.scrollTop(0) on every state change success. This is atrocious.
While it fixes the issue at hand, it clobbers the browser back button behavior. Here are some problems:
When a refresh is called, the standard browser behavior of refreshing to the current location is ruined
When the back button is clicked, the homepage would then scroll all the way to the top
If the back and forward button were clicked, I wouldn't retain the correct spot on the next page, either
This whole document.scrollTop(0) or any variation of it, really doesn't seem to be viable and I've yet to see a clear solution to this.
I'm building a dashboard/control panel app that is basically made up of two tabs (bootstrap) at the root level, called "dispatch" and "admin". Each tab has a good bit of its own multi-tiered navigation and functionality, and they don't need to directly interact with each other. The problem I'm running into is how to deep-link to sub-views within one of the tabs without losing the "state" of the inactive tab. To clarify, I can achieve this just fine if I don't worry about updating the URL, but when I try to add deep-linking, that's when I get stuck.
An example of the desired behavior:
When you click on the "Admin" tab, the route becomes "/admin"
Click on a sub-nav item, route becomes "/admin/foo"
Select 3rd-tier sub-level item, route becomes "admin/foo/thing1"
Click on the "dispatch" tab, route becomes "/dispatch"
Click back on the "admin" tab, route goes back to "admin/foo/thing1"
So basically, if you're at the "admin/foo/thing1" route in the middle of filling out a text field, then switch to another tab, then switch back, the text field should still be there just as you left it.
Like I said, the problem isn't switching from tab to tab, since by default the tabs just show and hide things on the page without reloading any views dynamically. I just don't know how to deep-link to a given tab's "bookmarked" position when you switch to it. The way I keep thinking of it is that clicking on a tab should only update the first segment of the URL(/admin or /dispatch), and then some sort of $watch function would update the remaining segments based on the last "location" within that tab. Would something like that work?
Also, I'm using ui-router to handle all my routing and states, so I have to factor that into how I'm going to handle the desired behavior.
Help?
I worked on both those topics (deep state reactivation and parallel states) and integration into ui-router. Grab my github fork of ui-router and build using grunt. Then, mark your two tab states as parallel: true and deepStateRedirect: true.
Git repo: https://github.com/christopherthielen/ui-router
Example plunker: http://plnkr.co/edit/YhQyPV?p=preview
Discussion: https://github.com/angular-ui/ui-router/issues/894
I would just save the current state in a variable, then either dynamically change the link of the tab to whatever the last subview was.
For example, if the user is on /admin/billing, the Admin tab would link to admin/billing. When they leave that tab, the /admin tab remains the same. If you are using ui-router, you can do this with ui-srefs. You could also just manually check the variable when the state changes, and route the user there from the controller.
In my app I have 3 static tabs that get rendered when the application loads. Using ng-grid, when a user double clicks on a row a new tab is generated with the results of that row. My question is..... how do I close the tab? It seems so simple but, I've goggled and tinkered with no results.
What I'd like is that after viewing the results the user would click on a small X near the tab heading to close/dismiss the tab. I've created a plunker http://plnkr.co/edit/ZkamtnBK01h0IvC9Hmjh?p=preview that resembles my tab layout. It has a button that you can click to add a new tab. Any help would be greatly appreciated. Thank you.
you can easily remove tabs by altering scope, http://plnkr.co/edit/AKlmUaRkaYWjOYnPRnWF
$scope.remove = function() {
$scope.tabs.splice($scope.tabs.activeTab,1);
}
These tabs are problably created with templates from the tabs directive, so I suggest using css positioning the element outside the bs-tabs div to get the effect you want
We're developing a simple app with the sencha framework
The app consist of a few tabs( a tabPanle with bottom tabBar) and the switching between tabs works perfectly when we use it as it is on the sencha docs, alas when no live data is present.
When we add stores within the single tabs, functionalities breaks, tabs stop switching and every time one clicks a tab to change the view, a flickering appears, the default tab is loaded again(from the chrome console we can see that all the remote data request of the loginView get reissued) and the only tab that remain visible to the user is tab[0].
app.js --> http://pastebin.com/S9qaNfij
mainView.js ---> http://pastebin.com/uiG2E0AW
controller.js ---> http://pastebin.com/8MTfxC85
This was created with senchaArchitect, that btw is awful and quite useless if not to work visually with the components.
here is a little movie of the thing happaning.
http://youtu.be/OVOSOWhMZeE
What are we doing wrong?
I think it's your button listener, it seems that it might be being triggered on even the tab panel button taps. I would try giving your button a unique ID and then create a ref and an action to login based on that ID.