what attribute should I pass to keep bootstrap accordion open.
<BsAccordion as |acc|>
<acc.item #value={{1}} #title="First item">
<p>Lorem ipsum...</p>
<button {{on "click" (fn acc.change 2)}}>
Next
</button>
</acc.item>
<acc.item #value={{2}} #title="Second item">
<p>Lorem ipsum...</p>
</acc.item>
<acc.item #value={{3}} #title="Third item">
<p>Lorem ipsum...</p>
</acc.item>
</BsAccordion>
<BsAccordion> component provided by Ember Bootstrap has a #selected argument. The AccordionItem, which #value argument matches the #selected argument, will be open.
The example given above will show the item with title "Second item" as open.
<BsAccordion #selected={{2}} as |ac|>
<acc.item #value={{1}} #title="First item">
<p>Lorem ipsum...</p>
</acc.item>
<acc.item #value={{2}} #title="Second item">
<p>Lorem ipsum...</p>
</acc.item>
<acc.item #value={{3}} #title="Third item">
<p>Lorem ipsum...</p>
</acc.item>
</BsAccordion>
Please note that this does not prevent the user from changing the currently open item. Doing so could be achieved by resetting #selected in the #onChange event.
Related
first time poster! I'm still fairly new to coding and Django...
I'm looking to create a django if statement to see if a certain button is pressed. I have a toast set up to show an error warning if a search returns no results, but it also pops up if the user clears the search.
Here's the button(s)
<div class="input-group-append">
<button class="form-control rounded-circle btn form-button ml-2" type="submit">
<span>
<i class="fas fa-search"></i>
</span>
</button>
<button class="form-control rounded-circle btn form-button ml-2 closebutton" type="clear" name="clear">
<span>
<i class="fas fa-times"></i>
</span>
</button>
</div>
I'd like it to spot if the button with the name/type "clear" is clicked, then it won't run the toast. Toast is below:
{% if button == 'clear' %}
<div class="toast custom-toast rounded-0 border-top-0" data-autohide="false">
<div class="arrow-up arrow-danger"></div>
<div class="w-100 toast-capper bg-danger"></div>
<div class="toast-header bg-white text-dark">
<strong class="mr-auto">Error!</strong>
<button type="button" class="ml-2 mb-1 close text-dark" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body bg-white">
{{ message }}
</div>
</div>
{% endif %}
I'd like it to spot if the button with the name/type "clear" is clicked, then it won't run the toast.
This if statement is only run on the server when it renders the HTML for the web page. It is checking if a variable named button has the string value "clear". This has nothing to do with any HTML elements in the page, let alone the name of a particular <button>. Instead, the value of the variable button comes from the "context" when your Python calls one of the render functions.
I'm looking to create a django if statement to see if a certain button is pressed.
There are two different ways to handle button clicks:
Submit a form to the server which then returns a response with a new page. This can be the same Django template rendered with different values in the context in order to get the behavior that you want.
Add an onclick handler to the button. This should be a JavaScript function that peforms the action you want. It can manipulate the elements in the page to add a toast or anything else.
The first option is very slow because it will require a new network request. The second option is probably preferred here since it will be very responsive to the user's actions.
I have created a form, in the form I have a button
<form #f='ngForm' (ngSubmit)='onAddBusiness(f)' >
....
....
<ion-item>
<button ion-button icon-left outline block (click)='openMap()'>
بۆ دیاریکردنی شوێن کلیک لێرە بکە
<ion-icon name="map"></ion-icon>
</button>
<p *ngIf="(position==undefined); else elseblock">
هیچ شوێنێک دیاری نەکراوە
</p>
<ng-template #elseblock>
<p #elseblock>
دەست خۆش شوێنەکە دیاری کرا
</p>
</ng-template>
</ion-item>
<ion-item>
<button type='submit' ion-button block [disabled]="!f.valid">ناردن</button>
</ion-item>
</ion-list>
</form>
the button is present a Modal to set the location on a map.
The issue is whenever I click the Button to open the modal, the form is submitted.
In the button to open modal, specify the type as button.
<button type='button' ion-button icon-left outline block (click)='openMap()'>
بۆ دیاریکردنی شوێن کلیک لێرە بکە
<ion-icon name="map"></ion-icon>
</button>
I have the following layout
<!-- Page Content -->
<ion-content class="app-page card-list">
<!--
-->
<ion-searchbar
[(ngModel)]="searchinput"
(ionInput)="onInput(search)"
placeholder="Search Contacts" light #search>
</ion-searchbar>
<!-- Refresher -->
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
<!-- Contact List Start Here -->
<ion-list>
<!-- Foreach Contact in Contacts do -->
<button ion-item *ngFor="let contact of contacts" (click)="getContact(contact.id)" >
<ion-avatar item-left>
<img [src]="_DomSanitizationService.bypassSecurityTrustUrl('data:image/jpg;base64,' + contact.image_small)" *ngIf="contact.image_small"/>
<img src="img/nopic.png" text-center *ngIf="!contact.image_small"/>
</ion-avatar>
<h2>{{contact.name}}{{contact.parent_id? ", " + contact.parent_id[1] : ""}}</h2>
<p><b>Mobile: </b>{{contact.mobile || "" }} <b>Phone: </b>{{contact.phone || "" }} <b>Email: </b>{{contact.email || ""}} </p>
</button>
<button (click)="newContact()" fab fab-bottom fab-right fab-fixed><ion-icon name="add"></ion-icon></button>
<!-- Infinite Scroll -->
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-list>
</ion-content>
<!-- Add new contact floating button -->
The problem that I face is that when I pull down the refresher, my bottom left floating button does not stay at the bottom.
I've even place the button out of ion-list, it does not help to keep the button at bottom.
You should use FAB outside the ion-content. The best way is create ion-footer and add FAB to it.
<ion-content>
...
</ion-content>
<ion-footer>
<button (click)="newContact()" fab fab-bottom fab-right fab-fixed>
<ion-icon name="add"></ion-icon>
</button>
</ion-footer>
Hi I'm trying to click on this button that stays disabled until you fill in other fields. I am working with firefox. My script fills out those fields and the button is now clickable with my mouse. But when I try to click that element through selenium I get an error
WebDriverException: Message: Element is not clickable at point (281.8333282470703, 14.149993896484375). Other element would receive the click: <li ng-class="{active: $state.includes('urlAdm')}" id="adm-menu"></li>
Here is the html for the button.
<div class="col-xs-offset-2 col-xs-5">
<button type="submit" class="btn btn-primary ng-binding" ng-disabled="!userForm.$valid || user.deleted_at" disabled="disabled">
<i class="fa fa-check-square-o fa-fw"></i>
Create
</button>
<!-- ngIf: isAddUser() --><button ng-if="isAddUser()" type="button" class="btn btn-default ng-scope" ng-click="resetForm()">
<i class="fa fa-eraser fa-fw"></i>
Clear
</button><!-- end ngIf: isAddUser() -->
<!-- ngIf: !user.deleted_at && user.id !== currentUser.id && user.id -->
<!-- ngIf: user.deleted_at -->
</div>
I've tried regularly clicking on the button and doing it through actions but neither work.
Here is the code
element = driver.find_element_by_xpath("//*[#id='user-editor-1']/form/div[5]/div/button[1]")
ActionChains(driver).move_to_element(element).click().perform()
Any help would be greatly appreciated. Thanks!
You should try to click using execute_script() as below :-
element = driver.find_element_by_xpath("//button[contains(.,'Create')]")
driver.execute_script("arguments[0].click();",element)
Hope it helps....:)
I'm using Foundation 6 with Angular2, and I have a couple of Reveal modals, that needs to open in a sequence. I've copied the example from Zurb directly, but when I click the button in the first modal, the new modal opens and the first doesn't close.
The default value for multipleOpened should be false, but they just open on top of each other.
Screenshot
I've tried setting data-multiple-opened="false" and also data-options="multipleOpened:false;", but they still open on top of each other.
Here is my code:
<p><a data-open="exampleModal2">Click me for a modal</a></p>
<!-- This is the first modal -->
<div class="reveal" id="exampleModal2" data-reveal data-options="multipleOpened:false;">
<h1>Awesome!</h1>
<p class="lead">I have another modal inside of me!</p>
<a class="button" data-open="exampleModal3">Click me for another modal!</a>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- This is the nested modal -->
<div class="reveal" id="exampleModal3" data-reveal data-options="multipleOpened:false;">
<h2>ANOTHER MODAL!!!</h2>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
Can anyone point me in the right direction?
I'm not sure if this is the effect you're after, but you can force the closing of the first modal by adding data-close to the button that launches the second one:
<a class="button" data-close data-open="exampleModal3">Click me for another modal!</a>
JSFiddle example