In a gsp page, the default way of shifting focus in fields is vertical. like i have 10 textboxes, 5 in a column, in my create.gsp page and my focus is on first textbox, then by pressing tab, focus shifts vertically down to the next textbox. My requirement is to shift focus horizontally from left to right, row by row. can anyone help me how to do this. thnks
You can control this with the tabindex attribute. In the example below the focus moves from f1 to f3 to f2 according to the ascending order of the tabindex.
<input type="text" name="f1" tabindex="1" />
<input type="text" name="f2" tabindex="3" />
<input type="text" name="f3" tabindex="2" />
Related
in my rspec feature I try to check a checkbox with it related label because the input is hidden. My label contains link (<a> tag), so every time I use check('user[agree_terms]', allow_label_click: true) it never checks the box but instead open the link contains in the label.
Here's my view generated from ERB
<p class="col boolean required user_agree_terms">
<input name="user[agree_terms]" type="hidden" value="0">
<input class="boolean required" required="required" aria-required="true" type="checkbox" value="1" name="user[agree_terms]" id="user_agree_terms">
<label class="boolean required" for="user_agree_terms">
<abbr title="required">*</abbr>
J'ai accepté les <a target="_blank" href="https://somelink">Conditions Générales d'Utilisation</a> et la <a target="_blank" href="https://somelink">Politique de Confidentialité</a>
</label>
</p>
Here's my spec
# I tried both but its behave the same way : open the <a> tag
find('label[for="influencer_agree_terms"]').click
check('influencer[agree_terms]', allow_label_click: true)
Do you know another way to check that box ?
By the way the UI on browser work correctly when I click the label.
When you tell Capybara to click on an element it clicks in the middle of that element which in this case is where you have the conditions link, so that takes the click before the label element. One option would be to specifically click on the abbr element, which is in the label but away from the link
find('label[for="influencer_agree_terms"] abbr').click
Another option would be to take advantage of the fact that allow_label_click supports specifying offsets for the click location
check('influencer[agree_terms]', allow_label_click: { x: 10, y: 10 })
Depending on the setting of Capybara.w3c_click_offset that offset could be from the center or from the top left corner of the label element so adjust the values as necessary. Technically you can do the same thing when calling click
find('label[for="influencer_agree_terms"]').click(x: 10, y: 10)
but it's generally better to use check when dealing with a checkbox
By default capybara #click method will click in the middle of the element, right where my link is located.
Fortunately #click has offset option as follow #click(x: 0, y: 0).
So to check a box with the help of its label containing link :
find('label[for="influencer_agree_terms"]').click(x: 0, y: 0)
I want to handle slider with hidden check box for scripts using watir.
Can any one help me to resolve this issue?
This would be more like visibility: hidden
Try setting the checkbox's opacity to 0. If you want the checkbox to be out of flow try position:absolute and offset the checkbox by a large number.
HTML
<label class="checkbox"><input type="checkbox" value="valueofcheckbox" checked="checked" style="opacity:0; position:absolute; left:9999px;">Option Text</label>
How many checkboxes do you have at this page? If there is only one then this might work:
browser.checkbox(attribute: attribute-value).when_present.set
I am noticing that jQuery datepicker is neither activating the current element nor the next element in the tab index after tabbing into a field spawns a datepicker instance and the mouse is used to click on a day.
<input type="text" id="no1" />
<input type="text" id="no2" />
<input type="text" id="no3" />
$('#no2').datepicker();
$('#no1').focus();
If you check out http://jsfiddle.net/DgkJZ/1/
and tab to the second field, click a date, you'll see what I mean about the tab focus going nowhere. Is there some way around this that doesn't involve editing jQuery UI source?
Try to catch the onSelect and set focus accordingly
$('#no2').datepicker( {
onSelect: function() {
$('#no3').focus();
}
);
I need to group checkbox together but in 2 columns. In the image below ive created 2 different fieldsets. I know this isnt very semantic but it displays the layout I want to achieve.
Is there a standard jQuery Mobile way to do this?
I want the checkboxes to look like they belong in one section. I could remove the rounded corder of green top left, pink bottom left and blue bottom right. Do I need to use standard CSS overrides for this or is there a more elegant way? Thanks
I think you want to look at Layout Grids: http://jquerymobile.com/test/docs/content/content-grids.html
<div class="ui-grid-a">
<div class="ui-block-a">
<label><input type="checkbox" name="checkbox-1" /> Any</label>
<label><input type="checkbox" name="checkbox-1" /> Red </label>
</div>
<div class="ui-block-b">
<label><input type="checkbox" name="checkbox-1" /> Green </label>
<label><input type="checkbox" name="checkbox-1" /> Black </label>
</div>
</div><!-- /grid-a -->
UPDATE
Based on your comment, no you cannot have two separate columns grouped into one fieldset.
The data-role="controlgroup" on a fieldset removes the margins and padding to give the grouped effect, but what you end up with is something like this: http://jsfiddle.net/shanabus/qNYPh/1/
However, if you are ok with one parent fieldset and two nested, grouped, fieldsets... then you can end up with a solution like this: http://jsfiddle.net/shanabus/hcyfK/1/
shanabus gave a good answer with his nested grouped solution:
http://jsfiddle.net/shanabus/hcyfK/1/
You can take that one step further by setting/overriding the appropriate css 'border radius' values to zero for any corner you need to in order to get rid of the touching rounded corners and achieve a more consistent appearance.
As per the example:
<label for="radio-choice-1" style="border-top-right-radius: 0">Cat</label>
<label for="radio-choice-2" style="border-bottom-right-radius: 0">Dog</label>
<label for="radio-choice-3" style="border-top-left-radius: 0">Hamster</label>
<label for="radio-choice-4" style="border-bottom-left-radius: 0">Lizard</label>
Yes, I am a bad person because I didn't separate html & css but it's an example. :-)
I need to modify the radio buttons. how can i show text left side and icon right side for Arabic text?
Just render a radiobutton like you want it:
<input type="radio" name="something"/>
<label>Radio Right</label>
or
<label>Radio Left</label>
<input type="radio" name="something2"/>