I am new user of Protractor. Need help as i am unable to click on Some Name, having below HTML
<div class="department-click"
<div class="department-click" onclick="GLOBAL_SERVICE_ID=405;changeLocation('#/aaaa');_routeFrom='home'">
<!-- <div class="department-click" onclick="changeLocation('#/aaaa')"> -->
<div class="department-icon custom-svgbg1 layout-column layout-align-center-center">
<!-- <svg style="height:80px; width:80px;" viewBox="0 0 24 24"> -->
<!-- <path fill="#fff" d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z" /> -->
<!-- </svg> -->
<svg height="80px" viewBox="0 0 92.168 92.168" width="80px">
<rect clip-rule="evenodd" fill="none" fill-rule="evenodd" height="92.168" width="92.168" x="0"></rect>
<path d="M4.994,53.166V37.65l-3.248-1.418c-1.185-0.511-1.077-2.165,0.2-2.565l44.208-13.824 c0.255-0.091,0.566-0.091,0.821,0l44.244,13.915c1.26,0.4,1.26,2.182,0.019,2.6L47.123,55.385c-0.366,0.145-0.73,0.145-1.096-0.019 L7.731,38.832v14.352c1.022,0.219,1.86,0.673,2.554,1.309c2.499,2.257,2.573,6.312,1.807,9.351 c-0.766,2.947-2.482,5.802-5.018,7.403c-0.475,0.309-1.022,0.273-1.477-0.019c-2.592-1.618-4.361-4.456-5.146-7.366 c-0.802-3.036-0.711-7.021,1.752-9.293C2.968,53.875,3.899,53.384,4.994,53.166L4.994,53.166z M6.782,35.468 c0.091,0.017,0.183,0.053,0.255,0.091l39.556,17.096l40.322-17.388L46.557,22.57L6.18,35.195L6.782,35.468z M69.508,51.201 c0-0.745,0.602-1.365,1.368-1.365c0.749,0,1.368,0.619,1.368,1.365v10.532c0,5.22-6.951,8.531-15.781,9.894 c-6.495,1.001-13.74,1.037-20.233,0.019c-8.558-1.328-15.181-4.567-15.181-9.896V51.457c0-0.764,0.619-1.365,1.368-1.365 c0.747,0,1.368,0.6,1.368,1.365v10.294c0,3.675,5.619,6.076,12.863,7.204c6.221,0.982,13.172,0.945,19.395-0.019 c7.534-1.165,13.464-3.619,13.464-7.203V51.201z M3.096,63.17c0.547,2.018,1.643,3.983,3.248,5.257 c1.515-1.273,2.573-3.219,3.103-5.257c0.511-1.965,0.675-5.167-0.985-6.676c-1.151-1.018-3.286-0.945-4.397,0.072 C2.402,58.095,2.568,61.186,3.096,63.17L3.096,63.17z" fill="#3A3E49 "></path>
</svg>
</div>
<h3 class="clamp2">
<span>
Some Name
</span>
</h3>
</div>
Try locating the element by css:
element(by.css('.department-click .clamp2 span'));
Depends on which element you want to click, next line is locating the element by css and then clicking it:
element(by.css('h3.clamp2 span')).click();
I want to change the color of a custom svg icon on clicking a button
<ion-item>
<ion-icon src="../../assets/img/icon-qr.svg"></ion-icon>
<ion-label>Qr Scan</ion-label>
</ion-item>
I was unable to override an svg stroke or fill if it was specified in the svg.
Example: bad svg
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16">
<g fill="#88AACC" fill-rule="evenodd" stroke-linecap="round" stroke="#555555" stroke-linejoin="round" stroke-width="2">
...
</g>
</svg>
Removing fill="#88AACC" & stroke="#555555" from within the SVG itself then allowed it to be controlled from CSS as you'd expect.
.some-class {
fill: red;
stroke: blue;
}
If you remove the entire style attribute inside the path of your custom icon,
Ionic adds its default style instead.
<path
style="APPLIED STYLE"
d="DRAWN PATH"
/>
After removing the style attribute, the custom icon can be used like e.g. ionicons.
<IonIcon icon={CUSTOM_ICON} color="primary" />
Ionic sets the fill property of the svg when the color attribute is used. Stroke color e.g. if used for outline icons is not set.
its working fine see below
page.html
<ion-item>
<ion-icon src="/assets/images/box.svg" color="primary" style="fill: brown;"></ion-icon>
<ion-label>Qr Scan</ion-label>
</ion-item>
<ion-item>
<ion-icon src="/assets/images/boxing.svg" style="fill: brown;"></ion-icon>
<ion-label>Qr Scan</ion-label>
</ion-item>
for me only i had to remove fill property fill="#000000" from the svg file
``<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 60 60" style="enable-background:new 0 0 496 496;"
xml:space="preserve">
<g xmlns="http://www.w3.org/2000/svg">
<path ...... fill="#000000" />
<path ...... fill="#000000" />
<path ...... fill="#000000" />
and then on my Ion-icon i did like so
<ion-icon style="fill: white;" ></ion-icon>
that solved the issue
enableTickmarksis true for both slider controls, yet only one shows them?
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Dialog title="{Title}" icon="sap-icon://create">
<beginButton>
<Button text="{i18n>cancel}" press="handleCloseCompetencySelection"/>
</beginButton>
<endButton>
<Button type="Accept" text="{i18n>submit}" press="handleSubmitCompetencySelection"/>
</endButton>
<content>
<FlexBox direction="Column" alignItems="Center" class="sapUiMediumMarginTopBottom">
<items>
<HBox><Label text="{i18n>required}: "/><Label id="RequiredProficiencyLabel" text="{ProfidrDescr}" design="Bold"/></HBox>
<Slider id="RequiredProficiencySlider" enabled="false" liveChange="onSliderChange" enableTickmarks="true" min="0" max="10"
class="sapUiSmallMarginBottom" width="400px"/>
</items>
</FlexBox>
<FlexBox direction="Column" alignItems="Center" class="sapUiMediumMarginTopBottom">
<items>
<HBox><Label text="{i18n>achieved}: "/><Label id="ProficiencyLabel" text="" design="Bold"/></HBox>
<Slider id="ProficiencySlider" liveChange="onSliderChange" enableTickmarks="true" min="0" max="10" class="sapUiSmallMarginBottom"
width="400px"/>
</items>
</FlexBox>
<MessageStrip text="{i18n>dragMessage}" type="Information" showIcon="true" class="sapUiMediumMargin"></MessageStrip>
</content>
</Dialog>
</core:FragmentDefinition>
There was a bug which is fixed as of version 1.52. The z-index of tickmarks was incorrectly set. Here you can see that the tickmarks are displayed correctly in Dialog: https://jsbin.com/ruqosej/edit?html,js,output
Funny story:
for "disabled" slider that tickmark looks bolder and perceptible than "enabled" one
the second slider shows the tickmarks, but you are not able to see them due to the very light grayscale color of the marks (to make sure that it is true, try to look at the sceen with different angle and you will see the tickmarks of the second slider; or use another display)
I have a page built with ZK. In this page there is a button that start a search. If there are some data them appear in a grid view.
Every data are built in this way:
v Date1 (dd/mm/yyyy)
- item
- item
- item
v Date2 (dd/mm/yyyy)
- item
- item
Lecter V means an arrow but I can't post an image so I use a "v" that have similar image to undestand.
It works correctely but there is a problem.
I would have this situation:
Date1 (dd/mm/yyyy)
Date2 (dd/mm/yyyy)
When I click on a date I want that the arrow became "v" and all data appear.
If in the first case I click on date it became close.
How to change the default view of grid items?
This is my code
<grid id="demoGrid" width="50%" height="400px" style ="float:left"
model="#bind(vm.value)" emptyMessage="No data">
<columns menupopup="auto">
<column sort="auto(Hour)" label="Hour" width="150px"/>
<column sort="auto(Value)" label="Value(bpm)" hflex="1" />
</columns>
<!-- template for group -->
<template name="model:group">
<group label="#load(each)" />
</template>
<!-- template for each element in model -->
<template name="model" >
<row>
<label value="#load(each.hour)" />
<label value="#load(each.value)" />
</row>
</template>
<!-- template for footer -->
<template name="model:groupfoot">
<groupfoot>
<cell colspan="5" style="text-align: right; padding-right: 15px">
<label value="#load(each)" style="font-weight:bold;" />
</cell>
</groupfoot>
</template>
</grid>
I try to use tag details in this subcode:
<template name="model">
<details open="false">
<row>
<label value="#load(each.hour)" />
<label value="#load(each.value)" />
</row>
</details>
</template>
Try the details like this :
<template name="model">
<row>
<detail open="false">
<hlayout>
<label value="#load(each.hour)" />
<label value="#load(each.value)" />
</hlayout>
</detail>
<label value="second column"/>
</row>
</template>
Explication :
Detail can have only 1 root element so that's why we set the the hlayout.
Of course you can change this to div or whatever you want.
The row tag has to be outside the detail tag.
The detail take a column so for this example you need to provide 2 columns.
Edit :
I created a fiddle.
Bllow is my AspxGridview syntax
<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" KeyFieldName="Menu_ID"
OnCellEditorInitialize="ASPxGridView1_CellEditorInitialize" OnCustomUnboundColumnData="ASPxGridView1_CustomUnboundColumnData">
<Columns>
<dx:GridViewCommandColumn VisibleIndex="0">
<EditButton Visible="True">
</EditButton>
<NewButton Visible="True">
</NewButton>
<DeleteButton Visible="True">
</DeleteButton>
<CustomButtons>
<dx:GridViewCommandColumnCustomButton Text="Create a Copy" ID="Copy" />
</CustomButtons>
</dx:GridViewCommandColumn>
<dx:GridViewDataTextColumn Caption="Module_ID" FieldName="Module_ID" UnboundType="Integer"
VisibleIndex="1">
</dx:GridViewDataTextColumn>
<dx:GridViewDataButtonEditColumn Caption="Target_URL" FieldName="Target_URL" UnboundType="String"
VisibleIndex="2">
<PropertiesButtonEdit>
<Buttons>
<dx:EditButton Text=".." Width="5px">
</dx:EditButton>
</Buttons>
</PropertiesButtonEdit>
</dx:GridViewDataButtonEditColumn>
<dx:GridViewDataTextColumn Caption="Menu_ID" FieldName="Menu_ID" UnboundType="Integer"
VisibleIndex="3">
</dx:GridViewDataTextColumn>
</Columns>
</dx:ASPxGridView>
AspxGridview edit/insert mode Click on Target_URL column button i want to FileUpload .
Please take a look at the following example posted in our site:
http://www.devexpress.com/Support/Center/CodeCentral/ViewExample.aspx?exampleId=E95