I'm facing a problem while optimizing a WebView for mobile devices. It's about making a Search bar visible which is hidden inside a <p> of a nested. However, I'm finding no way to select only the span of the Search bar and its label because the other spans in this <p> are called practically the same. Whenever I try to do something other than hiding / showing the entire paragraph, nothing works.
It looks something like this
<div class="setaction">
<p>
<span class="nowrap>
<span class="labeltext">
<label for="stxt">Search:
</label>
</span>
<input type="text" class="text" size="12" name="stxt" id="stxt" value=""
onchange="this.form.what.value='srch'; this.form.submit();"/>
....
</span>
So this is the Search label and Search bar that I need, what follows is a (kinda unnecessary) button and a few more options that I don't need to display. They are all inside a <span class="nowrap">(there are multiples, one after another) and I'm at a loss about how to only target the few things inside this paragraph that I need.
I would try to select only stxt, however when I try to do it via div.setaction stxt or any variation of it, nothing happens. What am I doing wrong?
Try using attribute selector:
$("[for='stxt']")
Which will give you the label.
If you are trying to select stxt it appears you are selecting a tag <stxt></stxt>. This is obviously not your intent.
Make sure to use # or . before the selector to select an id or class.
If the element you are selecting does not have an id or class, you can select it by an attribute:
[attribute=value] /* selects elements whose attribute match the value */
e.g.
[for="stxt"]
If you are trying to select the input, just use #stxt
If you are trying to select the label, you can either do:
[for="stxt"], label or .setaction label
Let me know if you need any help.
Are you trying to select using jquery or CSS?
If you are trying with css, you need to have the class assigned for label too. Here you are using "for" and Css can not select that.
You can also select it in this way.
div.setaction label
If you are using jquery, you can use "attr".
I can't believe that nobody has said this yet! CSS has a way built in by default for this very situation. You should apply the CSS:
p:first-child{
CSS here
}
to select the first option. More info here and here
Related
I am working on a React App in which it requires working with tables and adding rows dynamically. I used this answer to achieve that: https://stackoverflow.com/a/54455262/13037132. I am trying to label an <input type="file" id={id} /> for styling the whole
in every cell of the table. The id={id} attribute in the input element is for dynamically adding a row when an Add Row button is clicked.
I found some solution for styling this input, but it requires labelling it, needs an id attribute to link to. How can I do that, since the id is already occupied? Is there a way to link this input to a label without using the id but something else? If you want any additional data on this, please let me know.
And I am also looking for a way to add columns too just like I am adding rows using the above-stated answer. Can anyone help?
Use a class instead of id, since multiple id with same value does not help, use a class and access that input by $(this):
$('.class_name').click(function(){
$(this) // this will acquire the clicked/target input
})
I have a array of labels which i used display looping over using ng-repeat. I have a checkbox implemented and a label(inside a span) adjacent to it. I want to check the adjacent checkbox when the user clicks on the corresponding span element.
<bv-checkbox ng-model="i.checked" ng-change="inputChanged()""></bv-checkbox>
<span ng-bind="i.displayName"></span>
I do not have an id in place hence i cant use label "for" property.
Thanks in advance.
Try something like this..It might help you
<div ng-repeat="emp in employees">
<div class="action-checkbox">
<input id={{emp.name}} type=checkbox value="{{emp.name}}" ng-checked="selection.indexOf(emp.name)">
<label for={{emp.name}}></label>{{emp.name}}
</div>
</div>
While there are many ways to make this happen without using <label>, but I think you should use it because it is the standard way of doing it.
To solve the no id issue, you can create an id dynamically by using other fields of the object (e.g. name or index) (mentioned in #Natarajan's answer)
You can also use a <label> to surround both elements if they are adjacent (not recommended).
<label>
<bv-checkbox ng-model="i.checked" ng-change="inputChanged()""></bv-checkbox>
<span ng-bind="i.displayName"></span>
<label>
Although this might create some styling issue that needs to be fixed in CSS.
Why not add an ng-click on the span element to do it?
<bv-checkbox ng-model="i.checked" ng-change="inputChanged()""></bv-checkbox>
<span ng-bind="i.displayName" ng-click="i.checked=true;"></span>
Is there a way to change multiple DIVs backgrounds at the same time using jscolor? Up until now my tests showed me that it only takes one id at a time and ignores the rest. I know there shouldn't be multiple DIVs with same id, for now i'm trying to get it to work temporarily.
<p>Link INPUT elements:
<button class="jscolor
{valueElement:'valueInput', styleElement:'styleInput'}">
Click here to pick a color
</button>
<p>
Value: <input id="valueInput" value="ff6699"><br>
Style: <input id="styleInput">
If you only want to have 2 Div with the same background you could use the onfinechange function that goes with jscolor: here
More than two Div won't work as you cannot give the same ID to multiple Div. You can see more details on why that is here
Otherwise, you might be able to go around it with PHP or javascript by taking the valueInput and giving that value to the style.
Or setting up several onfinechange functions.
Something like background-color: $valueInput
I am playing around with rpsec and watir-webdriver, and am encountering a strange issue where I can click into a button, but I cannot interact with (or change) the text in the span inside. This is what the html looks like:
<button class="pure-button toggle-mode button-link edit-text-button-element" data-reactid=".0.1.0.1.1.0.0.0.0" title="Edit">
<span class="value false" data-reactid=".0.1.0.1.1.0.0.0.0.0">Untitled</span>
</span>
</button>
Right now my ruby code looks like this:
foo = #browser.button(:class, 'pure-button toggle-mode button-link edit-text-button-element')
foo.click
foo.span.set('Hello')
Running this gives me the initial error expected Hash or (:how, 'what'), got ["Hello"]
Any thoughts on what I'm doing wrong here?
Found a solution that works: after clicking to interact with the element, I was able to set text by using send_keys. So I did this:
foo = #browser.button(:class, 'pure-button toggle-mode button-link edit-text-button-element')
foo.click
#browser.send_keys {keystrokes simulated here}
That is because you cannot set text of the span in watir-webdriver. At least so easily. But if you will do for example:
puts foo.span.text
it will work. Here is the full list of what you can do with span: Usefull Link
Of course there is the way to change the text in your span:
browser.execute_script("arguments[0].textContent= 'Hello'", foo.span)
But I cannot imagine the situation when it will be really necessary for the real testing in a real world.
The class locator only accepts a single class.
If you need all of the classes for it to be unique do:
#browser.button(css: ".pure-button.toggle-mode.button-link.edit-text-button-element")
Is there a way to put text in a textbox but also allow the user to type something. I would like to write "username:" inside the box and allow the user to type after the colon. I can do this the hard way by creating a div right next to a textbox and make it look like they are one container, but I was wondering if there was an easier way? Thanks
EDIT: I don't want to text to disappear. I just want to user to be able to continue typing
EDIT 2: the reason you cant put a value in the textbox is because its a form. when the user types a username next to the value it will submit together
HTML5 has a placeholder attribute you can now use:
<input type="text" placeholder="username" />
People have also created javascript functions that mimic this functionality.
There's also a jQuery placeholder plugin which does the same, if you'd like to go that route.
What's wrong with using standard HTML? You don't say that you need it to disappear...
<input type="text" value="username: " />
If you need it to disappear, use a placeholder attribute and a jQuery plugin as a fallback (for the browsers that don't support it.
You could do something like this:
<div>
<label>Username:</label>
<input type="text" />
</div>
CSS
div{border:1px solid gray;}
label{font-family:arial; font-size:.8em;}
input{border:none;}
input:focus{outline:none;}
Basically, created a containing div and placed a label and input in that div. label is the words that stay in the field. input has the border removed.
http://jsfiddle.net/jasongennaro/rZmFx/
Fyi... you may need to increase the size of the input, depending on how many characters you want to accept.
<input type="text" placeholder="Category"/>
Maybe that can help you. If you want the textbox for only read you can put the property readonly = "".
You could call this javascript function once the page is loaded:
function add(text){
var TheTextBox = document.getElementById("Mytextbox");
TheTextBox.value = TheTextBox.value + text;
}
If you are using HTML5, you can use the placeholder attribute.
http://www.w3schools.com/html5/att_input_placeholder.asp