I'm using materialize 0.100.2 and have used multiple card-panels. Each card-panel has a button that opens a dropdown. The dropdown is same for every trigger. I searched for the solution and I even found a problem just similar to mine. But I did not understand the solution that was proposed. The problem and solution I found is can be seen on github on following link -
https://github.com/Dogfalo/materialize/issues/2051
My problem is like I import data from backend and I iterate card-panels up to the length of data I receive. I put the dropdown below this iteration so for it to be common for all the card-panels.
Consider 'actionLists' with the data.
<div class="card-panel" data-ng-repeat="actionItem in actionLists">
.....
<button class="dropdown-button btn btn-floating" data-activates="dropdown-example"><i class="material-icons">edit</i></button>
</div>
<div id="dropdown-example" class="dropdown-content">
....
</div>
Can you please help me out. I'm quite new to materialize. Thanks in advance.
Before anything else, I'd recommend updating to version 1.0 rc1.
There have been some changes since the 0.x versions.
Then you can have multiple dropdown-trigger element reference the same dropdown-content.
See https://materializecss.com/dropdown.html
Related
I am actually building a SPA with foalts.org.
I have placed my script.js inside the public folder. Unfortunately, this doesn't allow me to use typescript for my vue-js. Maybe someone has an idea for this, cause actually the public folder got served from foalTS framework. But this is actually not the main topic.
The maintopic is, that i want to list several divs with
<div class="row-position" v-for="order in orders" :key="order.latestPrice">
<div id="myAMchart></div>
</div>
Now I would like to be able to place an amChart (https://www.amcharts.com/) for each div. And I want that these charts follow the value of order.latestPrice. But I actually have no idea how to set up this with amCharts and vue.js
Im open to any ideas.
I was able to update one single chart but with a fixed id of the div.
I don't know how to connect the many different (dynamicaly generated) charts to the order.latestPrice field.
Thanks!
Example of the HTML of a dropdown element:
<div aria-owns="ember-basic-dropdown-content-ember1234" tabindex="0" data-ebd-id="ember1234-trigger" role="button" id="ember1235" class="ember-power-select-trigger ember-basic-dropdown-trigger ember-view"> <!---->
<span class="ember-power-select-status-icon"></span>
</div>
The xpath and CSS selector also contain the same ember id.
xpath : //*[#id="ember1235"]
css selector : #ember1235
The ember id would change from id="ember1235" to say, id="ember1265" when there is a change in the UI.
I am using id to locate the element. But every time it changes I need to modify the code. Is there any other attribute I could use for Ember JS UI elements?
There is quite a lot to discuss in your question but hopefully we will have a good answer for you #PriyaK
The first thing to mention is that Ember IDs may not be the best method to select an element in the DOM. As you have already mentioned, they can change from time to time and also it doesn't really give you a great semantic thing to select in your selenium test so it might seem a bit out of context when looking back.
One thing that you could try is to either pass a class to the ember-power-select component (the one that provides the HTML that you used in your example) and use that to select the element, something like:
<PowerSelect
#class="my-fancy-class"
as |name|
>
{{name}}
</PowerSelect>
Then you should be able to select the selected value by using the CSS selector .my-fancy-class span (because the component outputs the selected value in a span)
We just tried this in an example app but it didn't actually work 🤔 Never fear, you can also do something like this and it should work with the same selector as before:
<div class="my-fancy-class">
<PowerSelect as |name|>
{{name}}
</PowerSelect>
</div>
This is fine, but there are also a few issues using classes for selectors in tests. One example of a problem that might crop up is that your tests might all suddenly stop working if you did a style refactor and changed or removed some of the classes on your elements. One technique that has become popular in the Ember community is to use data-test- attributes on your DOM nodes like this:
<div data-test-my-fancy-select>
<PowerSelect
#class="my-fancy-class"
as |name|
>
{{name}}
</PowerSelect>
</div>
which can then be accessed by the following selector: [data-test-my-fancy-select] span. This is great for a few reasons! Firstly it separates the implementation of your application and tests from your styling and avoids the issue I described above. The second benefit of this method is that using what #Gokul suggested in the comments, the ember-test-selectors package, you can make use of these data-test- selectors in your development and test environments but they will be automatically removed from your production build. This is great to keep your DOM clean in production but also, depending on the size of your application, could save you a reasonable amount of size in your templates on aggregate.
I know you say that you are using selenium for your testing but it's also worth mentioning that if you're using the built-in Ember testing system you will be able to make use of some testing helpers that addons may provide you. ember-power-select is one of those addons that provides specific testing helpers and you can read more about it in their documentation: https://ember-power-select.com/docs/test-helpers
I hope this answers any questions you had!
This question was answered as part of "May I Ask a Question" Season 3 Episode 1. If you would like to see us discuss this answer in full you can check out the video here: https://www.youtube.com/watch?v=1DAJXUucnQU
I am using Materialize and the sidenav is creating multiple overlays upon clicking the sidenav.
<div id="sidenav-overlay" style="opacity: 1;" class=""></div>
<div id="sidenav-overlay" style="opacity: 1;" class=""></div>
<div id="sidenav-overlay" style="opacity: 1;" class=""></div>
I found a fix here and replaced the sideNav.js file from here. But it still doesn't do any good.
Has anyone been stuck in a similar situation and found a solution?
The reason there are multiple overlays appearing behind your SideNav is because materialize's $('.button-collapse').sideNav() is being run multiple times on the same element.
A quick fix for this is to remove all previous click() events from your element before re-initializing materialize's sideNav, like so:
$(".button-collapse").off('click').sideNav({ --yourOptions-- });
Note: I am not sure what other functionality the ".sideNav()" call may be adding here, there may be a better/more specific way to remove the previous init.
what language you are programming??
I spent something like with asp.net, the mistake was declaring this:
$(".button-collapse").sideNav();
In MasterPage and ChildPages. Now declaring only MasterPage and the issue was solved.
hopefully help you in something,
Regards
For those who are using the Materialize Framework on Drupal, make sure you do not accidentally side-load another copy of Materialize / Velocity JS through Grunt or other task managers. That would cause the overlay to stack up like crazy.
This is what I tried when I faced similar issue:
#sidenav-overlay{ opacity: 0;}
#sidenav-overlay {background-color: transparent;}
Please don't make comments regarding why i posted a similar question. I have tried many things and nothing is working. Below is the HTML
<div id="businessSettingsColumn1">
<div class="sectionLink">
Business details
</div>
<div class="sectionLink">
Operating hours
</div>
<div class="sectionLink">
Closed dates
</div>
<div class="sectionLink">
Appointment notifications
</div>
I need to click the second link
I have tried
1) webdriver.findElement(By.partialLinkText("Operating hours")).click();
2)webDriver.get(mylement.findElement(By.tagName("a")).getAttribute("href"));
3)
List<WebElement> businessLinks= busCol.findElements(By.className("sectionLink"));
for(WebElement bLink :businessLinks) {
if(bLink.getText().contains("Operating hours")) {
bLink.findElement(By.tagName("a")).click();
}
}
4) Using the Action builder to move the mouse and then doing a click
Also when i did this 3 times in a row , my element got clicked
webdriver.findElement(By.partialLinkText("Operating hours")).click();
webdriver.findElement(By.partialLinkText("Operating hours")).click();
webdriver.findElement(By.partialLinkText("Operating hours")).click();
I am using Firefox version 25.0 and Selenium version 2.35.0. Funny thing though is when i do a sysout , the values get printed and when i try to get the url using webdriver I get "Element not found in the cache - perhaps the page has changed since it was looked up" .. its pretty much a static page with links only so i dont understand why i am not able to click it.. Any help will be much appreciated.
Can you try calling focus() on the element before you click on it?
This usually occurs because the element was there at some point, but then something happened and then it's no longer there for some reason. I encounter this frequently when a page makes AJAX calls for example.
Have you tried adding some waits so that selenium is sure that the element is ready?
My apologies for the post. I realize that this is more than likely redundant but for some reason I can't seem to find my answer.
I believe there is a keyboard shortcut in Textmate for converting something along the lines of
div.test
to
<div class="test"></div>
Any ideas? Anyone know where I can get documentation about this shortcut?
Thank you.
See Zen Coding and Sparkup.
Without the additions mentioned by #Bradford, the alternative option is to use the built-in snippets. For example (when the document is set to be HTML), typing div<TAB><TAB>test inserts the following and places the cursor on the second line:
<div id="test">
</div>