Im facing a strange issue in not able to upload an image through a drop down. i.e. I selec "Image" as the option from the drop down and try to upload an image file. This uploading is not working.
however, if I select "video" as the option and try to upload a video file, the upload is successful.
Can someone help me please. Im mentioning the "image" and "video" locators.
Image (upload fails)
# Select Image
click element css:body > app-root > div > app-master > div > div.full-height > div > div > div > app-campaign-builder > div > div > div > app-setup-media > div > div > app-modal-popup > div > app-base-modal > div > div > div.flowbuilder-overlay-content > app-setup-node-properties > app-richcard-carousel > form > div > div.block-level-left > section > app-tabs > div.tab-body > app-richcard-carousel-tab-selection > form > div > div > div > div.flex-row.image-containter > ng-conatiner > div.form-fields.align-center > div > div > app-dropdown > div > div > select > option:nth-child(1)
#upload the image file
Choose File /html/body/app-root/div/app-master/div/div[3]/div/div/div/app-campaign-builder/div/div/div/app-setup-media/div/div/app-modal-popup/div/app-base-modal/div/div/div[2]/app-setup-node-properties/app-richcard-carousel/form/div/div[1]/section/app-tabs/div[1]/app-richcard-carousel-tab-selection/form/div/div/div/div[1]/ng-conatiner/div[2]/section/app-file-uploader-crop-image/div/div/div/input ${TestDataDir}/FileUpload.jpeg
Video (upload works fine)
# Select Video
click element css:body > app-root > div > app-master > div > div.full-height > div > div > div > app-campaign-builder > div > div > div > app-setup-media > div > div > app-modal-popup > div > app-base-modal > div > div > div.flowbuilder-overlay-content > app-setup-node-properties > app-richcard-carousel > form > div > div.block-level-left > section > app-tabs > div.tab-body > app-richcard-carousel-tab-selection > form > div > div > div > div.flex-row.image-containter > ng-conatiner > div.form-fields.align-center > div > div > app-dropdown > div > div > select > option:nth-child(2)
#upload a video file
Choose File /html/body/app-root/div/app-master/div/div[3]/div/div/div/app-campaign-builder/div/div/div/app-setup-media/div/div/app-modal-popup/div/app-base-modal/div/div/div[2]/app-setup-node-properties/app-richcard-carousel/form/div/div[1]/section/app-tabs/div[1]/app-richcard-carousel-tab-selection/form/div/div/div/div[1]/ng-conatiner/div[2]/section/app-file-uploader-video/div/div/input ${TestDataDir}/Video Upload.mp4
Related
I need to select the last element A, from an ul li list
CSS like .items:last-child, get the li, but i need only the A related to LINK 3
<ul id="menu">
<li id="items">Link 1
<li id="items">Link 2
<li id="items">Link 3
</ul>
you can use > a a to get immediate child of type a directly:
.items:last-child > a {
/* your css here... */
}
by the way, just noticed that you are using id attribute for items, in that case you need to switch to:
#items:last-child > a {
/* your css here... */
}
To start, I know how to style a div with a dynamically changing ID, being created from a JS call. I also think I know how to style a div without an ID or Class. But combining the two I can't seem to figure it out.
Here's the structure and code
<div id="windowManager_75b500eb-3139-4670-9c36-7bf0cd88672a">
<span id="htmlElement_window_c5888687-e892-4441-aa9c-0adb5b22bf1c">
<div class="jsframe-titlebar-focused" id="window_c5888687-e892-4441-aa9c-0adb5b22bf1c_title">
<span id="window_c5888687-e892-4441-aa9c-0adb5b22bf1c_titleBarText"></span>
</div>
<div id="window_c5888687-e892-4441-aa9c-0adb5b22bf1c_canvas">
<span id="htmlElement_window_c5888687-e892-4441-aa9c-0adb5b22bf1c_canvas_RD"></span>
<span id="htmlElement_window_c5888687-e892-4441-aa9c-0adb5b22bf1c_canvas_DD"></span>
<span id="htmlElement_window_c5888687-e892-4441-aa9c-0adb5b22bf1c_canvas_RR"></span>
<div>
<span>✖</span>
</div>
</div>
</div>
The div in question is the final one that is housing the <span>x</span>. It is an button to close the modal window. I need to override the CSS values currently given to that field (from a JS script) using CSS. The tricky part for me is that every other div surrounding it have IDs that are dynamic and change, so I have to use certain CSS to call those.
Here is what I tried:
[id^=window_] > div:nth-child(1),
[id^=window_ i] > div:nth-child(1),
[id*=window_] > div:nth-child(1),
[id*=window_ i] > div:nth-child(1) {}
And tried
[id^=windowManager_][id^=window_] > div:nth-child(1),
[id^=windowManager_][id^=window_ i] > div:nth-child(1),
[id^=windowManager_][id*=window_] > div:nth-child(1),
[id^=windowManager_][id*=window_ i] > div:nth-child(1) {}
unfortunately, the above CSS didn't target anything.
[id^=windowManager_] > div > div should work however the markup is missing a closing span which is messing up selectors
[id^="windowManager_"] > div > div {
color: red;
}
<div id="windowManager_75b500eb-3139-4670-9c36-7bf0cd88672a">
<span id="htmlElement_window_c5888687-e892-4441-aa9c-0adb5b22bf1c">
<div class="jsframe-titlebar-focused" id="window_c5888687-e892-4441-aa9c-0adb5b22bf1c_title">
<span id="window_c5888687-e892-4441-aa9c-0adb5b22bf1c_titleBarText"></span>
</div>
</span> <!-- ⭐️ this closing span is missing? -->
<div id="window_c5888687-e892-4441-aa9c-0adb5b22bf1c_canvas">
<span id="htmlElement_window_c5888687-e892-4441-aa9c-0adb5b22bf1c_canvas_RD"></span>
<span id="htmlElement_window_c5888687-e892-4441-aa9c-0adb5b22bf1c_canvas_DD"></span>
<span id="htmlElement_window_c5888687-e892-4441-aa9c-0adb5b22bf1c_canvas_RR"></span>
<div>
<span>✖</span>
</div>
</div>
</div>
This is suggested answer, You have to tweak it a little to make it work but I am just giving an idea here
1- Try to get the div with the dynamic Ids that starts with window, it can be done via JQuery, this may return 0 or n div elements depends on how many div match the criteria
$('[id*="_windowManager_"]')
2- Assign a css class to your last div element[desired one] call the css class for instance window-manager, you can do this also using the jquery once you have the desired element
3- In your css define the following css
div.window-manager span {
come css attributes
}
I have a div with certain text contained inside it. When the Text is of a certain length (Say 15 characters or more), the width of the div should change. Is there any way to achieve this purely via CSS?
You can use JS for it...
if textContent.length > 15 the add class to label and style in css(width and ect)
var lbl=document.querySelector(".lbl");
if(lbl.textContent.length > 15){
lbl.classList.add('bigger');
}
.bigger{
color:red
}
<label class="lbl">avvvvvvvvvvvvvvvvvvvvvvb<label>
with pure css, you can only fit content with div:
div { display:inline-block;}
else if you want more complicated conditions, You can't do it with pure css.you must help of javascript like this:
var con = document.getElementsByTagName("div");
if((con[0].innerHTML).length >= 15) { con[0].style.width = '300px'; }
var con = document.getElementsByTagName("div");
if((con[0].innerHTML).length >= 15)
con[0].style.width = '300px';
div {
width: 50px;
border: 1px solid red;
}
<div>This is more 15 characters</div>
HTML:
<div class=1><div class=active></div></div>
<div class=2></div>
CSS:
.1 {}
.2 {display:none;}
How can I select the second div when inside div is active?
Actually, change to display:block
Update: It appears you don't want the parent element's style to change. Instead, you want the second <div>s class to change if the first <div> contains a child-element with the class: active.
if ($(".one > div.active").length > 0) {
$('.two').css("display", "block");
}
http://jsfiddle.net/5rphc/2/
.1:active > .2
{
display: block;
}
the ">" means a "sibling" operator in CSS
How can you select all child elements recursively?
div.dropdown, div.dropdown > * {
color: red;
}
This class only throws a class on the defined className and all immediate children. How can you, in a simple way, pick all childNodes like this:
div.dropdown,
div.dropdown > *,
div.dropdown > * > *,
div.dropdown > * > * > *,
div.dropdown > * > * > * > * {
color: red;
}
Use a white space to match all descendants of an element:
div.dropdown * {
color: red;
}
x y matches every element y that is inside x, however deeply nested it may be - children, grandchildren and so on.
The asterisk * matches any element.
Official Specification: CSS 2.1: Chapter 5.5: Descendant Selectors
The rule is as following :
A B {
/* B is descendant of A */
}
A > B {
/* B is direct child of A */
}
So
div.dropdown *
instead of
div.dropdown > *
Descendant combinator
The descendant combinator — typically represented by a single space ("
") character — combines two selectors such that elements matched by
the second selector are selected if they have an ancestor (parent,
parent's parent, parent's parent's parent, etc.) element matching the
first selector.
details details {
margin-left:48px;
}
<details>
<summary>A</summary>
A is a letter in the alphabet.
</details>
<details open>
<summary>B</summary>
B is a letter in the alphabet.
<details open>
<summary>1</summary>
1 is a number.
<details open>
<summary>*</summary>
* is a character.
</details>
</details>
<details open>
<summary>2</summary>
2 is a number.
</details>
</details>