Wish you are having a wonderful day,
I'm currently trying to apply some color to a simple slider range.
<Input class="range pr-6 bg-red-500"
type="range"
value="0" min="0"
max="1000"
onChange="rangeSlide(this.value)"
onmousemove="rangeSlide(this.value)"></Input>
It doesn't work at all to change the color like this, I also tried with text and border class.
I made some research and assume I should use this to change the slider bar : -webkit-slider-thumb
Like this :
.range::-webkit-slider-thumb {
background: #00fd0a;
}
However I wish to only use tailwind and dont apply style with pure css. if anyone have any insight to give me I would really appreciate it.
Here is what works for me, using accent-<color>-<number> :
<Input class="range pr-6 accent-red-500"
type="range"
value="0" min="0"
max="1000"
onChange="rangeSlide(this.value)"
onmousemove="rangeSlide(this.value)"></Input>
Also, link to the documentation if someone pass by and need more info : https://tailwindcss.com/docs/accent-color
Related
I have this text box element.
<input type="text" name="textbox" class="box-input ng-pristine ng-scope md-input ng-empty ng-valid ng-valid-required ng-touched" ng-required="field.required" ng-model="$ctrl.model[field.nameField.uuid]" ng-disabled="::field.readOnly" id="input_15" aria-invalid="false" style="">
In protractor how should I use it to locate the element? I am not quite sure how to use ng-model="$ctrl.model[field.nameField.uuid]"
If you are using angular 2 or above by model might not work for you, see here.
You could still use the model attribute to identify your element through css like so
$('[ng-model="$ctrl.model[field.nameField.uuid]"]')
or
element(by.css('[ng-model="$ctrl.model[field.nameField.uuid]"]'))
try like this
let input = element(by.model('$ctrl.model[field.nameField.uuid]'));
I suggest to use unique ID if its possible, or some unique class styles leading to single element.
I want to get the text from the Read-Only text box.
This textbox contains a text that is system generated and hence its a non-editable field.
I tried the below code but not able to capture the text.
var expectedText = element(by.id('txt_ANNOUNCEMENTID')).getText();
Below is the HTML for the element:
<input name="ANNOUNCEMENTID" id="txt_ANNOUNCEMENTID" ng-focus="formName[name].hasFocus=true" ng-blur="formName[name].hasFocus=false; blur()" type="text" ng-model="ngModel" ng-required="" my-maxlength="" class="ng-pristine ng-valid-required ng-valid ng-not-empty ng-touched" ng-readonly="true" autocomplete="off" spellcheck="false" tabindex="1" ng-trim="false" readonly="readonly">
Any help on the above issue is highly appreciated.
You need to use getAttribute(value) instead of getText() when trying get the value from textbox.
In your case, it should be like element(by.id('txt_ANNOUNCEMENTID')).getAttribute("value");
I´m using Angular 2 and i want to do a form Validation.
Here´s my input:
<td><input type="number" class="form-control" min="0" max="100" step="1" pattern="^([0-9]|[1-9][0-9]|[1][0][0])?" name="postEpg" [(ngModel)]="selectedTimer.PostEPG"></td>
My problem now is, that the validation says, this is incorrect, when i don´t fill the field...
But the field ISN´T required, so it should be ok, if theres nothing...
But if there´s something, it has to match the pattern...
Has anyone an idea how to reach this?
Thanks!
What about simply modifiying the pattern like:
pattern="^$|^([0-9]|[1-9][0-9]|[1][0][0])?"
This should allow an empty string or your pattern.
I'm using Kendo ui's mvvm framework, and trying to get an input to apply a format so the number is formatted to two decimal places. Something like:
<input type="text" id="myTextbox" data-format="0.00" data-bind="value: variableInMyViewModel" />
...but it's not formatting the value. Can you use data-format on an input? If not, what is the best way to accomplish this?
I would probably not use a textbox to take in a number, I would switch to a kendo numerictextbox where you can set the format (n2), and the number of decimals.
<input data-role="numerictextbox" data-decimals="2" data-format="n2" data-bind="value: variableInMyViewModel" />
See demo at kendoui
http://demos.telerik.com/kendo-ui/numerictextbox/mvvm
See documentation at kendoui
http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-format
I am trying to get the filename of an uploaded picture to appear in the input field next to the picker button (for filepicker.io) . Basically I am trying to find what to put in the value field for the input tag to get the filename to appear once the picture is uploaded. Here is the code I have:
<div class="row margin" id='img-row'>
<input id="filename" disabled="disabled" value="<WHAT DO I PUT HERE?>" class="input" type="text" style="width: 360px;"/>
<input name="img" data-fp-class="form-simple-action-btn filepicker_launcher" data-fp-button-text="Choose Image" data-fp-services="COMPUTER,FACEBOOK,FLICKR,INSTAGRAM,PICASA" data-fp-container="modal" data-fp-mimetypes="image/*" type="filepicker" data-fp-apikey="#################" id='campaign-img-input' value="<php echo h($_POST['img'])"/>
</div>
Thank you for your help! I haven't found any other examples like this in the documentation.
The recommended way to do this would be to bind a function to the onchange event of the filepicker input type. Once the upload occurs, the function will be called, and you can pull the filename out of the e.fpfile attribute.
Alternatively, it may be easier to use the filepicker.pick call directly given that you are interested in customizing the behavior. The widget is great for a drop-in solution in many cases, but if you're looking to customize further I'd recommend using the javascript api directly.