I have a strange situation here. The following Bootstrap3 based code looks fine in jsFiddle, but not when running anywhere else. As you can see from the links provided, the p text bleeds out of it's tag on my server, but looks fine in jsFiddle (both using bootstrap3).
Any idea what could be causing this? Thanks.
The code:
<form action="">
<div class="row"><div class="col-sm-12">
<h4>Step 1:</h4>
</div></div>
<div class="row"><div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<p class="form-control">Long description text text text text text text text text text text text text text text text...</p>
</div>
</div>
</div></div>
</form>
Here it is on my server: http://leke.ydns.eu/ac2/
...and on jsFiddle: http://jsfiddle.net/n2fole00/6JyFr/4/
Edit:
Here is a screenshot:
So it seemed bootstrap was setting the .form-control to 34px. I just over wrote the class like so
.form-control {
height: auto;
}
...and that took care of that.
Related
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.
I need to find the the unique field to identify the search box and enter text in it.
<style type="text/css">
</head>
<body style="min-height: 81px;">
<div class="shared-page" data-cid="view221" data-view="views/shared/Page" data-render-time="0.02">
<a class="navSkip" tabindex="1" href="#navSkip">Screen reader users, click here to skip the navigation bar</a>
<header role="banner">
<a id="navSkip"></a>
<div class="main-section-body" role="main">
<div class="timeline" data-cid="view4947" data-view="views/timeline/Master" data-render-time="0.107">
<div class="section-padded section-header">
<div class="timeline-title" data-cid="view5085" data-view="views/timeline/Title" data-render-time="0.001">
<div class="search-bar-wrapper shared-searchbar" data-cid="view4948" data-view="views/shared/searchbar/Master" data-render-time="0.104">
<form class="search-form" action="" method="get">
<table class="search-bar search-bar-primary">
<tbody>
<tr>
<td class="search-input" width="100%">
<div id="search" class="shared-searchbar-input" data-cid="view4949" data-view="views/shared/searchbar/Input" data-render-time="0.002">
<div class="search-field-background"> </div>
<div class="search-field-wrapper">
<label class="placeholder-text" for="397271.5897375417" style="display: block;">enter search here...</label>
<textarea id="397271.5897375417" class="search-field" autocapitalize="off" autocorrect="off" spellcheck="false" name="q" rows="1"></textarea>
textarea is the field related to the search box. I tried using class, name but it says unable to locate element, the numeric id too is dynamic. Please let me know what to use in this case.
It should be possible to find this element by class name
in ruby:
driver.find_element(:class, "search-field")
or in java:
driver.findElement(By.className("search-field"));
Following xpath should work:
//div[#id='search']//textarea[#class='search-field']
If the <textarea> is only one, you can search with
driver.findElement(By.tagName("textarea"));
Use xpath,
driver.findElement(By.xpath("//textarea[#class='search-field']"));
Or
driver.findElement(By.name("q"));
I have some html like this:
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="input-group">
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
<span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" id="File" name="..."></span>
Remove
</div>
</div>
When the form has been submitted I want to clear the file from the input, but I don't know how to do it.
Jansy says I can do it by calling .fileinput("clear") but that doesn't work.
Has anyone done this before?
If so, how do I clear it?
Cheers
It was being a n00b :)
I was using
$("input[type=file]").fileinput("clear")
but I should have been using
$(".fileinput").fileinput("clear");
I tried the code from the project to change the size of the select box:
<strong>Result Div :</strong>
<div id="formResult" class="result ui-widget-content ui-corner-all">Submit form bellow.</div>
<strong>Topics Div :</strong>
<div id="topics" class="result ui-widget-content ui-corner-all"></div>
<s:form id="form" action="echo" theme="simple" cssClass="yform">
<fieldset>
<legend>Select Box as Autocompleter</legend>
<div class="type-select">
<label for="echo">Echo: </label>
<sj:autocompleter
id="customers"
name="echo"
list="%{customers}"
listValue="name"
listKey="id"
selectBox="true"
selectBoxIcon="true"
onChangeTopics="autocompleteChange"
onFocusTopics="autocompleteFocus"
onSelectTopics="autocompleteSelect"
cssStyle="width:100%;"
/>
</div>
<div>
<sj:submit
targets="formResult"
value="AJAX Submit"
indicator="indicator"
button="true"
/>
<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>
</div>
</fieldset>
</s:form>
<br/>
but it doesn't work. I don't know what is the problem with this code.
Looking at generated HTML neither cssStyle nor cssClass of <sj:autocompleter> tag is set to actual input field. But you can use plain CSS to style this input field. Put your <sj:autocompleter> inside of some element to change only specific input then you can use something like that:
.type-select .s2j-combobox-input {
width: 100%;
}
Where type-select is class of wrapper element and s2j-combobox-input is the class of generated input field for the <sj:autocompleter>.
I have problem with getting Element by Xpath. I use Spock with Geb.
I have HTML:
<form class="form" style="display: block;">
<div class="crm-field">
<div class="req label">
<span class="required">*</span>
Моё Имя:
</div>
<div class="value">
<input class="signup" type="text" style="background-color: rgb(255, 255, 255);">
</div>
</div>
<div class="crm-field">
<div class="req label">
<span class="required">*</span>
Login:
</div>
<div class="value">
<input class="signup" type="text" style="background-color: rgb(255, 255, 255);">
</div>
</div>
<div class="crm-field">
<div class="req label">
<span class="required">*</span>
Мой E-mail:
</div>
<div class="value">
<input class="signup" type="text" style="background-color: rgb(255, 255, 255);">
</div>
</div>
<div class="crm-field">
<div class="req label">
<span class="required">*</span>
Пароль:
</div>
<div class="value">
<input class="signup" type="text" style="background-color: rgb(255, 255, 255);">
</div>
</div>
I need get <input class="signup" type="text" style="background-color: rgb(255, 255, 255);"> for write string. But Geb use only CSS search.
Please help my get all input and how i can write text to input.
I use for getting element:
driver.findElement(By.xpath("//html/body/div[3]/div[2]/form/div[2]/div[2]/input")) << arg
But I did not get.
Geb doesn't support XPath expressions but you can still get the elements you need using Geb's indexed css selectors. Please note that those indexes are 0 based in contrary to XPath's 1 based indexes. For example:
$('form.form > div', 1).find('input')
EDIT
Actually, Geb now supports XPath expressions. Bear in mind that it has not yet been released and is only available in the latest snapshot, 0.10.1-SNAPHOT.
You haven't made clear which one you need, since they are all similar. However, in cases like this, work in a slightly different way than positional XPath.
That means, get something that close to what you need, and move about the DOM around that.
For instance, if you need the input need the Email label (presumably to type in the Email). You would first get the Email label (it's near what you need):
//div[contains(text(), 'Email')]
You'd then get the div next door to this, that is, the div directly after this one, making this query:
//div[contains(text(), 'Email')]/following-sibling:div
You've then be able to say, well I want the input inside this div, so it becomes:
//div[contains(text(), 'Email')]/following-sibling:div/input[#type='text']
You then have uniquely identified the input element, where you can enter in the Email.