I am not able to find the element in kedo grid. I have to identify the grid , using that grid i have to identify the cells and enter value in them. but i m not able to identify the grid itself.
Below is the xpath.
IWebElement testoj = driver.FindElement(By.XPath("//*[#id='pricingTableSpreadsheet']"));
if i run this xpath in console it returns the element but wen I run this through code it does not detect the element
HTML
<div id="secContainer">
<div kendo-splitter="" k-panes="[null, { collapsible: true, collapsed: true, min: '235px', size: '235px' }]" k-orientation="'vertical'" id="k-splitter" style="height: 100%; border: 0 solid transparent;" data-role="splitter" class="k-widget k-splitter">
<div role="group" class="k-pane k-scrollable" style="position: absolute; top: 0px; height: 92px; width: 1066px;">
<div ui-view="prdTableView" class="fullHeight ng-scope">
<div ui-view="wipprdView" class="fullHeight ng-scope">
<div style="positi on:absolute; left: 5px; z-index: 900; padding-top: 2px;"></div>
<div style="position:absolute; float: right; right: 5px; z-index: 900;">
</div>
<div kendo-spreadsheet="" id="pricingTableSpreadsheet" style="width: 100%; height: 100%; margin-top: -3px; margin-left: -2px;" k-options="ptSpreadOptions" k-scope-field="spreadsheet" class="noFormula k-widget k-spreadsheet" data-role="spreadsheet">
</div>
</div>
</div>
</div>
</div>
</div>
Related
Does anyone know how I can do this on my own site? (vuejs)
https://cdn.larkx.xyz/kv2bos6i.gif or https://sparkedhost.com
I am going to put Vuejs aside because this effect can be achieved with CSS only.
You can give a look at the source code of sparkedhost.com for a better understanding of how they implemented this effect, and here is an example of such effect without any embellishment:
.container {
width: 200px;
height: 200px;
background: lightgrey;
overflow: hidden;
}
.content {
width: 150px;
height: 80px;
background: red;
margin: 20px auto;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.scrolling {
position: relative;
animation-duration: 8s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes slidein {
from {
top: 0;
}
to {
top: -500px;
}
}
<div class="container">
<div class="scrolling">
<div class="content" style="background-color: yellow;">#1</div>
<div class="content" style="background-color: gray;">#2</div>
<div class="content" style="background-color: blue;">#3</div>
<div class="content" style="background-color: orange;">#4</div>
<div class="content" style="background-color: green;">#5</div>
<!-- The same block of divs is repeated -->
<div class="content" style="background-color: yellow;">#1</div>
<div class="content" style="background-color: gray;">#2</div>
<div class="content" style="background-color: blue;">#3</div>
<div class="content" style="background-color: orange;">#4</div>
<div class="content" style="background-color: green;">#5</div>
</div>
</div>
I am having hard time figuring out how to fix a small alignment issue as shown in the fiddle. The text box and 'R' bootstrap label is not aligned on the top.
https://jsfiddle.net/haribalaji/p7Louzq9/
.inline-form-control
{
display: inline-block;
width: 90%;
}
.labelClass
{
display: inline-block;
height: 40px;
}
.label-primary {
background-color: #337ab7;
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
Here is the code
<code>
<form>
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="form-group">
<label for="adrTerm"><span>Adverse Reaction Term</span><span style="color:red;">*</span></label>
<div class="field"><input type="text" name="adrTerm" class="inline-form-control form-control" placeholder="Enter the ADR Term Name" value="" tabindex="1"><span class="labelClass label label-primary">R</span>
<div class="input"></div>
</div>
</div>
</div>
</form>
</code>
This fiddle demonstrates the "R" label being the same height as the input and aligned to its right.
As mentioned in the comments earlier, the markup needed to be much simpler:
<div class="container">
<form>
<div class="form-group">
<label for="adrTerm" class="col-xs-12 control-label text-left">Adverse Reaction Term<span style="color:red;">*</span></label>
<div class="col-xs-11">
<input type="text" name="adrTerm" class="form-control" placeholder="Enter the ADR Term Name" value="" tabindex="1">
</div>
<div class="col-xs-1">
<label class="text-center rLabel">R</label>
</div>
</div>
</form>
</div>
And also, very little custom CSS is required:
.container {
margin: 10px
}
.rLabel {
padding-top: 6px;
padding-bottom: 6px;
background-color: #337ab7;
margin-left: -30px;
color: #fff;
width: 80%;
}
This still may not give you exactly what you want. For example, you may not care for how the "R" label will change width when the window is resized. If so, change the width in the .rLabel class to a fixed width.
Note how the Bootstrap styles are added to the fiddle as an external resource.
Also, note that the use of a container is required.
Updated link to JSFIDDLE
.labelClass
{
display: inline-block;
position:absolute;//added
}
.label {
display: inline;
padding:0 0.6em;//changed
font-size: 75%;
font-weight: 700;
line-height: 1.8;//changed
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
Make label position absolute,
Removed unnecessary padding,
Changed line height of label.
Use input group add-on of bootstrap if you are using.
http://v4-alpha.getbootstrap.com/components/input-group/
I am testing with Capybara and Selenium.
This is my inspection:
<form id="fileuploadform" enctype="multipart/form-data" onsubmit="return false;" autocomplete="off">
<div class="NFI-wrapper nice" id="NFI-wrapper-14302252427892468" style="overflow: auto; display: inline-block;">
<div class="NFI-button NFI14302252427892468" style="overflow: hidden; position: relative; display: block; float: left; white-space: nowrap; text-align: center;">
Browse...
<input type="file" id="attachmentfiles" class="nice NFI-current" multiple="" data-styled="true" style="opacity: 0; position: absolute; border: none; margin: 0px; padding: 0px; top: 0px; right: 0px; cursor: pointer; height: 60px;">
</div>
<input type="text" readonly="readonly" class="NFI-filename NFI14302252427892468" style="display: block; float: left; margin: 0px; padding: 0px 5px;">
</div>
</form>
If I try to attach_file("attachmentfiles", "some_path"), I get an error saying:
Unable to find file field "attachmentfiles"
If I search the same input through all("input")[0] I get the following:
Capybara::ElementNotFound: Unable to find field #<Capybara::Element tag="input">
The tag 'form' behaves the same way.
I really don't understand what should I do in this case to upload a file.
Thanks,
Luca
First thing you can do is defining:
Capybara.ignore_hidden_elements = false
Another is, just add visible: false as 3rd parameter to attach_file()
I need to output a number of divs that contain child divs that are poistioned absolutely:
<div class="parent">
<div class="child">
Some content 1.
</div>
</div>
<div class="parent">
<div class="child">
Some content 2.
</div>
</div>
<div class="parent">
<div class="child">
Some content 3.
</div>
</div>
.parent {
position: relative;
margin-top: 50px;
}
.child {
position: absolute;
top: 0;
left: 10;
width: 200px;
height: 200px;
}
But my trouble is the child divs are stacking on top of each other, I'd like them to be displayed vertically, one after another. I can do this by specifying a height for the parent div:
.parent {
position: relative;
margin-top: 50px;
height: 200px;
}
But is there a way of doing it without specifying a height?
I've created a fiddle:
http://jsfiddle.net/n38546ca/1/
Any help is appreciated.
add a (padding-top: 50px;) to .parent div
.parent {
position: relative;
margin-top: 50px;
padding-top: 50px;
}
I'm trying to destroy descendants of Accordion, that is I have 4 Content Panes within an Accrdion and then when I get new data I want to repopulate the accordion with that data(eg 5 ContentPanes) but the issue is that Once I call destroyDescendants on the accordion the content panes still reside within as dijit__Contained objects left from previous data:
<div class="mblAccordionTitle mblAccordionHasIcon mblAccordionTitleSelected" id="dijit__Contained_0" widgetid="dijit__Contained_0" style="-webkit-user-select: none;">
<a class="mblAccordionTitleAnchor" role="presentation">
<div class="mblAccordionIconParent mblAccordionIconParent2">
<div class="mblSpriteIconParent" style="position: relative; width: 32px; height: 32px;">
<img alt="" src="images/i.png" class="mblSpriteIcon" style="position: absolute; clip: rect(0px 32px 32px 0px ); top: 0px; left: 0px;">
</div>
</div>
<div class="mblAccordionIconParent mblAccordionIconParent1">
<div class="mblSpriteIconParent" style="position: relative; width: 32px; height: 32px;">
<img alt="" src="images/i.png" class="mblSpriteIcon" style="position: absolute; clip: rect(0px 64px 32px 32px); top: 0px; left: -32px;">
</div>
</div>
<div class="mblAccordionTitleTextBox" role="tab" tabindex="0" aria-controls="widget/PersonContainerContentPane" aria -selected="true" aria-posinset="1" aria-setsize="4">
<span class="mblAccordionTitleLabel">John Smith
</span>
</div>
</a>
</div>
Also the contained object is not a child of accordion...
Is there any way to get rid of this when I call destroyDescendants on accordion?
That solved my problem:
for (var i = this.accordion.containerNode.childNodes.length - 1; i >= 0; i--) {
registry.byId(this.accordion.containerNode.childNodes[i].id).destroyRecursive(false);
};
Don't know why destroyDescendants didn't clean up leftover html.