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)
Related
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 using jQuery Mobile. I am attempting to allow the user to change a slider value in two ways. A number, or a percentage. For example, let's say that the total of a metric is $224. So 50% is $112. Well, I want the user to be able to specify $100 manually, OR specify 50% manually.
With this said, I placed a numeric text box and a slider next to each other. The numeric text box appears larger and different from the slider's text box. One thing to note - I have removed the up/down buttons via CSS.
Try as I might, I cannot get these to display the same way. Does anyone know what classes are needed for this? Changes done on pageinit()?
To put elements side by side, use ui-grid layout. For two items, add class ui-grid-a to a div. Then wrap first with div with class ui-block-a and the other one class ui-block-b.
Demo
<form>
<div class="ui-grid-a">
<div class="ui-block-a">
<label for="numbers"></label>
<input type="number" name="numbers" id="number" />
</div>
<div class="ui-block-b">
<label for="slider-6" class="ui-hidden-accessible">Slider:</label>
<input type="range" name="slider-6" id="slider-6" min="0" max="100" value="50" />
</div>
</div>
Optional - Override width of child divs.
.ui-block-a { width: 30% !important; padding-right: 10px !important }
.ui-block-b { width: 70% !important }
For input, you need to adjust input's parent div's height by either jQuery or CSS.
Note: Slider has type=number attribute as well, therefore, you need to override the input box only which has class ui-input-text.
CSS
div.ui-input-text { height: 28px !important }
jQuery
$('[type=number]').closest('div.ui-input-text').css('height', '28px');
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" />
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"/>