This code:
<td>
<label>
<input type="checkbox">
</label>
</td>
yields this: , which is wide. I want only the check-box square part, like the check-boxes in this demo. Writing only <td><input type="checkbox"></td> creates simple check-box (not JQM style), since it's inside a table.
Does somebody has simple solution ?
first of all you will not be able to customize the by default developed HTML control. what I meant is just taking out the square portion from check box.
The link you share is doing it with the help of css classes and images.
Initially.
<label class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-checkbox-on
ui-btn-up-c" data-theme="c" for="selectRow-2">
<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
<span class="ui-btn-text">
</span>
<span class="ui-icon ui-icon-shadow ui-icon-checkbox-on">
</span>
</span>
</label>
Later on when you click the square with help of java-script they have just swapped classes.
<label class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-checkbox-off ui-btn-up-d"
data-theme="d" for="selectRow-1">
<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
<span class="ui-btn-text">
</span>
<span class="ui-icon ui-icon-shadow ui-icon-checkbox-off">
</span>
</span>
</label>
The easiest way would be using some thing similar in your layout and swapping the classes with JS.
Related
I have a drop down menu. I want capybara to go through it and find the specific element and click on it. I'm currently trying to do a within clause and having it iterate through the list and find this element: "Cow_poop"
<div class="ant-select-selection ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="7256666c-da5f-48d6-c8fc-a249a4ed0fc9" aria-expanded="false" tabindex="0">
<div class="ant-select-selection__rendered">
<div class="ant-select-selection-selected-value" title="cow_poop" style="display: block; opacity: 1;">cow_poop</div>
<div class="ant-select-search ant-select-search--inline" style="display: none;">
<div class="ant-select-search__field__wrap">
<input autocomplete="off" class="ant-select-search__field" value="">
<span class="ant-select-search__field__mirror"> </span>
</div>
</div>
</div>
<span class="ant-select-arrow" unselectable="on" style="user-select: none;">
<i aria-label="icon: down" class="anticon anticon-down ant-select-arrow-icon">
<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
</svg>
</i>
</span>
</div>
So in this html tag. I have a dropdown menu and I'm trying to select the value cow_poop. The way I'm currently doing it is this way.
within('ant-select-selection') do
find('cow_poop').click
end
The problem with this method is that it's not working.
. is missing before the class name, it should be
within('.ant-select-selection')
You can also use:
within('.ant-select-selection') do
find('div.ant-select-selection-selected-value', text: 'cow_poop').click
end
Alternative
find (:xpath, "//div[text()='cow_poop']").click
because of different configurations I have to write the same autocomplete twice. The only difference is that one uses md-floating-label and the other placeholder. Is there a way to implement only one autocomplete, which decides to use the one or the other, because of an value?
I tried to implement a custom attribute directive. As result angular could not compile the template and crashed.
The following sample shows my current code:
<md-autocomplete
ng-disabled="ctrl.isDisabled"
md-no-cache="ctrl.noCache"
md-selected-item="ctrl.selectedItem"
md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
md-search-text="ctrl.searchText"
md-selected-item-change="ctrl.selectedItemChange(item)"
md-items="item in ctrl.querySearch(ctrl.searchText)"
md-item-text="item.name"
md-min-length="0"
placeholder="Pick an Angular repository"
md-menu-class="autocomplete-custom-template"
ng-if="!ctrl.showAsLabel">
<md-item-template>
<span class="item-title">
<md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
<span> {{item.name}} </span>
</span>
<span class="item-metadata">
<span class="item-metastat">
<strong>{{item.watchers}}</strong> watchers
</span>
<span class="item-metastat">
<strong>{{item.forks}}</strong> forks
</span>
</span>
</md-item-template>
</md-autocomplete>
<md-autocomplete
ng-disabled="ctrl.isDisabled"
md-no-cache="ctrl.noCache"
md-selected-item="ctrl.selectedItem"
md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
md-search-text="ctrl.searchText"
md-selected-item-change="ctrl.selectedItemChange(item)"
md-items="item in ctrl.querySearch(ctrl.searchText)"
md-item-text="item.name"
md-min-length="0"
md-floating-label="Pick an Angular repository"
md-menu-class="autocomplete-custom-template"
ng-if="ctrl.showAsLabel">
<md-item-template>
<span class="item-title">
<md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
<span> {{item.name}} </span>
</span>
<span class="item-metadata">
<span class="item-metastat">
<strong>{{item.watchers}}</strong> watchers
</span>
<span class="item-metastat">
<strong>{{item.forks}}</strong> forks
</span>
</span>
</md-item-template>
</md-autocomplete>
I need to put an icon next to text field in jquery mobile.
<div data-role="fieldcontain">
<label for="card">Verification Number</label>
<input data-mini="true" type="text" name="card" id="card">
<a href="card.png">
<img src="questionicon.jpg">
</a>
</div>
First of all you have unclosed tags in your html code.
you have to close all the tags for the code working without errors.
the img and input tag are not close.
Here is a working Fiddle Demo for your needs
Have change a little bit your html code:
<div data-role="fieldcontain" id="myfield">
<label for="card">Verification Number</label>
<ul>
<li>
<input type="text" name="card" id="card"/>
</li>
<li>
<a href="#">
<img src="image.jpg" width="20px" height="20px" id="myimage"/>
</a>
</li>
</ul>
</div>
Hi can you please tell me how to hide and show a div in query mobile.
May be i have two solution use hide and show function.
Or use toggle class ?
here is my fiddle.
http://jsfiddle.net/ravi1989/3LEdJ/2/
I need to show or hide on click of "openclosebutton" .This div
<div class="ui-grid-c">
<div class="ui-block-a">
<input name="text-12" id="text-12" value="" type="text" class="textSearchvalue_h">
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-corners="false" data-inline="true" class="searchButtonClickText_h" >Search</a>
</div>
<div class="ui-block-c">
Next
</div>
<div class="ui-block-d">
Previous
</div>
<div class="ui-block-e">
close
</div>
</div>
The probem you have is the width of the text field. I suggest you to use a grid layout to achieve the desired effect:
<div class="ui-grid-c">
<div class="ui-block-a">
<input name="text-12" id="text-12" value="" type="text" class="textSearchvalue_h">
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-corners="false" data-inline="true" class="searchButtonClickText_h" >Search</a>
</div>
<div class="ui-block-c">
Next
</div>
<div class="ui-block-d">
Previous
</div>
</div>
See the documentation here.
On the Themeroller page, the author of jQuery UI shows that there are icons available if you use certain keywords. Example:
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
<span class="ui-icon ui-icon-circle-close">
</span>
</li>
This creates a nice little X in the middle of a circle, framed by a box with rounded corners and a border.
But what if my icons are not in a list? What if they're in a table cell for instance?
<td>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
<span class="ui-icon ui-icon-triangle-1-s"></span>
</li>
</td>
This works, although it's not technically correct, because I don't have an opening and closing < ul> element.
Do I use
<td class="showcities">
<span class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
<span class="ui-icon ui-icon-triangle-1-s">
</span>
</span>
</td>
If so, what should the css be to define the ui-corner-all the same as the Themeroller example?
Instead of span, use <div> here, like this
<td class="showcities">
<div class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
<span class="ui-icon ui-icon-triangle-1-s"></span>
</div>
</td>