How to change autocompleter widget size - struts2-jquery-plugin

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>.

Related

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.

What is the Twitter Bootstrap convention for adding a new style to form labels?

I want to create a new style for forms in my Twitter Bootstrap site and I want to keep with the SMACKS / OOCSS conventions.
This is the default form:
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<!-- More coontent in form here -->
If I want to override the input style it would seem to me to keep with conventions to add a class of form-control-newstyle:
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<!-- More coontent in form here -->
However I also want to style the label. Should I add a new style to the label or to the div.form-group?
.form-group wraps around form groups label and an input, it acts like a .row in a .form-horizontal and otherwise, when the form stacks on smaller viewports there's some vertical space so it all doesn't squish together.
The default label style that goes on all labels is:
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
To do
.form-group label {}
Would affect all labels if you've properly formatted your forms.
If you just want to isolate it to a specific label you can make a class for that label and assign a class to just that label. If you want to affect all labels you can just modify the label element.
You can also make a new parent class for anything wrapping around that form and address the label styling like that.

<p> text bleeding out of .input-group .form-control container but not in jsFiddle

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.

Need unique field to identify using Selenium WebDriver

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"));

Pls how to access message in span tag

<html>
<body>
<section id="click" class="content mCustomScrollbar _mCS_1">
<div id="mCSB_1" class="mCustomScrollBox mCS-dark" style="position:relative; height:100%; overflow:hidden; max-width:100%;">
<div class="mCSB_container" style="position:relative; top:0;">
<form id="registration" action="http://abcd.com/setup/user-registration/index" method="post" name="registration">
<article class="frm-content">
<div class="leftsection">
<div class="form-element">
<fieldset>
<label>
<input id="firstname" type="text" maxlength="50" value="" name="firstname" style="border: 1px solid red;">
<label>
<span class="required">*</span>
First Name:
</label>
<input id="firstname" type="text" maxlength="50" value="" name="firstname" style="border: 1px solid red;">
<span id="error_firstname" class="errormsg" role="alert">Please use only letters,numbers, period, single space and underscore</span>
</fieldset>
</article>
</div>
</section>
</body>
</html>
I Above code I want to find Please use only letters,numbers, period, single space and underscore message. The xpath for that is /html/body/section[2]/div/div/form/article/div/div/span but it is not accessing by gettext() method. Pls how to access this ????
getText() method fetches only visible (i.e. not hidden by CSS) innerText of respective element. Which might be a cause for the problem.
Please try the following to check if element is displayed.
Driver.FindElement(By.id("error_firstname")).isDisplayed();
You can add WebDriverwait till that element is displayed and then fetch the text from that element.
WebDriverWait Driver_Wait=new WebDriverWait(Driver, 10); //10 denotes Total_Secs to wait
Driver_Wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("error_firstname")));
Hope this helps.
By using the id "error_firstname" we can only get the values in span which has id as error_firstname..
So use the id "click" which serves the best