Is it possible to expand/collapse items in MaterialListComponent? I have noticed there is mentioning in https://dart-lang.github.io/angular_components/#/material_list
If the material-list-item has a DropdownHandle in its ancestry, the
dropdown will be closed on triggering (i.e. clicking or pressing
enter/space on) the list item if closeOnActivate is true.
Does it mean I can create parent item and expand/collapse nested elements? Can you guys share with example if it is possible?
I have achived required behaviour with material-expansionpanel inside material-list(Thanks to #Hadrien Lejard suggestion). Here is example:
<material-list *deferredContent>
<material-list-item [routerLink]="'parent/dashboard'" id="parents_listitem_dashboard">
<material-icon icon="store"></material-icon>Dashboard
</material-list-item>
<material-expansionpanel flat [showSaveCancel]="false">
<div class="expansionHeader" name id="parents_listitem_kits">
<material-icon icon="all_inbox"></material-icon><span>Items</span>
</div>
<material-list-item [routerLink]="'parent/items/reserved'" id="parents_listitem_reserved">
<material-icon></material-icon>Reserved
</material-list-item>
<material-list-item [routerLink]="'parent/kits/registered'" id="parents_listitem_registered">
<material-icon></material-icon>Registered
</material-list-item>
</material-expansionpanel>
</material-list>
Related
I would like to create a mat-select controls in mat-menu. In the documentation I don't see any examples with that scenario. I tried it out, and it seems to be working, the problem is when options are expanded, the menu disposes. How can I keep it open? Here is the tester I am working with
You need to stop event propagation ($event.stopPropagation()) on the menu item. Here's an example of how this can be done;
<div mat-menu-item [disableRipple]="true" (click)="$event.stopPropagation()">
<mat-form-field>
<mat-label>Some label</mat-label>
<mat-select [formControl]="someFormControl">
<mat-option *ngFor="let item of someList" [value]="item.value">{{item.description}}</mat-option>
</mat-select>
<button type="button" mat-button matSuffix mat-icon-button (click)="someFormControl.setValue(null); $event.stopPropagation();" title="Clear">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
</div>
Also you probably want to disable ripple ([disableRipple]="true") so you do not get the ripple visual feedback that menu items normally have.
I'm trying to find a link in my navbar, nested like so:
<div class="menu logged-out" id="loggedoutmenu">
<a href="/users/auth/twitter?state=navbar_basic" data-no-instant>
<div class="option"> via Twitter</div>
</a>
</div>
I've tried using the following methods and none of them have worked:
find_link("via Twitter")
find_link("via Twitter", {href: "/users/auth/twitter?state=navbar_basic"})
find('div', {class: 'option'})
Not really sure how to grab that element... The main goal is to test the link via click_link.
Edit:
Here's the full HTML structure:
<body>
<div class="top-bar" id="top-bar">
<nav>
<--- other nav elements not listed --->
<div class="navigation-butt desktop" id="navigation-butt">
<div class="menu logged-out" id="loggedoutmenu">
<a href="/users/auth/twitter?state=navbar_basic" data-no-instant>
<div class="option"> via Twitter</div>
</a>
</div>
</div>
</nav>
</div>
</body>
I'm guessing the menu is collapsed and you haven't done anything to open it, so the link isn't actually visible on the page. Assuming you just need to click on the '#loggedoutmenu' item to open the menu you could do something like
find('#loggedoutmenu').click.click_link('via Twitter')
which will click on 'loggedoutmenu' then look for the link inside it, and click the link when found. If clicking on '#loggedoutmenu' isn't how you open the menu then you'll need to provide more info.
Update: You have now indicated that the menu opens on hover - so assuming the user has to hover over an ancestor of the button you want to click you can do
find('<css selector for the visible element the user needs to hover over>').hover.click_link('via Twitter')
Writing my solution as an extension of Thomas Walpole's, which lead me to getting it. Thanks again, Thomas!
find('#navigation-butt').hover.click_link(href:"/users/auth/twitter?state=navbar_basic")
Edit: Updated my answer since the previous explanation was incorrect.
I am using angular material version 1.1.1 and angularjs version 1.5.5. But the selected options are displaying top of the page.
<div layout="row" layout-align="space-between center">
<span>What is your favorite weapon?</span>
<md-select ng-model="weapon" placeholder="Weapon" class="md-no-underline">
<md-option value="axe">Axe</md-option>
<md-option value="sword">Sword</md-option>
<md-option value="wand">Wand</md-option>
<md-option value="pen">Pen?</md-option>
</md-select>
</div>
Is there any fix for this issue?
Please find the following screen shot:
I am creating custom grid editor and I would like to have more than one RTE inside of it. Currently, I am initializing RTE like this
<div unique-id="control.$uniqueId"
value="control.text1"
grid-rte configuration="control.config.rte">
</div>
This works fine for one instance of RTE. However, when I try to add 2nd or 3rd RTE in this manner, they are not initialized, instead I am getting multiline textbox.
So, how to add more than one RTE, and, is this best way to add RTE?
I had the same problem. I have solved the problem by adding $index. Like so:
<div unique-id="control.$uniqueId + $index"
value="control.text1"
grid-rte configuration="control.config.rte">
</div>
<div unique-id="control.$uniqueId + $index"
value="control.text1"
grid-rte configuration="control.config.rte"> </div>
The previous answer works when the control is inside the ng-repeat directive, ie
<tr ng-repeat="rowData in control.tabelsData">
<td>
<div
unique-id="control.$uniqueId + $index"
value="rowData.content"
grid-rte configuration="rteconfig" style="border:4px solid #EB4F1C;">
</div>
</td>
</tr>
Otherwise yes, manually modifying the unique-id would be the answer for a known amount of multiple amount of Rich Text Editors in the editor
<div
unique-id="control.$uniqueId+1"
value="rowData.content"
grid-rte configuration="rteconfig" style="border:4px solid #EB4F1C;">
</div>
<div
unique-id="control.$uniqueId+2"
value="rowData.content"
grid-rte configuration="rteconfig" style="border:4px solid #EB4F1C;">
</div>
I'm trying to generate some jQuery Mobile elements with Javascript. After the javascript runs and places the generated elements in the myTest div, the styling and scripting are not attached as they are on the static content. Is there any way to have jQuery execute on the generated code?
Here's an example:
Markup:
<!-- Does not look correct when populated -->
<div id="myTest">
</div>
<!-- Looks correct -->
<div data-role="collapsible-set" data-theme="d" data-content-theme="d" data-mini="true" data-corners="false">
<div data-role="collapsible">
<h3>Test</h3>
</div>
</div>
Script:
$(document).ready(onloadFunc);
function onloadFunc() {
var parent = $('<div data-role="collapsible-set" data-theme="d" data-content-theme="d" data-mini="true" data-corners="false">');
var item = $("<h3>").html("test");
parent.append(item);
$("#myTest").append(parent);
}
Link to jsfiddle: http://jsfiddle.net/DcFhj/
First off your markup is actually slightly off, the collapsible-set widget is meant to contain within it several collapsible widgets.
For example (taken from the documentation)
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section 1.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible set content for section 2.</p>
</div>
</div>
Have a look at the following question from the jQuery Mobile documentation. Basically in general in order to enhance markup that is dynamically inserted you have to either initialize the widget on the markup or you can trigger the create event on a parent element and jQuery Mobile should initialize all of the appropriate widgets.
In this case being that you just have one widget you just need to initialize the collasible widget (also interesting enough this works with your current markup)
$("#myTest").append(parent).find('div').collapsible();
http://jsfiddle.net/DcFhj/3/
If for example you had several widgets that needed enhancement (or just for simplicity) you could instead trigger the create method (this doesn't work with your current markup but if you correct it it should).
$("#myTest").append(parent).trigger('create');
http://jsfiddle.net/DcFhj/4/