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
Related
I have a problem with a custom directive that I wrote to simulate a tab view in angular.
This directive has only a method to redirect from a state to another.
This directive works fine.
The template of the directive is a div with a uib-tabset and some tabs that contain the views to show them.
This works fine.
Now I need this feature: from a view in a tab, I need to change view with a state.go(view) and I must also go to the tab which contains that view.
I tried different solutions that I found here or in other forums, but probably my requested feature is different from others.
Thank you.
I resolved with the answer in this link.
Sorry for my repost.
Angular UI bootstrap tabs - Can't change tabs with a button inside a tab
I am working on Protractor tests. Recently my web page changed where the terms and conditions are inside a textbox. Button Submit works only when the user scrolls through the textbox and clicks on Agree button. I tried the following option to scroll down but it is not scrolling down. Any help is greatly appreciated.
var scrollbar = element(by.id('terms-conditions'));
var checkbox = element(by.id('checkbox'));
scrollbar.click()
browser.executeScript('arguments[0].scrollIntoView()', scrollbar.getWebElement());
browser.executeScript('window.scrollTo(0,670);')
checkbox.click();
I followed the below link too but no luck.
Protractor: Scroll down
The second js execute statement you are using contains Window.scrollTo which references an open window in a browser. and using it only scrolls the complete window but not the pop-ups that appear inside a browser window
Refer here for documentation on Window.scrollTo
Normally terms and conditions shows up in a pop-up or may be a div and hence Window.scrollTo doesn't work
there are two ways you can do it
SOLUTION 1: use Jquery scrollTop() to scroll inside a specific webElement
Step 1: Identify the exact div that holds your terms of Service scroll bar
Step 2: Refine your js statement by trying directly in Chrome console
$('.modal-body').scrollTop() -> This returns the current position of scroll
$('.modal-body').scrollTop(10000) -> This sets the value of top position
Step 3: Incorporate this in your protractor script
browser.executeScript('$('.modal-body').scrollTop(10000)');
You can professionalize this by passing the element & scroll amount as arguments. Refer here
SOLUTION 2; The best way I see to submit a pop-up is not to deal with interface but to deal with the 'form' element behind it. Similar to how we deal with file uploads.No fuss & effective
May be try something like this, by making button visible first and then submit form
browser.executeScript is an asynchronous call, so you will need to put it into the controlFlow so that it will complete before clicking the checkbox:
scrollbar.click();
browser.controlFlow().execute(function() {
browser.executeScript('arguments[0].scrollIntoView()', scrollbar.getWebElement());
browser.executeScript('window.scrollTo(0,670);');
});
checkbox.click();
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?
I've a ext js tab panel defined with some tabs.
On the same page I've a menu of hyper links for asking user which tab to open.
I want open the selected tab when the user clicks the link.
Basically when u click on the tab header to open the tab, I want exact same thing to happen on clicking some button/hyperlink.
Seems like a pretty normal thing, but I can't find the solution anywhere!!
Please help.
thanks
ues setActiveTab( newItem ) method of tabpanel.You can pass an ID, index or the component itself as newItem.
http://www.myethiopia.org/QuickLinks/accordion.html
Please check this link in IE. I did not have time to figure out why it is not working in Firefox. I am trying to click on a link on the left column and have the page open in the center.
If you click on Weather Station and Oromiya Station, the title opens up fine but the link does not even open. Line No.325 under var menu1, look at the first item for the code. What am I doing wrong?
Second question. I want a round bulltein or outline type of thing (not sure what to call it) to the left of the Oromiya station. HOw can I do that?
Checkbox is not what I am looking for.
If you want to update the centerpanel html you can use the update() function.
In this small example I've added an 'id' to the center panel and then in the handler function for the menu item used this code to show an update.
var centerRegion = Ext.getCmp('centerpanel');
centerRegion.update('<iframe src="http://www.myethiopia.org/QuickLinks/Weather/EthiopiaWeatherStations/Amharastations.html" style="width:100%;height:100%"></iframe>');
I'm not exactly sure what you are trying to do but it looks like you want to load the grid into the centerpanel, you can do that directly without having to load in a separate html page.