I have a paper-menu-button in my code that looks as follows:
<paper-menu-button style="position:absolute; right:0; bottom:0" vertical-align="bottom" horizontal-align="right">
<paper-button icon="expand-more" class="dropdown-trigger" style="background-color:#00A9FE; top:2px" raised>
<span>Send</span>
<iron-icon icon="expand-more"></iron-icon>
</paper-button>
<paper-menu class="dropdown-content">
<paper-item on-click="_setPriority">Urgent</paper-item>
<paper-item on-click="_setHigh">High</paper-item>
<paper-item on-click="_setMedium">Medium</paper-item>
<paper-item on-click="_setLow">Low</paper-item>
</paper-menu>
</paper-menu-button>
When a user is logged into the system, the list displays correctly, like so:
However, when there isn't a user logged into the system, the list displays as follows:
This function is on a help button that needs to be available whether a user is logged into the system or not.
There are no warnings and no errors in the console when this item is loaded. The code is no different when a user is logged in or not. The styles for this element is no different from when a user is logged in or not.
Has anyone encountered this issue before? Does anyone know why this would happen?
I was missing the imports to paper-menu and paper-item.
They must be included in the page that loads when a user logs in, which is why it worked with a user logged in but not when there is no user logged in.
I also made the assumption that importing paper-menu-button would import paper-menu and paper-item.
Related
I am new to GTM and am creating a trigger on a site for my company. I have tried all the ways I know how and looked at Simo Ahava's blog and cannot get my trigger to fire. I am making a trigger that fires on element click and wants to have the Click Element match the CSS selector but cannot get it to work properly.
This is what I see when I inspect the component on the page:
<div _ngcontent-my-app-c1="" class="page-complementary jss-page-complementary" id="jss-page-complementary" name="jss-page-complementary" sc-placeholder="">
<!---->
<!---->
<app-tab-stories _nghost-my-app-c26="" _ngcontent-my-app-c1="" class="ng-star-inserted">
<!---->
<div _ngcontent-my-app-c26="" id="our-stories" class="tab-stories tab-stories--option-three">
<div _ngcontent-my-app-c26="" class="tab-stories__inner">
<div _ngcontent-my-app-c26="" class="tab-stories__header">
<h2 _ngcontent-my-app-c26="" class="tab-stories__heading">Our Stories</h2></div><div _ngcontent-my-app-c26="" class="tab-stories__wrapper">
<mat-tab-group _ngcontent-my-app-c26="" class="tab-stories__tabs mat-tab-group mat-primary ng-animate-disabled mat-tab-group-dynamic-height" disableripple="" dynamicheight="">
<img _ngcontent-my-app-c9="" class="ng-tns-c9-25 tab-stories__image ng-trigger ng-trigger-fadeIn ng-star-inserted" id="app-deferred-image_id_d1e0186a-6714-c0b4-649e-b9234689c136" alt="null" src="/-/media/images/images-sc9/locations/pch/general-pch/patient-stories/lexie-gardiner-square.ashx?&mw=400" style="">
I have tried the following CSS Selectors with no success, any help would be appreciated. The goal is to track that whenever anyone clicks on one of the stories under "Our Stories" they do not link off to anywhere just hidden content.
.tab-stories
.tab-stories__wraper
.tab-stories__image
div#our-stories
.tab-stories*
div#tab-stories*
div#tab-stories
Try .tab-stories__tabs
If it doesn't work, edit your question and add a complete set of html with closing tags so that we could actually inject it into a page and see how it looks.
You don't need to try your selectors in GTM every time. That takes too long.
Just do the following:
Inspect your element to open the Elements tab in the Chrome Debugger.
press ctrl+f while the Elements tab is being focused and start typing your CSS selectors.
The search in the Elements tab is smart enough to not only match literal matches, but CSS selectors matches too.
Debugging your selectors through the Elements tab is the best way to make sure nothing else would trigger your rule on this page and to see what exactly will trigger it.
I'm trying to click the continue button after filling in the fields on this webpage. But an exception is thrown saying element is not visible even though I maximize the screen and you can clearly see the button.
I have tried the following even with waiting 10 seconds for the page:
driver.findElement(By.xpath("//*[#id=\"submitButton\"]/span")).click();
driver.findElement(By.cssSelector("#submitButton > span")).click();
driver.findElement(By.partialLinkText("Continue")).click();
driver.findElement(By.className("caret_rebrand")).click();
driver.findElement(By.name("submitButton")).click();
driver.findElement(By.xpath("//span[contains(#class,'red') and contains(text(), 'Continue')]")).click();
Here is the part of the html I am trying to access:
<button style="padding-left: 0px;" type=button" "id=submitButton" class = "nbutton" title = "Continue" onclick=_hblicnk('continue,'continue'); goFeaturePage('true');">
<span style = "padding-right: 12px;" class="red"
"Continue"
<img class="caret_rebrand">
</span>
I expect the continue button to be found and clicked. attached is the picture of the webpage
UPDATE: 8-3-19: I've tested the following pieces of code and it is able to find the element in all cases. But when adding the .click() function to any one of them, it causes a no such element exception.
driver.findElement(By.name("submitButton")).click();
driver.findElement(By.id("submitButton")).click();
driver.findElement(By.cssSelector("#submitButton")).click();
driver.findElement(By.xpath("//*[#id=\"submitButton\"]")).click();
My expectation is that you need to click the <button> element as this <span> might be not clickable at all. You can use i.e. title attribute to uniquely identify the element on the page
It's better to use Explicit Wait to ensure that the button is present and clickable as it might be the case it's not available in DOM right away. Check out How to use Selenium to test web applications using AJAX technology article for more details
Assuming all above I believe you should be able to use below code for clicking the button:
continue_button = WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//button[#title='Continue']")))
continue_button.click()
I am a newbie at the MEAN stack. I have a full app working and have searched extensively on how to solve the following problem but I'm realizing that I don't know how to "ask" the question to be sent to the proper resource.
I have a marketplace. In the dashboard, a user can enter details about their product (a boat) and it is sent to the DB. In my marketplace, I'm retrieving all of the boats from the DB and theyre styled and listed on the page.
I want a user to click on one of the tiles components that I have created with an ng-list (boat) and be sent to a new page with a fully-expanded view of that specific boat. (larger pictures, expanded details, etc.) basically all the details about the product that won't fit in the minimalistic tile component in the marketplace.
How do I pass data about that specific boat that the user clicks on and be sent to a new page? Is this an ng-directive? an API/route thing?
I just am unsure how to reference the specific boat from the list i'm retrieving and have the user sent to a new details page. Any direction or resources that will teach me to solve this problem?
In general, use ng-repeat to display a list of products and ng-click to handle clicks.
<a ng-repeat="product in productList" ng-click="goto($index)">
<h2> {{product.title}}</h2>
<img ng-src="{{product.picture}}">
<p>{{product.description}}</p>
</a>
JS
$scope.goto = function(index) {
$location(productList[index].location);
});
Use a router such as ngRoute or ui-route to intercept the new location and load the appropriate template and controller.
I am trying to do userLogin through a webservice. The project is using Bootstrap for css and angular in the backend.
I am having a login Screen with a hidden div that is shoown when user click login button.Its a animated login icon.
Everything is working fine.I just want to make the background that is whole page including the userId, password uneditable as well as signin button unclickable.
When you hit the login button you can make the input(s) and button(s) disabled to make sure they remain unchanged.
When you get a result from your REST call you can re-enable them all.
You probably already have a variable $scope.loginIn on your controller scope since you are showing an animated login icon while login. If you don't, add it to your login function, something like :
$scope.login = function(...) {
$scope.loginIn = true;
loginService.login(...).finally() {
$scope.loginIn = false;
}
}
then just use it on your input and buttons to disable them :
<div class="login">
<input enable="!loginIn">...</input>
<button enable="!loginIn">...</button>
</div>
(That might be off the context, if you give me some code I could probably be more accurate in my answer)
I am using DNN 5.1 on a project and something's happened that I cannot quite figure out. The control button which controls the actions of any html module has gone missing. If I check the event viewer of DNN, this is what I get:
Message: DotNetNuke.Services.Exceptions.ModuleLoadException: Object reference not set
to an instance of an object. ---> System.NullReferenceException: Object reference not
set to an instance of an object. at otNetNuke.UI.Containers.ActionBase.get_ActionRoot()
at DotNetNuke.UI.WebControls.SolPartActions.BindMenu() at
DotNetNuke.UI.WebControls.SolPartActions.Page_PreRender(Object sender, EventArgs e) ---
End of inner exception stack trace
It seems to be a problem with the Skin file because if I switch to another skin ,the Actions button is back as normal. What I am not getting though is how this has changed since the last time I successfully used it.
If someone has some suggestions I would appreciate it.
I would suggest looking into your module container .ascx file and remove the references to solpart! and replace with a different provider. I find the standard ones are very slow. I will grab the code from one of my container .ascx files for you to examine - this uses another menu provider to handle the little admin menu's
<%# Control Language="vb" Codebehind="~/admin/Containers/container.vb" AutoEventWireup="false"
Explicit="True" Inherits="DotNetNuke.UI.Containers.Container" %>
<%# Register TagPrefix="ddr" TagName="ACTIONS" src="~/DesktopModules/DDRMenu/Actions.ascx" %>
<%# Register TagPrefix="dnn" TagName="TITLE" Src="~/Admin/Containers/Title.ascx" %>
<%Dim ModuleTitle As String = DotNetNuke.UI.Containers.Container.GetPortalModuleBase(dnnTITLE).ModuleConfiguration.ModuleTitle()%>
<dnn:title runat="server" id="dnnTitle" visible="false" />
<h3><%= ModuleTitle %></h3>
<div class="tab_edging" id="ContentPane" runat="server" style="border:1px solid white">
</div>
<div class="spacer">
<ddr:ACTIONS runat="server" />
</div>
we have installed an extra menu provider from http://www.dnngarden.com/Download.T87.aspx which i suggest you take a look at!
The problem is probably the container or some errant javascript. I would try switching to a different default container first. If that doesn't do it, look to see if there is any Javascript that is throwing errors (I generally do this in the Firefox Error console, but there are many ways).