I would like to replace next element of a given element and add css class to the next element.
I tried like this but it didn't work.
$(".validate_txt_sContactFirstName")
.next()
.replaceWith('<div>2</div>')
.addClass("atleastTwoChars");
<div class="xqh_Field">
<nobr>
<input name="ctl00$objContentPageTag$spzContactInformation$txt_sContactFirstName$txt"
type="text" size="25"
id="ctl00_objContentPageTag_spzContactInformation_txt_sContactFirstName_txt"
class="xqh_TextBox_Edit validate_txt_sContactFirstName error"
style="width:150px;margin-right:1px;">
<div class="atleastTwoChars"></div>
</nobr>
</div>
$(".validate_txt_sContactFirstName")
.next()
.text(2);
This is what you could use here. That way only the content of the <div> is edited. If you need HTML replace text(2) with html('<strong>2</strong>')
if i am getting you correctly you can do it in a very simple way, because when you already have the class atleastTwoChars in the div what is meaning of replacing it adding text in it and then add same class. you can just replace inner value of div.
$('.atleastTwoChars').html(2);
fiddle : http://jsfiddle.net/qXydv/
Related
I got this weird problem:
I get content that is dynamically built. In this special case I also get the element "input" as content, which is then displayed directly by the browser as an element.
What I get:
<div class="search_result_content"> this is just text, but the code <input variable="" name=""> displays as an element
What i need:
You may want to add 'type="text"', so total would be like
<input type="text" name="" value=""/>
Else if the input needs to be added to a (like) 'span' or 'div', i would suggest JS or jQuery
$(document).ready(function() {
$(".search_result_content").append('<input variable="" name="">');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search_result_content"> this is just text, but the code </div>
u insert the input tag dynamically in this scenario, after inserting convert it into html format
I am using the angular drag & drop directive on my divs.
I am also using Bootstrap CSS paneling. The panel header is what I am using as the dnd dragHandle.
<div class="panel-heading dragHandle">
<h4>Click & drag here to move</h4>
</div>
I want the entire div to be draggable based on the header, but once inside the div (where text is displayed), I am using the directive dnd-nodrag. This currently works as you are not able to drag the div when the cursor is inside and not on the panel header; however, I would like to be able to copy the text inside the div.
<div dnd-nodrag class="panel-body" draggable="true">
<p> THIS IS THE TEXT I WANT TO COPY </p>
</div>
As it seems to me, the nodrag directive only allows selection/copying of text inside of an input element. I need to be able to copy the plain text from the div.
Both of the above code snippets are nested inside of a div with the class "panel" and the dnd-draggable directive.
Any work arounds? Any directives I am missing? Please help. Thanks ahead!
Also -- I have tried adjusting the user-select styling in the CSS with no luck.
My attempt:
<div class="panel-body" style="-webkit-user-select: all">
<p> THIS IS THE TEXT I WANT TO COPY</p>
</div>
This issue has been reported in the bugzilla,
Issue Link : https://github.com/react-dnd/react-dnd/issues/178
https://bugzilla.mozilla.org/show_bug.cgi?id=195361
https://bugzilla.mozilla.org/show_bug.cgi?id=800050
However I've fixed this issue using a work around,
When you inspect the Div element, you'll see the below code having draggable attribute set to true hence in firefox you cannot select the text using mouse cursor.
<li ng-repeat="item in models.lists.A" dnd-draggable="item" dnd-moved="models.lists.A.splice($index, 1)" dnd-effect-allowed="move" dnd-selected="models.selected = item" ng-class="{'selected': models.selected === item}" class="ng-scope" draggable="true">
<div dnd-nodrag="" draggable="true">
<div class="theheader" dnd-handle="" **draggable="true"**>A header</div>
<div class="thebody">
Selecting test works on Chrome/Safari. Doesn't work on Firefox/Edge
<input type="text" ng-model="item.label" class="ng-pristine ng-valid">
</div>
</div>
</li>
Workaround :
in html,
<input type="text" ng-model="item.label" class="ng-pristine ng-valid"
ng-click="vm.disableDrag()" ng-blur="vm.enableDrag()">
in JS file,
/**
*find li and disable the draggable feature, so the input can be edited using mouse in firefox
*/
vm.disableDrag= function($event) {
var $li = $event.currentTarget.parentNode;
angular.element($li).attr("draggable", false)
}
/**
* find li element and Enalbe the draggable feature, on blur of the editable input
*/
vm.enableDrag = function($event) {
var $li = $event.currentTarget.parentNode;
angular.element($li).attr("draggable", true)
}
<div class="form-item">
<label class="form-item-label">Mailing Account:</label>
<div class="form-element">
<div class="form-field-wrap>
<input class="form-text x-form-field x-combo-noedit">
</input>
I am trying to locate the element <input class="form-text x-form-field x-combo-noedit"> comes under <label class="form-item-label">Mailing Account:</label>.
First element should be matched on text "Mailing Account:" and the second element on any of these classes "form-text x-form-field x-combo-noedit".
Can someone suggest a logic using using xpath or cssSelectorplease?
Let me see if I understand you correctly, you want to find the element with the classes 'form-text' 'x-form-field' and 'x-combo-noedit', only if the containing div is a sibling of the label with text "Mailing account"
Way to do this using just xpath:
WebElement firstElement = driver.findElement(By.xpath("//label[contains(text(), 'Mailing Account:')]"));
WebElement secondElement = firstElement.findElement(By.xpath("./following-sibling::div[1]//input[#class='form-text x-form-field x-combo-noedit']"));
OR as you wrote if you want to match ANY of the classes then the "input" part of your second xpath to this:
//input[contains(#class,'form-text') or contains(#class ,'x-form-field') or contains(#class ,'x-combo-noedit')]
If you want to combine everything into just one expression, you can use the following xpath:
String xpath = "//label[contains(text(), 'Mailing Account:')]/following-sibling::div[1]//input[contains(#class,'form-text') or contains(#class ,'x-form-field') or contains(#class ,'x-combo-noedit')]";
// and then just find the element
driver.findElement(By.xpath(xpath));
I have this composition :
<div class="theclass1">
<input type="checkbox" id ="1">
<div>
<div>
<div>
<label for="1">bla bla</label>
</div>
</div>
<input type="checkbox" id ="yy">
<label for ="yy">other</label>
</div>
<div class="theclass2">
<input type="checkbox" id ="2">
<div>
<div>
<div>
<label for="2">bla bla</label>
</div>
</div>
<input type="checkbox" id ="xx">
<label for ="xx">other</label>
</div>
</div>
</div>
I want (and I am super cofussed) to apply css styles to the label but only the first of 'theclass1'
I'm playing with first-of-type, first child, +div >div>div ,etc... without success.
Maybe somebody can explain me how to made this and if possible using some examples. I have a lot of troubles to understand the meaning of space, + and > selectors. Also... I think it can have more than one solution ?
I'd need code to style only the first label of theclass1, or the first inside >div>div>div but only this one. And something similar for theclass2.
Now I have a polluted css and undesirable results.
(The div 'theclass2' is inside div theclass1.)
Thanks in advance.
problem is not the CSS only, There are serious semantics errors in your HTML
id attribute name must not start with numbers
taken from HTML4 document of w3c
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
followed by any number of letters, digits ([0-9]), hyphens ("-"),
underscores ("_"), colons (":"), and periods (".").
so much nesting , why these extra parent div div and div?
now first you fix the HTML nodes then apply below css
iff you want only first label of first div class
.theclass1:first-child > label:first-of-type
working DEMO
.theclass1 > div:first-of-type > div > div > label {
color: red;
}
http://jsfiddle.net/807t5L6z/
.theclass1 label:first-child {
color:red;
}
You could use this probably similiar code for label in .theclass2
General answer is that "global first label in HTML" couln't be done, see here: CSS global :nth-of-type selector (:nth-of-class)
And it's better to introduce class or id for this label.
However, if you want to target it without modifying HTML, you can use this selector:
label[for='1'] {
background:red
}
.theclass1 > div > div > div label {color:red;}
While trying to understand bootstrap I came across this :
.control-group.error input, [...] {
[...]
}
It looks like a descendant selector but .control-group.error is a class.
I looked through this and I couldn't find anything : http://css.maxdesign.com.au/selectutorial/
Can anyone give me some pointers ?
Assuming I've understood your question correctly, .control-group.error will match any elements that have both control-group and error class names.
As you said, the input will match any input element that is a descendant of any element with the class names control-group and error.
For example, it would match:
<form class="control-group error">
<input> <!-- It matches this (both class names on form) -->
</form>
And it would not match:
<form class="control-group">
<input> <!-- It won't match this (only one of the class names on form) -->
</form>