<div class="col-sm-2">
<div class="form-group">
<div class="toggle-switch toggle-switch--blue">
<input type="checkbox" class="toggle-switch__checkbox" (change)="checkisPetBondAvailable($event)" >
<i class="toggle-switch__helper"></i>
</div>
</div>
</div>
Here is the code for toggle switch where its getting disabled after refreshing the page can i get any solution for it
i got the answer in above code we should use [checked] for two way binding
Related
Hei, make a vue app.
When running it shows up part of the app, the add event don´t show up and not even show the data.
Before it show the same error but different area, and i could fixed it but now i can´t figure it out. I´ve been searching here and on the net, but nothing so far. I know it was so be something with the template in html, but can´t figure it out. First time working with Vue.
Thank you. Here the error
<div class="container" id="events">
<!-- add an event form -->
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Add an Event</h3>
</div>
<div class="panel-body">
<div class="form-group">
<input class="form-control" placeholder="Event Name" v-model="event.name">
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Event Description" v-model="event.description"></textarea>
</div>
<div class="form-group">
<input type="date" class="form-control" placeholder="Date" v-model="event.date">
</div>
<button class="btn btn-primary" v-on="click: addEvent">Submit</button>
</div>
</div>
</div>
</div>
- invalid expression: Unexpected token : in
click: addEvent
Raw expression: v-on="click: addEvent"
(found in <Root>)
The error is due to an incorrect v-on expression.
The v-on expression should look similar to the following:
v-on:click="addEvent"
Where addEvent is the name of the function to be called when the component is clicked. For related examples see Vue.js Event Handling.
Could anyone help me out please?
Actually, the radiobuttons are always in the DOM but they are visible on the page based on ADDRESS field, so as you can see below if Pickup and Delivery timezone are same then the radiobuttons are not visible on page:
but if they(pickup and delivery timezone) are different then the RADIO BUTTONS are visible as shown below:
.
Now in my script I try to set all the radiobuttons as NO, so when I run it the script passes but in real the radiobuttons are left untouched. The result is PASS as shown below
and Chrome browser after the script run is shown below:
Here is the script I wrote for waiting and clicking on radiobuttons:
`wait until element is enabled id=exportclearance_1
page should contain radio button id=exportclearance_1
click element id=exportclearance_1
click element id=transitclearance_1
click element id=importclearance_1
click element id=insurance_1`
Here is the HTML of page:
`<div class="form-group">
<label class="col-sm-4 control-label" for="">
<div class="col-sm-6">
<input id="exportclearance_0" name="export_clearance" value="True" autocomplete="off" type="radio"/>
<label class="control-label control-label-light clearance" for="exportclearance_0">Yes</label>
<input id="exportclearance_1" name="export_clearance" value="False" autocomplete="off" type="radio"/>
<label class="control-label control-label-light clearance" for="exportclearance_1">No</label>
<br/>
</div>
</div>
<div id="exportclearance-textarea" style="display:none">
<div class="row col-sm-6 col-sm-offset-4">
<textarea id="field-exportclearance" class="form-control customs-field" cols="40" name="export_clearance_instructions" placeholder="Instructions for export clearance (E.g. Broker details, Customs number, etc.)" rows="2"/>
</div>
</div>
<div class="form-group">
<div id="transitclearance-textarea" style="display:none">
<div class="form-group">
<div id="importclearance-textarea" style="display:none">
</div>
<div class="form-group">
<div id="id_attachment_formset_parent">
<div class="form-group">
<di
`
JavaScript executor worked for me as given below.
execute javascript document.getElementById('insurance_1').click()
I'm trying to click on 'Recommended' input tag of a 'Samsung' label. Please find the appropriate HTML code below.
`
<div class="card-wrapper">
<a class="card-focus has-shadow" href="/app/72292">
<div class="card-container">
<div class="card-logo">
<section class="card-info">
<div class="card-name">Samsung Push Service</div>
<div class="card-publisher hidden-xs">Samsung Push Service</div>
</section>
<div class="card-rating">
</div>
</a>
</div>
<div class="hidden-xs">
<div>
<div class="app-management">
<div class="checkbox ">
<div class="checkbox ">
<label>
<input id="Recommended-72292" class="" aria-disabled="false" value="Recommended" type="checkbox"/>
<span class="cr"/>
<span class="layer-label">Recommended</span>
</label>
</div>
<a href="/mdm">
</div>
</div>
</div>
</div>`
How to achieve this?
Your input seems to be a checkbox, not a button. Try changing its checked value instead of triggering a click:
document.getElementById('Recommended-72292').checked = true;
In selenium, click() method would do your job.
if ( !driver.findElement(By.id("Recommended-72292")).isSelected() )
{
driver.findElement(By.id("Recommended-72292")).click();
}
try following:
driver.findElement(By.cssSelector("div.checkbox input#Recommended-72292")).click();
I am having an alert box for saving changes in a form. However, I am not able to automate the alert box using selenium. Here's an image of the Alert box. I have already used the methods like :
driver.switchTo().alert().accept();
but this is also not working.
HTML code for the alert:
<div id="ngdialog2" class="ngdialog ngdialog-theme-default ng-scope" role="alertdialog" aria-labelledby="ngdialog2-aria-labelledby" aria-describedby="ngdialog2-aria-describedby">
<div class="ngdialog-overlay" />
<div class="ngdialog-content" role="document">
<div class="ngdialog-message">
<div class="dialog-header clearfix">
<h3 id="ngdialog2-aria-labelledby" class="ng-binding">Confirm</h3>
</div>
<div class="dialog-content">
<p id="ngdialog2-aria-describedby" class="ng-binding">Do you want to save?</p>
</div>
<div class="button-controls">
<button class="button cancel-btn ng-binding" ng-click="closeThisDialog(false)">No</button>
<button class="button btn-submit ng-binding" ng-click="closeThisDialog(true)">Yes</button>
</div>
</div>
</div>
</div>
I'd like to accomplish a horizontal form with rows of multiple left aligned form controls per row. The final layout should look like this
First of all I want the icon show up NEXT to the name of the user on the right side of the user's name just like in the image showed above.
I use GWT along with bootstrap3.3.2. I read a lot about mix of horizontal forms
with inline forms or using horizontal forms along with rows of form controls. The last approach I like most.
I prepared a bootply which shows my first problem (I'll create a second bootply and stackoverflow post for additional problems). http://www.bootply.com/hheckner/GiPzaqWHlT
As you can see there, the icon does not align well (vertically) to the name of the user. Furthermore I'd like to show up the icon NEXT to the user's name, so if the user name is longer the image should move to the right and vice versa. Using the grid does not help here (I think at least). The icon should show up immediately next to the user name?
How can I accomplish this?
To get icon showing next to some text you just need to have span right after text, but still inside your <p> element.
I made somewhat similar form to the one you provided in screenshot using only Bootstrap Grid. There are probably multiple solutions, that could be better in terms of lines of code, but when you get used to grid system this should be quite fast method.
I have to warn you I used <h4></h4> for all text, and no special element for some text, so you should fix it accordingly. Also Bootstrap's form-inline class works only when viewport is bigger then 768px - you might not see working example on JSFiddle as you would want, but when you see it on screen bigger then 768px, it should be just fine.
<div style="text-align:left;">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h4>Owner</h4>
</div>
<div class="col-md-8">
<h4>Hannes Heckner <span class="glyphicon glyphicon-pencil"></span></h4>
</div>
</div>
<form class="form-inline">
<div class="row">
<div class="col-md-4">
<h4>Scheduled for</h4>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-1">
<h4>Begin:</h4>
</div>
<div class="col-md-11">
<div class="form-group">
<input type="text" class="form-control" id="beginDate" placeholder="11/10/2015">
</div>
<div class="form-group">
<input type="text" class="form-control" id="beginTime" placeholder="10:30">
</div>
(Duration: <div class="form-group">
<input type="text" class="form-control" id="beginTime" placeholder="30">
</div> min)
</div>
</div>
<div class="row">
<div class="col-md-1">
<h4>End:</h4>
</div>
<div class="col-md-11">
<div class="form-group">
<input type="text" class="form-control" id="endDate" placeholder="11/10/2015">
</div>
<div class="form-group">
<input type="text" class="form-control" id="endTime" placeholder="11:30">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h4>Location</h4>
</div>
<div class="col-md-8">
<div class="form-group">
<input type="text" class="form-control" id="location">
</div>
</div>
</div>
</form>
</div>
</div>
JSFiddle https://jsfiddle.net/dejanmarolt/5ctd4fe5/