I read How can I get two form fields side-by-side, with each field’s label above the field, in CSS? which seems to be close to what I need. Unfortunately, I am too new to this to understand most of it. My page used to work with tables, but somehow it got changed and mow it is based in form.
I can only center the labels with position:absolute but that seems to not work in smaller screens. Besides I wanted to use overflow:auto and with the fixed labels it does not make sense when you scroll down the page. The autoflow is not so important, as the ability to keep things in place in smaller screens.
Any ideas that could help, please?
This is the page: http://pintotours.net/coding/form.php
An example for current code:
> <form method="post" action="./database.php">
> <DIV style="position: absolute; left:590px; width:40px; height:25px">Username</DIV> <DIV style="position: absolute;
> right:545px; width:150px; height:25px">Repeat username</DIV> <br>
>
> <center> <p><label for="Username"> </label><input type="text"
> name="username" />
> <label for="Repeat Username"></label><input type="text" name="repeat-username" /></p>
>
> <DIV style="position: absolute; left:590px; width:40px;
> height:25px">Password</DIV> <DIV style="position: absolute;
> right:557px; width:150px; height:25px">Repeat password</DIV> <br>
>
> <p><label for="Password"> </label><input type="text" name="password" />
> <label for="Repeat Password"></label><input type="text" name="repeat-password" /></p><br>
>
>
> </center>
Use tables for simple and speedy form design else use div with css property 'float:left'. Don't use 'absolute' and 'left' 'right' css properties. Check some other websites learn how they designed forms.
Related
I have a problem that I am not finding a solution.
I decided to put clockpicker in position fixed:
.popover.clockpicker-popover{
position:fixed;
padding-top:80px;
}
With this setting, I dont't know why, I have to click 2 time on my input to make clockpicker visibile. I know that there could be problem with z-index but it seems like if I change the z-index from the console of the input-wrap in the first try works but then it stops and the previous behaviour come back.
This is my input field:
<div class=" select eff01 col-50" style="position:relative">
<label>*Orario</label>
<div class="input-wrap" style="border: 1px solid rgb(187, 187, 187);">
<input class="form-control required time" id="TrainManuallyDepartureTime" autocomplete="off" readonly="readonly" type="text">
</div>
</div>
Do you have any suggestions?
I am trying to find all elements by using find_element_by_xpath. In the below web elements, I am looking for these three elements separetely:
1. <label for="hw-log-mode-none" class="ng-binding">None</label>
2. <label for="hw-log-mode-session" class="ng-binding">Per-Session</label>
3. <label for="hw-log-mode-mapping" class="ng-binding">Per-Mapping</label>
<div class="field ng-scope" ng-if="!isTransparentMode && showNatPool && !policy.isIPv6" ng-show="policy.action == 'accept' && policy.nat == 'enable'">
<label class="ng-binding">Hardware Logging Mode</label>
<div>
<div class="radio-group">
<input type="radio" id="hw-log-mode-none" value="none" ng-model="policy['hw-logging-mode']" class="ng-pristine ng-untouched ng-valid" name="670">
<label for="hw-log-mode-none" class="ng-binding">None</label>
<input type="radio" id="hw-log-mode-session" value="session" ng-model="policy['hw-logging-mode']" class="ng-valid ng-dirty ng-touched" name="671" style="">
<label for="hw-log-mode-session" class="ng-binding">Per-Session</label>
<input type="radio" id="hw-log-mode-mapping" value="mapping" ng-model="policy['hw-logging-mode']" class="ng-valid ng-dirty ng-touched ng-valid-parse" name="672" style="">
<label for="hw-log-mode-mapping" class="ng-binding">Per-Mapping</label>
</div>
</div>
</div>
I can find element #1 and #2 in above list. But when I try to find element #3 using the same way:
elem = driver.find_element_by_xpath("//label[#for='hw-log-mode-mapping']")
I got this error:
Message: element click intercepted: Element ... is not
clickable at point (707, 508). Other element would receive the click:
... (Session info: chrome=77.0.3865.90)
You could try clicking the element using Javascript and see if that works around the error.
elem = driver.find_element_by_xpath("//label[#for='hw-log-mode-mapping']")
driver.execute_script("arguments[0].click();", elem)
If that doesn't work, you could try clicking the input element itself.
elem = driver.find_element_by_xpath("//input[#id='hw-log-mode-mapping']")
driver.execute_script("arguments[0].click();", elem)
Try this, Get list of all the elements as they have same class name as follow:
List<WebElement> elements = driver.findElements(By.xpath(".//label[#class='ng-binding']"));
Now create a method to select the radio options as follow:
public void selectRadioOption(String option){
if(option.equals("None"))
elements.get(0).click();
else if(option.equals("Per-Session"))
elements.get(1).click();
else if(option.equals("Per-Mapping"))
elements.get(2).click();
}
Call this method, pass the option whichever you want to select.
Hope it works for you. You should not find 3 different xpath if you can work with one.
I'm new to flexbox and it seems really complex compared to bootstrap. I have a splash screen where I am required to vertically and horizontally center a content:
<div layout="row" layout-align="center center">
<div layout="row" layout-wrap>
<div flex="30">
<img ng-src="images/logo.png" src="//:0" alt="example.com" title="Example" />
</div>
<div flex="45">
<h2 class="title">example.com</h2>
</div>
<div flex="25">
<h1 class="bang">Bang!</h1>
</div>
</div>
</div>
however it doesn't center till I add a height to it:
style="height:500px"
Why does it behave this way? Is my code wrong? This doesn't seem like the right way of doing it.
Also with the items in my second row with the layout-wrap the last div with flex=25 overlaps the second div with flex=45.
Basically what I want to do this vertically and horizontally center a div and be able to split that div into as many columns as I like while maintaining a responsive width that adjusts depending on screen size.
Maybe this can point you in the right direction - CodePen
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="row" layout-xs="column" layout-align="center center">
<div flex="30">
<img ng-src="images/logo.png" src="//:0" alt="example.com" title="Example" />
</div>
<div flex="45">
<h2 class="title">example.com</h2>
</div>
<div flex="25">
<h1 class="bang">Bang!</h1>
</div>
</div>
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/
<div style="display:inline;">
<textarea rows="10" cols="50"></textarea><br />
<div style="float:right;">remaining characters: 300</div>
It is not working in either firefox or IE. The text remaining characters is not within the "inline" bounds instead goes 100% out of the containing div.
what is the best way of accomplish something like this where text is aligned right in parent div with textarea before that?
Try this.
<div style="display:inline; text-align:right; float:left;">
<textarea cols="50" rows="10"></textarea><br />
remaining characters: 300
</div>