I have one text file with select dropdown as follows:
<aui:field-wrapper cssClass="with-select">
<aui:input type="text" name="productionCapacityParYear"
label="production.capacity.par.year" inlineLabel="true">
<aui:validator name="required"></aui:validator>
<aui:validator name="number"></aui:validator>
</aui:input>
<aui:select name="productionCapacityParYearUnit" label=""
inlineLabel="true">
<aui:option label="production.units" value="" selected="true"></aui:option>
<aui:option label="selection.ex" value="1"></aui:option>
</aui:select>
</aui:field-wrapper>
But this select field comes in new line, but I want it in same line as the input. How can I do this?
Thanks in advance
Related
I am trying to automate login to a website (http://www.primecbdatabase.com/). It's source code is as follows
<p><label for="username">User ID</label> <input type="text" name="user_id" value="" onchange="javascript:replcodeid()"; size="6" maxlength="50"></p>
<p><label for="Password">Password</label><input type="password" name="password" id="password" value="" size="6" onkeypress="return SplChar1(event);" onchange="javascript:replcodepwd()" maxlength="16" ></p>
<p class="btn" style="margin-bottom:0;"><a onmouseover="self.status='PRIME Database';return true" href="javascript:submit1()"><img src="images_NSE/login-btn1.png"></a></p>
<p class="password">Forgot Password?</p>
It works correctly when dealing with the username input as shown below
inputElement = driver.find_element_by_name('user_id')
inputElement.send_keys(username)
But when I am trying to do the same for password (as shown below) it throws the ElementNotInteractableException. Looks like I am having trouble with send_keys to transfer the password to the input box.
inputElement = driver.find_element_by_name('password')
inputElement.send_keys(password)
I tried changing find_element_by_name to find_element_by_id, it still doesn't work. Kindly help me with it.
You need to click on the textbox before type.
driver.find_element_by_id("password").click()
driver.find_element_by_id("password").send_keys("123")
I have tried and am able to type a password using a script.
Using Ignite UI for Angular Data Grid and I want to make an editor for the name of a column. However, the grid control seems to disable any input controls I put into the header template.
How can I enable input controls in the header template for my grid?
The code below creates a grid with an input control in the header. The input control cannot be clicked or the value edited.
<ng-template igx-header #editColumnMapping let-column>
<input type="text" name="textInput" [value]="column.header" />
</ng-template>
<igx-grid #grid2 [data]="[[1], [2], [3], [4]]">
<igx-column header="Values" [headerTemplate]="editColumnMapping" field="0"></igx-column>
</igx-grid>
Your code looks correct. I have created a sample for you in StackBlitz
<igx-grid #grid1 [data]="data">
<igx-column header="Rank" field="Id" [headerTemplate]="hTemplate"></igx-column>
<igx-column header="Athlete" field="Name" [headerTemplate]="hTemplate"></igx-column>
...
<ng-template #hTemplate let-column>
<div (click)="fieldInput.focus()">
<span >{{column.header}}</span>
<br />
<input #fieldInput [(ngModel)]="column.header" style="width: 100%">
</div>
</ng-template>
The sample is working with both the latest 9.0.0-beta.6 and 8.2.13
The bottom line for text-field is shown a bit above.
No CSS used ...
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="phone">
<label class="mdl-textfield__label" for="phone">Phone</label>
<span class="mdl-textfield__error">Digits only</span>
</div>
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="demo-input" />
<label class="mdl-textfield__label" for="demo-input">UserName...</label>
</div>
</form>
Take a look at what I got
Take a look at the answer which i posted for the below stackoverflow thread.
Material Design Lite - Bottom Line in text field has a slight gap with colored line
Using primefaces 5.1, i'm testing my app with WCAG validator and the following code is breaking a guideline:
<p:outputLabel for="selectHowMuch" value="Do you feel edgy lately ?" />
<p:selectOneMenu id="selectHowMuch" value="Yes">
<f:selectItem itemLabel="Argggg" itemValue="3" />
<f:selectItem itemLabel="Yes" itemValue="2" />
<f:selectItem itemLabel="hmmm" itemValue="1" />
<f:selectItem itemLabel="NO!" itemValue="0" />
</p:selectOneMenu>
the broken guideline is
Success Criteria 1.3.1 Info and Relationships (A) Check 91: select
element missing an associated label.
Repair: Add a label element that surrounds the control's label. Set
the for attribute on the label element to the same value as the id
attribute of the control. And/or add a title attribute to the input
element. And/or create a label element that contains the input
element.
Error Line 1, Column 16711:
<select id="_testapp_WAR_testapp001SNAPSHOT_:j_idt3:selectHowMuch_input"
Note that the p:outputLabel actually did help (if i remove it, i get more errors), but it looks like it's not covering the <select> _input label
I also noticed that the same happens for other select components.
Any ideas to get around this ?
Edit: here's my generated code:
<label id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:j_idt62" class="ui-outputlabel ui-widget"
for="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_focus">Do you feel edgy lately ?</label>
<div id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all">
<div class="ui-helper-hidden-accessible">
<input
id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_focus"
name="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_focus"
type="text" autocomplete="off" />
</div>
<div class="ui-helper-hidden-accessible">
<select
id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_input"
name="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_input"
tabindex="-1"><option value="3">Argggg</option>
<option value="2">Yes</option>
<option value="1">hmmm</option>
<option value="0">NO!</option></select>
</div>
<label
id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_label"
class="ui-selectonemenu-label ui-inputfield ui-corner-all"> </label>
<div
class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
<span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
</div>
<div
id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_panel"
class="ui-selectonemenu-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow">
<div class="ui-selectonemenu-items-wrapper"
style="height: auto">
<ul
class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset">
<li
class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all"
data-label="Argggg">Argggg</li>
<li
class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all"
data-label="Yes">Yes</li>
<li
class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all"
data-label="hmmm">hmmm</li>
<li
class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all"
data-label="NO!">NO!</li>
</ul>
</div>
</div>
</div>
<script id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_s"
type="text/javascript">$(function(){PrimeFaces.cw("SelectOneMenu","widget__tutorial_WAR_tutorial001SNAPSHOT__j_idt3_selectHowMuch",{id:"_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch",widgetVar:"widget__tutorial_WAR_tutorial001SNAPSHOT__j_idt3_selectHowMuch"})});</script>
Sorry, i have to contrast with the last answer...
In your example, this select does not have an associated label
<select
id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_input"
name="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_input"
tabindex="-1"><option value="3">Argggg</option>
<option value="2">Yes</option>
<option value="1">hmmm</option>
<option value="0">NO!</option></select>
There is one label after it who might have been thought for it, but it does not have a for attribute and does not contain the select tag.
<label
id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_label"
class="ui-selectonemenu-label ui-inputfield ui-corner-all"> </label>
As I understand, both the input and the select are generated for this one field and only one label is correctly associated with the input. This looks like a bug in primefaces, and you should ask their staff to make some corrections...
Also there would be more correction to do, because the first label should be associated with the select element, and the input element be invisible to screenreaders if I correctly understand.
There is nothing wrong with your markup per se. It conforms to one of the accepted techniques.
http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/H44#H44-ex1
Although that example shows use with an <input> element, it is equally valid with a <select> element.
This looks like a bug in your validator. I suggest trying FireEyes http://www.deque.com/products/fireeyes/fireeyes-installation/
In PHPStorm, when creating a snippet, you can do something like this:
<!-- $VALUE$ Form Input -->
<div class="form-group">
<input type="text" name="$NAME$" class="form-control">
</div>
With variables and such, so you can easily write a value. I'm wondering how to do the same thing with Sublime Text 3. This is what I have in my CDATA tag:
<!-- $VALUE Form Input -->
<div class="form-group">
<input type="text" name="$NAME" class="form-control">
</div>
However, it's not working.
Unfortunately, the only variables that are available in snippets are specified in the docs under snippets environment-variables, as well as any you declare in a .tmPreferences metadata file, or in a .sublime-options file. However, you can have predefined values in snippets. For example, this snippet:
<snippet>
<content><![CDATA[<!-- ${1:VALUE} Form Input -->
<div class="form-group">
<input type="text" name="${2:NAME}" class="form-control">
</div>$0]]></content>
<tabTrigger>form_group</tabTrigger>
<scope>text.html</scope>
</snippet>
gives this result when triggered:
You can then hit Tab and the focus will move from field 1 to field 2:
and again to move to the exit point $0: