I have a Popover on the products page in my app, which needs to contain an ion-range with dualKnobs to select a price range. The problem is, the ion range is only showing one knob. It seems to only fail inside de Popover, if I place it on a normal page it works just fine. I need help please.
.html
<ion-range dualKnobs="true" min="0" max="1000" step="100" snaps="true" [(ngModel)]="knobValues"></ion-range>
.ts
knobValues: any = { upper: 1000, lower: 0 };
Related
OVERVIEW:
We are using this plugin -- bootstrap-datetimejs (https://github.com/Eonasdan/bootstrap-datetimepicker). And I have it setup to show the time only
$(".timePicker").datetimepicker({
format: 'LT'
});
We are using ractivejs for our javascript library and my html goes like this
<label for="apptEndTime">End Time</label>
<div class="timePicker">
<input name="apptEndTime" id="apptEndTime" class="form-control date" type="text" value="{{apptEndTime}}" />
</div>
<label>Duration (mins)</label>
<input type="number" class="form-control" value="{{duration}}" id="duration" />
so apptEndTime is binded to ractive object data apptEndTime, and so does the duration. In my code, I made it that if the duration increases, it will also update the value of apptEndTime data. It successfully updated and displayed the apptEndTime.
PROBLEM:
Though it successfully updated and displayed the apptEndTime, when I click the clock icon of the datetimepicker, it still shows the previous time. As you can see on the screenshot below, it already displayed as 11:58 PM but when I click the clock icon, it still shows as 11:57 PM
QUESTION:
Is there a way that when I updated the value of apptEndTime, the time on the time selection menu (when the clock icon is clicked) will also gets updated?
I've already tried googling for day regarding this, but I can't seem to find the right solution. Also tried checking the documentation but can't find any related information
Ok my teammate was able to answer this question. He just added this line of code
$('input[name=appEndTime]').closest('.timePicker').data("DateTimePicker").date(appointmentObj.apptEndTime);
Where:
$('input[name=appEndTime]') is the affected input field
closest('.timePicker'). The '.timePicker' here is the name of your datetimepicker class/id when you initialize datetimepicker
data("DateTimePicker"). You just follow this, because all functions should be accessed via data("DateTimePicker") as mentioned on the plugin page:
https://getdatepicker.com/4/Functions/
date(appointmentObj.apptEndTime). date is the function name (though it is not found on the list of functions from their page :( ). And appointmentObj.apptEndTime is value that I want to set on the menu
I have a Material UI phone number and when my website is displayed RTL, the phone number aligns itself to the right, but the number also gets messed up. How can I make sure that the number stays as is?
<div open={this.props.open} onClose={this.props.onClose} dir="rtl">
<DialogTitle title="New User" />
This text will be RTL led !
<div>
<Typography component="label">'Phone Number'</Typography>
<MuiPhoneNumber
name="phone"
data-cy="user-phone"
defaultCountry={"us"}
value={this.state.phone}
value="1(937)-123-4567"
onChange={this.handlePhoneChange}
/>
<p>614-764-6300</p>{" "}
{/* number is right aligned but number stays the same which is how it should be*/}
</div>
</div>
Here is the codesandbox link https://codesandbox.io/s/mui-phone-number-forked-cczzj?file=/src/CreateUserDialog.js
I get the same behavior on any HTML input element with type="tel", and that has dir="rtl".
If you want to keep that field left to right you can give it a prop inputProps={{dir: "ltr"}} and make the text aligned to the right with some CSS like text-align: right;
I am working on protractor to test the AngularJs application. Here I came across one scenario where I want to click on image for different users. But the id for image is same for all (say 10) users. So I found one more element that is one unique number allocated to each user. The code for 2 different users are:
USER1:
img id="searchPatientImgAdmittedM" class="img-circle picwidth" ng-click="getPatientVitalLabPharmacy(patient.patientId._id)" onclick="ShowHide(this)" src="icons/male.png" alt="" role="button" tabindex="0"
span class="clearfloat ng-binding">12339/span
USER2:
img id="searchPatientImgAdmittedM" class="img-circle picwidth" ng-click="getPatientVitalLabPharmacy(patient.patientId._id)" onclick="ShowHide(this)" src="icons/male.png" alt="" role="button" tabindex="0"
span class="clearfloat ng-binding">8841/span
EDIT:
The full HTML code
<div class="col-md-10 col-sm-9 col-xs-9 skin-font-color paddingTop7">
<span class="skin-font-color">
<span class="name clearfloat ng-binding">KRISHA</span>
<span class="clearfloat ng-binding">12348</span>
<img id="searchPatientImgAdmittedF" class="img-circle picwidth" ng-click="getPatientVitalLabPharmacy(patient.patientId._id)" onclick="ShowHide(this)" src="icons/femaleImages.jpg" alt="" role="button" tabindex="0">
</div>
I tried to do :
element(by.id('searchPatientImgAdmittedF')).all(by.tagName('12348')).click();
// or
element(by.id('searchPatientImgAdmittedF')).element(by.tagName('12348')).click();
How can I make combination of locators to click on this users. Only image part is clickable.
Thanks four your additions.
Now you're trying to click on a sister-element. There are several approaches to do so.
The one I'm usually using is:
element(by.cssContainingText('span.clearfloat','12348')).element(by.xpath('..')).$('#searchPatientImgAdmittedF').click();
//equal to
element(by.cssContainingText('span.clearfloat','12348')).element(by.xpath('..')).element(by.id('searchPatientImgAdmittedF')).click();
This evaluates first the identifiable tag with the unique number, then climbs up to its parent element, then from there gets the img-element with the ID.
The $() selector
The cssContainingText() selector
Another option would be to use isElementPresent(), which evaluates the existence of a child-element. However, the code is (from my point of view) more complex and I don't see, how cssContainingText() could be used there, so I don't try to do it here.
Thanks for your quick help in solving my issue. I want to add here that I found the answer to my problem and now I am able to click on the particular user I want from the list of many users. The code I am using is :
element(by.cssContainingText('span.clearfloat','12339'))
.element(by.xpath('/html/body/div[3]/div[1]/div[17]/div/div/table[4]/tbody/tr[3]/td[1]/div[1]/img'))
.click();
This is finding the child element first and then the parent element.The id was all same for all the users so it was not taking that and so I used only xpath along with unique number.
Thanks again for the help.
I am developing a Material form and have a md-datepicker input field that is showing Invalid Date on load instead of its placeholder:
When clicking on the drop down, the calendar starts all the way back in July 1934, which is less than ideal to say the least:
My code is pretty straight forward:
<div ng-switch-when="glide_date">
<md-input-container>
<label style="font-size: 130%; white-space: normal;" for="{{element.section_element_name}}">{{element.section_element_label}}</label>
<md-datepicker id = {{element.section_element_name}} ng-model="element.answer" md-placeholder="Enter date"></md-datepicker>
</md-input-container>
</div>
If I highlight and delete "Invalid Date", then my placeholder shows up correctly and the calendar drop down resets to the correct month.
Any ideas on how to correct this?
Using bootstrap, every time you add a "Label", it creates a new vertical line. However, what I am trying to achieve is having two labels on the same row horizontally.
I have tried working with the "control groups" but have not been able to get it to work the way I want.
Here is essentially what I am trying to achieve (note they are all horizontal):
Date Start & End Time
<<input goes here>> <<start input here>> <<end input here>>
Here's a link to what I am currently stuck with (roughly) on this JS Bin.
Any help would be greatly appreciated!
Use the grid system to create two columns
<div class="row-fluid">
<div class="span6"><!-- first col --></div>
<div class="span6"><!-- second col --></div>
</div>