<span/> field with HTML enter gives different width/margin than withouth HTML enter - input

The following code:
<span style="display:inline-block;width:200px;">Selectiedatum</span>
<input type="text" value="30-06-2013" style="width:100px;text-align: right;" />
Gives a different output than:
<span style="display:inline-block;width:200px;">Selectiedatum</span><input type="text" value="30-06-2013" style="width:100px;text-align: right;" />
Yes, the only difference is a HTML enter...
Check http://jsfiddle.net/Et4WZ/
The problem is that this code is created by ASP.net; I can't just simply add or remove a HTML enter.
Why is this occurring and how can I fix it?

Blender was right.
I fixed it by adding a span field with 1 whitespace:
<span> </span>
So:
<span style="display:inline-block;width:200px;">Selectiedatum</span><span> </span><input type="text" value="30-06-2013" style="width:100px;text-align: right;" />

Related

Rendering value on an input type=number

I am working with ejs and mongodb/mongoose and what I am trying to do is rendering the page passing the data to an input type="number" on value attribute, but it is not working.
This is the backend part of the code:
Produto.findOne({_id: requestedProduct}, function(err, produto){
res.render("produtosEditar", {
precoUnitario: produto.precoUnitario
});
});
And this is where I am trying to render it:
<input class="form-control mid-field" type="number" min="0" step="any" name="precoUnitario" value="<%= precoUnitario %> ">
The value stored in db is higher than 0.
When I change the input type to text, it works, but it doesn't when it is a type="number".
This is an edit data page.
Can you help bros?
Thank you!
I'm assuming your precoUnitario variable is a valid number. You need to remove the
extra space at the end of value="<%= precoUnitario %> ">.
You can see the demo below:
<!-- The extra space at the end of value makes it unvalidate -->
<input class="form-control mid-field" type="number" min="0" step="any" name="precoUnitario" value="1.5 ">
<!-- This works -->
<input class="form-control mid-field" type="number" min="0" step="any" name="precoUnitario" value="1.5">

IE 11 input not displaying typed text

A work's client has reported an issue in our application when working with IE11.
On an specific form, sometimes, when opening it, if you type, the typed text won't show. If I open developer tools, it suddenly shows.
This is the rendered html belonging to that form:
<div class="col-sm-6 ">
<div class="form-group" data-ng-show="myform.txtPropietario.visible">
<label class="col-md-4 control-label my-show-hide-animation">Propietario:</label>
<div class="col-md-8">
<div class=" ">
<input name="txtPropietario" class="form-control text-left ng-pristine ng-valid" input-alpha-numeric="ES" onblur="this.value=this.value.toUpperCase();" data-ng-model="myform.values.txtPropietario" data-ng-disabled="myform.txtPropietario.disabled" type="text" step="0.01" maxlength="50" placeholder=" "></div>
<ul class="errores my-show-hide-animation ng-hide" data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$invalid && myform.procesado"><li data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$error.required" class="ng-hide"><span>Campo obligatorio</span></li><li data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$error.pattern" class="ng-hide"><span>El formato del dato ingresado no es vĂ¡lido.</span></li>
</ul>
</div>
</div>
</div>
The app work's over AngularJs and html is built over Bootstrap 3.
Any idea why is this happening?
It's hard to tell without seeing the CSS, however i encountered this issue a while back and fixed it by setting the height of the input box.
My theory is that IE didn't think there was enough height to show the text in the font size I had specified.
For example
<input type="text" id="example" style="height: 40px" />
I hope this helps.

Handle on-off switch with Selenium / java

I can neither recognize the on-off switch nor get its current value (On / Off).
Please help to have a look
try using xpath = "//span[#class='onoffswitch-inner' and contains(#id,'aui')]" but it doesn't help to recognize this button
"id" is a dynamic one, it will be changed once loading the page
Code:
<li id="aui_3_4_0_1_1099">
<div id="aui_3_4_0_1_1098" class="onoffswitch">
<input id="notificationActive" class="onoffswitch-checkbox" type="checkbox" autocomplete="off" checked="checked" name="notificationActive"></input>
<label id="aui_3_4_0_1_1097" class="onoffswitch-label" for="notificationActive">
<span id="aui_3_4_0_1_1096" class="onoffswitch-inner">
::before
::after
</span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</li>
Thanks,

capybara /cucumber can't find radio

I'm having an issue finding a radio button. Here is a snippet of the html:
<form action="/" id="frm-info" method="post"><input id="ClickedButton" name="ClickedButton" type="hidden" value="" /><input name="__RequestVerificationToken" type="hidden" value="KTQF3bkKPP0OirvtL1EYsW-Q77zq-8H9YAPqeoBB9ewpNSYoc0dOEout26qrtMmX6xBx0_roxqWRwCXAlwZRTyW9ZBTBjwNgifWqws6hyOFIRmc6O-7P6jZXbZNYJ5Pazt9Hmg2" /> <div class="row borGreyPad mlmrcolor bb0">
<div class="col-sm-12 coverImage">
<div class="col-md-7 col-lg-6 fr xs-fl">
<div class="frm-content axaborderBlue mt10">
<div class="pl25 pt15 pr15 pb10">
<p class="large-heading">Enter some basic information to get started</p>
<div class="row ">
<div class="row pl15">
<div class="col-sm-4 r xs-l mb5 f14">Application Taken: *</div>
<div class="col-sm-8 mb5">
<div class="groupBox">
<span class="dib f14 ">
<input id="ApplicationTaken" name="ApplicationTaken" tabindex="1" type="radio" value="ApplicationInPerson" /><span class="dib mr10 ">In Person</span>
</span>
<span class="dib f14 ">
<input id="ApplicationTaken" name="ApplicationTaken" tabindex="2" type="radio" value="ApplicationByPhone" /><span class="dib mr10 ">By Phone</span>
</span>
</div>
I want to select the radio button with name "ApplicationTaken" and value "ApplicationInPerson"
I've tried several different ways including:
When I click on the radio with name
"([^"]*)" and value "([^"]*)"$/ do |myName, myValue|
choose("#{myName}", :option => "#{myValue}")
end
and
When I click on the radio with name
"([^"]*)" and value "([^"]*)"$/ do |myName, myValue|
find(:xpath, "//input[#value='#{ myValue }']", match: :first).set(true)
end
I keep seeing the following error:
"Unable to find radio button "ApplicationTaken" with value "ApplicationInPerson".
I've also tried by ID, no luck. I CAN select a button on this page and fill in text fields, I just can't select radio buttons or drop downs. Thanks
Since you're using capybara try:
choose('Visible Text')
See:
https://gist.github.com/zhengjia/428105
For starters, you have two radio buttons with the same id. This is bad - you should not have duplicate ids on a page. Attempting to find an element by ID when there are duplicates is very unpredictable.
What's most likely happening is that it's finding the first element with a matching ID, and then checking the value attribute. When that doesnt match, it says the element could not be found, because it does not continue onto the next matching ID (because of the way id selectors work internally)
I see you're also using xpath to find the element. You generally should be using CSS instead of xpath for finding your elements.
So leaving the ID out, and using CSS instead, find('input[name=ApplicationTaken][value= ApplicationInPerson]') should get you the element you're looking for.

text fade on input field, where is this being configured

i have this website im building, my client is using a template and the template has contact forms, now i cant seem to understand how to get the text fade on click for input fields to work on any additional fields i make on top of what was there on the template.
http://daniloportal.com/NPC2/contact.html
on that page take a look at the form, the values with *'s disappear but the clone EMAIL input i made doesnt cause i took the * off the value.
Ive been going crazy trying to figure out where this is being configured on the page, If any inspect elementors can take a look and let me know i would greatly appreciate it!
this is the code snip
<form id="ajax-contact-form" action="">
<input type="text" name="name" value="Name *" title="Name *" />
<input type="text" name="email" value="Email *" title="Email *" />
<input type="text" name="email" value="Email " title="Email *" />
<textarea name="message" id="message" title="Message *">Message *</textarea>
<div class="clear"></div>
<input type="reset" class="btn btn_clear" value="Clear form" />
<input type="submit" class="btn btn_blue btn_send" value="Send message!" />
<div class="clear"></div>
</form>
Search your code to find what makes the input's value disappear. E.g., look for behavior that clears the value of form fields (either element.value = '' if using plain javascript, or element.val('') if using jquery).
Then you can see what is the condition to clearing it. In your case, seems that the condition is that the input's value is equal to it's "title" attribute (you can edit both using "Inspect Element" in Chrome).