I have this element where the code of the content is not inside normal html marks but inside a data-marker attribute of div :
<div class="profil-block d-flex firm" data-lat="45.812122" data-lon="3.112388" data-title="AGC CEGESMA" data-marker="<div class="profil-block firm w-auto m-0 p-0 no-box-shadow">
<a href="/expert-comptable/5213-agc-cegesma-clermont-ferrand-63100" class="d-block text-center">
<img class="avatar" src="/build/images/content/cabinet-anonyme.aa87fff0.svg"/>
</a>
<div class="name w-auto mt-2">
<a href="/expert-comptable/5213-agc-cegesma-clermont-ferrand-63100" class="text-decoration-none">AGC CEGESMA</a>
</div>
<span class="address">
<svg class="primary-red-icon mb-1" width="18" height="18">
<use xlink:href="/build/images/design/icon-lieu-sprite.be93487d.svg#icon-lieu"/>
</svg>
Clermont-Ferrand (63100)
</span>
<div class="info d-flex flex-row mt-2 justify-content-between align-items-center">
<div class="d-flex">
<span role="button" class="icon-block mr-2 firm-phone cursor-pointer" data-id="260000451205">
<svg class="icon icon-tel"><use xlink:href="/build/images/design/contact-icons-sprite.7e44022e.svg#icone-tel"></use></svg>
</span>
<span role="button" class="icon-block firm-contact cursor-pointer" data-id="260000451205">
<svg class="icon icon-mail"><use xlink:href="/build/images/design/contact-icons-sprite.7e44022e.svg#icone-mail"></use></svg>
</span>
</div>
<a href="/expert-comptable/5213-agc-cegesma-clermont-ferrand-63100" class="d-flex flex-column text-decoration-none">
<span class="knowMore">En savoir</span>
<img src="/build/images/design/plus.b2364558.svg" class="icon-more">
</a>
</div>
</div>
">
<div class="d-flex align-items-start">
<a href="/expert-comptable/5213-agc-cegesma-clermont-ferrand-63100" title="En savoir plus sur le cabinet AGC CEGESMA">
<img src="/build/images/content/cabinet-anonyme.aa87fff0.svg" class="avatar" alt="AGC CEGESMA – Expert-comptable logo">
</a>
<div class="d-desktop-none">
<h3 class="name">
AGC CEGESMA
</h3>
<span class="address">
<svg class="primary-red-icon mb-1" width="18" height="18">
<title>Adresse</title>
<use xlink:title="" xlink:href="/build/images/design/icon-lieu-sprite.be93487d.svg#icon-lieu"></use>
</svg>
Clermont-Ferrand (63100)
</span>
</div>
</div>
<div class="d-flex flex-column justify-content-between -medium">
<div class="d-desktop-block">
<div class="name">
AGC CEGESMA
</div>
<span class="address">
<svg class="primary-red-icon mb-1" width="18" height="18">
<title>Adresse</title>
<use xlink:href="/build/images/design/icon-lieu-sprite.be93487d.svg#icon-lieu"></use>
</svg>
Clermont-Ferrand (63100)
</span>
</div>
<div class="competence-list">
<div class="competence ">RAY François</div>
</div>
</div>
<div class="info d-flex justify-content-between">
<div class="d-flex">
<div role="button" class="icon-block mr-2 firm-phone cursor-pointer" data-id="260000451205" title="Contacter le cabinet AGC CEGESMA par téléphone">
<svg class="icon icon-tel"><use xlink:href="/build/images/design/contact-icons-sprite.7e44022e.svg#icone-tel"></use></svg>
</div>
<div role="button" class="icon-block firm-contact cursor-pointer" data-id="260000451205" title="Contacter le cabinet AGC CEGESMA par mail">
<svg class="icon icon-mail"><use xlink:href="/build/images/design/contact-icons-sprite.7e44022e.svg#icone-mail"></use></svg>
</div>
</div>
<a href="/expert-comptable/5213-agc-cegesma-clermont-ferrand-63100" class="d-flex flex-column text-decoration-none" title="En savoir plus sur le cabinet AGC CEGESMA">
<span class="knowMore">En savoir</span>
<img src="/build/images/design/plus.b2364558.svg" class="icon-more">
</a>
</div>
</div>
I can retrieve the content with driver.find_elements(by=By.XPATH, value='//div[#class="profil-block d-flex firm"]').get_attribute('data-marker'), but then how to i select some buttons for example inside this attribute?
I need selenium to click a link inside this data-marker code
Thank you
I don't think it is possible to click on an element thats only in the data-marker. In your situation though you can just locate this element:
This code should work for locating that element:
driver.find_elements(by=By.XPATH, value='//div[#class="icon-block firm-contact cursor-pointer"]')
Related
I modify the tailwind elements carousel with two columns left column with content and a right column with image. All functionality is correct but the problem is responsivity.
How can I modify this carousel so that I change the resolution to md or sm I get columns vertical?
I tried to do flex flex-row and when i change the resolution to md or sm to be flex flex-col and nothing changed the same with grid grid-cols-2 and after changing to md and sm to grid-cols-1
This is my code
<div id="carouselExampleCaptions" class="carousel slide relative" data-bs-ride="carousel">
<div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-4">
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<div class="carousel-inner relative w-full overflow-hidden">
<div class="carousel-item active relative float-left w-full">
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg"
class="block w-1/4 h-96 float-right mr-80"
alt="..."
/>
<div class="carousel-caption hidden md:block absolute text-left h-96 ">
<h1 class="font-bold text-4xl lg:text-6xl text-blue-900 leading-tight font-poppins pb-4 ">SOME TEXT</h1>
<p class="text-gray-500">Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item relative float-left w-full">
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg"
class="block w-1/4 h-96 float-right mr-80"
alt="..."
/>
<div class="carousel-caption hidden md:block absolute text-left h-96">
<h1 class="font-bold text-4xl lg:text-6xl text-blue-900 leading-tight font-poppins pb-4">SOME TEXT 1</h1>
<p class="text-gray-500">Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item relative float-left w-full">
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg"
class="block w-1/4 h-96 float-right mr-80"
alt="..."
/>
<div class="carousel-caption hidden md:block absolute text-left h-96">
<h1 class="font-bold text-4xl lg:text-6xl text-blue-900 leading-tight font-poppins pb-4">SOME TEXT 2</h1>
<p class="text-gray-500">Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button
class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0 text-black"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon inline-block bg-no-repeat" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0 text-black"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="next"
>
<span class="carousel-control-next-icon inline-block bg-no-repeat" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Here is my code:
<template>
<div class="main-column d-flex flex-column h-100">
<div class="pl-3 pr-3">
<filter-panel ref="filterComp" :controls="filterControls" :urlParams="$route.query" #filterResults="onSearchClicked" />
</div>
<div class="flex-grow-1 d-flex flex-column px-1 py-2 bg-container">
<div class="position-relative h-100">
<div class="absoluteFill">
<div class="collapse-panel nested-background mb-2 w-100">
<div class="collapse-bar full-length">
<b-button class="buttonRow w-100 py-0 d-flex justify-content-between" size="sm" variant="link" #click="hideGraphs = !hideGraphs" v-b-toggle.count-collapse>
<span class="title">Chart</span>
<icon :class="{'down': hideGraphs}" class="icon rotate mt-1" icon="chevron-up" size="lg" />
</b-button>
</div>
<b-collapse id="count-collapse" visible>
<transition name="fade" mode="out-in">
<div>
<DxChart :data-source="graphData"
palette="Material"
class="p-3">
<DxCommonSeriesSettings type="bar" argument-field="date">
<DxLabel>
<DxFormat :precision="0" type="fixedPoint" />
</DxLabel>
</DxCommonSeriesSettings>
<DxSize :height="350" />
<DxSeries name="Mapping Client"
value-field="mappingClient"
color="#a4de02" />
<DxSeries name="Mapping ISCI"
value-field="mappingIsci"
color="#add8e6" />
<DxSeries name="Mapping Product"
value-field="mappingProduct"
color="#ff0000" />
<DxLegend :visible="true" />
<DxTooltip :enabled="true" />
</DxChart>
</div>
</transition>
</b-collapse>
</div>
<!--Grid card-->
<div class="collapse-panel nested-background mb-2 d-flex flex-column w-100 ">
<div class="collapse-bar full-length">
<b-button class="buttonRow w-100 py-0 d-flex justify-content-between" size="sm" variant="link" #click="hideGrids = !hideGrids" v-b-toggle.counts-collapse>
<span class="title">Grids</span>
<icon :class="{'down': hideGrids}" class="icon rotate mt-1" icon="chevron-up" size="lg" />
</b-button>
</div>
<b-collapse id="counts-collapse" visible>
<transition name="fade" mode="out-in">
<dx-tab-panel ref="tabPanel" :items="tabs">
<div slot="title" class="wordwrap" slot-scope="tab">{{tab.data.title}}</div>
<div slot="item" slot-scope="tab">
<span v-if="isTab(tab, 0)">
<data-summary :graphData="graphData"></data-summary>
</span>
<span v-if="isTab(tab, 1)"><user-data :rawData="rawData"></user-data></span>
</div>
</dx-tab-panel>
</transition>
</b-collapse>
</div>
</div>
</div>
</div>
</div>
I need the last table to have an overflow inside the div and not scroll the page. I also need that div to expand if the chart is minimized. I have been trying to solve this all day I'm out of answers, I feel like this should be a super simple fix but I just can't get it.
Thanks for any help!
I have this css code in my vue 3 component template
<div class="row mt-5 pt-5 m-0" id="carouselRow">
<!-- <div class="col-sm-12 col-md-12 col-lg-12 p-md-0"> -->
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="true">
<!-- <div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
</div> -->
<div class="carousel-inner">
<div class="row m-0" v-for="( doctor, i ) in featuredDoctors.slice(0, 10)" :key="i">
<div class="carousel-item" :class="i === 0 ? 'active':''" id="doctorCard" >
<div class="col-md-4 col-lg-4">
<div class="card">
<img :src="doctor.propicUrl" class="img-fluid" width="150" alt="">
<div class="card-body">
<h5>{{ doctor.name }} {{ doctor.surname }}</h5>
<p>{{ doctor.category }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- </div> -->
</div>
I want to create a simple card carousel but at the moment I'm unable to use the right markup and I will see only one card in a crappy way, but on the dom the loop has rendered all the cards I want display.
How I can make a v-for loop that works fine and will render 3 bootstrap 5.2 cards for each carousel item into the array that will be looped?
I think you placed the v-for on the wrong item.
Vue is rendering now rendering this several times:
<div class="row m-0" v-for="( doctor, i ) in featuredDoctors.slice(0, 10)" :key="i">
<div class="carousel-item" :class="i === 0 ? 'active':''" id="doctorCard" >
<div class="col-md-4 col-lg-4">
<div class="card">
<img :src="doctor.propicUrl" class="img-fluid" width="150" alt="">
<div class="card-body">
<h5>{{ doctor.name }} {{ doctor.surname }}</h5>
<p>{{ doctor.category }}</p>
</div>
</div>
</div>
</div>
</div>
But you only need this:
<div class="carousel-item" :class="i === 0 ? 'active':''" id="doctorCard" >
<div class="col-md-4 col-lg-4">
<div class="card">
<img :src="doctor.propicUrl" class="img-fluid" width="150" alt="">
<div class="card-body">
<h5>{{ doctor.name }} {{ doctor.surname }}</h5>
<p>{{ doctor.category }}</p>
</div>
</div>
</div>
</div>
Try it with this:
<div class="carousel-item" :class="i === 0 ? 'active':''" id="doctorCard" v-for="( doctor, i ) in featuredDoctors.slice(0, 10)" :key="i">
Consider the following:
<ul class="park-list row row-pd">
<li class="col-12" v-for="(item, index) in list.items" v-bind:key="index">
<div class="park-note px-3 py-2">
<p class="font-italic" >
{{ item.notes }} <a v-bind:href="'#collapseNoteTest'+item.id"
data-toggle="collapse" role="button" aria-expanded="false"
v-bind:aria-controls="'#collapseNoteTest'+item.id">
<i class="svg-12 ic-cyan-path" v-html="icons['ic-edit']"></i></a>
</p>
<div class="collapse" v-bind:id="'collapseNoteTest'+item.id">
<div class="form-group">
<label for="exampleFormControlTextarea1">Note:</label>
<textarea class="form-control" v-model="item.notes" rows="3"></textarea>
</div>
<div class="form-row">
<div class="col-auto ml-auto">
<button type="button" class="btn btn-outline-primary" v-bind:href="'#collapseNoteTest'+item.id" data-toggle="collapse">Cancel</button>
</div>
<div class="col-auto">
<button class="btn btn-success mb-2" v-bind:href="'#collapseNoteTest'+item.id" data-toggle="collapse">Save</button>
</div>
</div>
</div>
</div>
</li>
</ul>
No matter what I do here, item.notes does not update when I enter text into the textarea. What am I doing wrong?
The Web page is written using aspx pages. Where are there are no fixed rows and elements. Which gets changed dynamically.
Please review the attached code and let me know how to form CSS Selector path/Xpath to locate the button "showAirlineCreateButton", whose position changes dynamically.
<div class="row">
<div class="client_name col-xs-offset-2 col-xs-8">
<h4 class="ng-binding">TEST </h4>
</div>
<!-- ngRepeat: scheduleBasicDetail in Airline_item.scheduleBasicDetailList --><div ng-repeat="scheduleBasicDetail in Airline_item.scheduleBasicDetailList" class="ng-scope">
<div class="col-xs-offset-2 col-xs-8" style="height:86px;">
<!-- ngIf: scheduleBasicDetail.Client_ID!=0 --><div class="tri_widget widget md-whiteframe-z2 ng-scope ng-isolate-scope flex layout-column" ng-class="::{'widget-overlay-title': vm.overlayTitle}" flex="" layout="column" ng-if="scheduleBasicDetail.Client_ID!=0" title-position="top" ng-click="redirect(scheduleBasicDetail.Schedule_ID,scheduleBasicDetail.Client_ID)" title="" role="button" tabindex="0"><!-- ngIf: ::(vm.title || vm.subtitle) --><div class="widget-content layout-column layout-align-start-stretch flex-order-2" layout="column" layout-align="" ng-class="{'layout-padding': vm.contentPadding}" ng-transclude="" flex-order="2">
<div layout="row" layout-wrap="" class="layout-wrap ng-scope layout-row">
<div flex="10" class="flex-10">
<img class="TESTListFirstTableTdImage" ng-src="http://10.255.109.100/TESTService/Services/../Repository/TEST/TEST/Logo.png" src="http://10.255.109.100/TESTService/Services/../Repository/TEST/TEST/Logo.png">
</div>
<div flex="80" class="Small_Padding_Left flex-80">
<div layout="row" class="layout-row">
<div flex="33" id="title" class="ng-binding flex-33">HX-JAN17-01</div>
<div flex="33" class="AirLineScheduleSystemName ng-binding flex-33">PAC eFX / PAC eX2 / Thales i5000</div>
<div flex="33" class="flex-33"></div>
</div>
<div layout="row" class="layout-row">
<div flex="33" class="flex-33"><span class="TESTScheduleMonth ng-binding">January</span> <br>
<span class="TESTScheduleYear ng-binding">2017</span>
</div>
<div flex="66" class="flex-66"><span class="AirLineScheduleAssets ng-binding">0 Assets</span><br>
<span class="TESTScheduleAssets ng-binding">MOVIES / I-MOVIES / TV / OTHERS</span>
</div>
</div>
</div>
<div flex="10" class="flex-10">
<img ng-src="http://10.255.109.100/TESTService/Services/../Repository/ScheduleStatus/Locked.png" ng-altsrc="../../Images/Common/NoImage.png" onerror="this.src = $(this).attr('altSrc')" src="http://10.255.109.100/TESTService/Services/../Repository/ScheduleStatus/Locked.png">
</div>
</div>
</div><div class="widget-loading ng-hide layout-fill layout-align-center-center layout-row" ng-show="vm.loading" layout="" layout-fill="" layout-align="center center" aria-hidden="true"><div class="widget-loading-inner ng-hide" ng-show="vm.loading" aria-hidden="true"><md-progress-circular md-mode="indeterminate" aria-valuemin="0" aria-valuemax="100" role="progressbar" class="ng-isolate-scope" style="width: 50px; height: 50px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" style="width: 50px; height: 50px;"><path fill="none" transform="rotate(49.63717240968655 25, 25)" d="M23.589212129501437,47.455727055351694A22.5,22.5 0 0,0 28.277287287607944,47.2600401624634" style="stroke-width: 5px;"></path></svg></md-progress-circular></div></div></div><!-- end ngIf: scheduleBasicDetail.Client_ID!=0 -->
<!-- ngIf: scheduleBasicDetail.Client_ID==0 -->
</div>
<div class="col-xs-2 dropdown-parent-div">
<div class="dropdown">
<i class="dropbtn fa fa-bars" aria-hidden="true"></i>
<div class="dropdown-content" style="margin-top:22px">
<strong> <i class="fa fa-file-excel-o icon-4x dropdown-excel-button" aria-hidden="true"> </i></strong>
</div>
<div class="dropdown-content" style="margin-top:22px">
<strong> <i class="fa fa-file-excel-o icon-4x dropdown-excel-button" aria-hidden="true"> </i></strong>
</div>
</div>
</div>
</div><!-- end ngRepeat: scheduleBasicDetail in TEST_item.scheduleBasicDetailList --><div ng-repeat="scheduleBasicDetail in TEST_item.scheduleBasicDetailList" class="ng-scope">
<div class="col-xs-offset-2 col-xs-8" style="height:86px;">
<!-- ngIf: scheduleBasicDetail.Client_ID!=0 --><div class="tri_widget widget md-whiteframe-z2 ng-scope ng-isolate-scope flex layout-column" ng-class="::{'widget-overlay-title': vm.overlayTitle}" flex="" layout="column" ng-if="scheduleBasicDetail.Client_ID!=0" title-position="top" ng-click="redirect(scheduleBasicDetail.Schedule_ID,scheduleBasicDetail.Client_ID)" title="" role="button" tabindex="0"><!-- ngIf: ::(vm.title || vm.subtitle) --><div class="widget-content layout-column layout-align-start-stretch flex-order-2" layout="column" layout-align="" ng-class="{'layout-padding': vm.contentPadding}" ng-transclude="" flex-order="2">
<div layout="row" layout-wrap="" class="layout-wrap ng-scope layout-row">
<div flex="10" class="flex-10">
<img class="AirlineScheduleListFirstTableTdImage" ng-src="http://10.255.109.100/TESTService/Services/../Repository/Airline/TEST/Logo.png" src="http://10.255.109.100/TESTService/Services/../Repository/Airline/TEST/Logo.png">
</div>
<div flex="80" class="Small_Padding_Left flex-80">
<div layout="row" class="layout-row">
<div flex="33" id="title" class="ng-binding flex-33">HX-DEC16-01</div>
<div flex="33" class="AirLineScheduleSystemName ng-binding flex-33">PAC eFX / PAC eX2 / Thales i5000</div>
<div flex="33" class="flex-33"></div>
</div>
<div layout="row" class="layout-row">
<div flex="33" class="flex-33"><span class="TESTScheduleMonth ng-binding">December</span> <br>
<span class="AirLineScheduleYear ng-binding">2016</span>
</div>
<div flex="66" class="flex-66"><span class="AirLineScheduleAssets ng-binding">29 Assets</span><br>
<span class="TESTScheduleAssets ng-binding">MOVIES / I-MOVIES / TV / OTHERS</span>
</div>
</div>
</div>
<div flex="10" class="flex-10">
<img ng-src="http://10.255.109.100/DASHService/Services/../Repository/ScheduleStatus/Locked.png" ng-altsrc="../../Images/Common/NoImage.png" onerror="this.src = $(this).attr('altSrc')" src="http://10.255.109.100/DASHService/Services/../Repository/ScheduleStatus/Locked.png">
</div>
</div>
</div><div class="widget-loading ng-hide layout-fill layout-align-center-center layout-row" ng-show="vm.loading" layout="" layout-fill="" layout-align="center center" aria-hidden="true"><div class="widget-loading-inner ng-hide" ng-show="vm.loading" aria-hidden="true"><md-progress-circular md-mode="indeterminate" aria-valuemin="0" aria-valuemax="100" role="progressbar" class="ng-isolate-scope" style="width: 50px; height: 50px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" style="width: 50px; height: 50px;"><path fill="none" transform="rotate(49.63717240968655 25, 25)" d="M23.589212129501437,47.455727055351694A22.5,22.5 0 0,0 28.276617692292554,47.26013873493504" style="stroke-width: 5px;"></path></svg></md-progress-circular></div></div></div><!-- end ngIf: scheduleBasicDetail.Client_ID!=0 -->
<!-- ngIf: scheduleBasicDetail.Client_ID==0 -->
</div>
<div class="col-xs-2 dropdown-parent-div">
<div class="dropdown">
<i class="dropbtn fa fa-bars" aria-hidden="true"></i>
<div class="dropdown-content" style="margin-top:22px">
<strong> <i class="fa fa-file-excel-o icon-4x dropdown-excel-button" aria-hidden="true"> </i></strong>
</div>
<div class="dropdown-content" style="margin-top:22px">
<strong> <i class="fa fa-file-excel-o icon-4x dropdown-excel-button" aria-hidden="true"> </i></strong>
</div>
</div>
</div>
</div><!-- end ngRepeat: scheduleBasicDetail in Airline_item.scheduleBasicDetailList --><div ng-repeat="scheduleBasicDetail in Airline_item.scheduleBasicDetailList" class="ng-scope">
<div class="col-xs-offset-2 col-xs-8" style="height:86px;">
<!-- ngIf: scheduleBasicDetail.Client_ID!=0 --><div class="tri_widget widget md-whiteframe-z2 ng-scope ng-isolate-scope flex layout-column" ng-class="::{'widget-overlay-title': vm.overlayTitle}" flex="" layout="column" ng-if="scheduleBasicDetail.Client_ID!=0" title-position="top" ng-click="redirect(scheduleBasicDetail.Schedule_ID,scheduleBasicDetail.Client_ID)" title="" role="button" tabindex="0"><!-- ngIf: ::(vm.title || vm.subtitle) --><div class="widget-content layout-column layout-align-start-stretch flex-order-2" layout="column" layout-align="" ng-class="{'layout-padding': vm.contentPadding}" ng-transclude="" flex-order="2">
<div layout="row" layout-wrap="" class="layout-wrap ng-scope layout-row">
<div flex="10" class="flex-10">
<img class="AirlineScheduleListFirstTableTdImage" ng-src="http://10.255.109.100/DASHService/Services/../Repository/Airline/Hong_Kong_Airlines/Logo.png" src="http://10.255.109.100/DASHService/Services/../Repository/Airline/Hong_Kong_Airlines/Logo.png">
</div>
<div flex="80" class="Small_Padding_Left flex-80">
<div layout="row" class="layout-row">
<div flex="33" id="title" class="ng-binding flex-33">HX-SEP16-01</div>
<div flex="33" class="AirLineScheduleSystemName ng-binding flex-33">PAC eFX / PAC eX2 / Thales i5000</div>
<div flex="33" class="flex-33"></div>
</div>
<div layout="row" class="layout-row">
<div flex="33" class="flex-33"><span class="AirLineScheduleMonth ng-binding">September</span> <br>
<span class="AirLineScheduleYear ng-binding">2016</span>
</div>
<div flex="66" class="flex-66"><span class="AirLineScheduleAssets ng-binding">50 Assets</span><br>
<span class="AirLineScheduleAssets ng-binding">MOVIES / I-MOVIES / TV / OTHERS</span>
</div>
</div>
</div>
<div flex="10" class="flex-10">
<img ng-src="http://10.255.109.100/DASHService/Services/../Repository/ScheduleStatus/Locked.png" ng-altsrc="../../Images/Common/NoImage.png" onerror="this.src = $(this).attr('altSrc')" src="http://10.255.109.100/DASHService/Services/../Repository/ScheduleStatus/Locked.png">
</div>
</div>
</div><div class="widget-loading ng-hide layout-fill layout-align-center-center layout-row" ng-show="vm.loading" layout="" layout-fill="" layout-align="center center" aria-hidden="true"><div class="widget-loading-inner ng-hide" ng-show="vm.loading" aria-hidden="true"><md-progress-circular md-mode="indeterminate" aria-valuemin="0" aria-valuemax="100" role="progressbar" class="ng-isolate-scope" style="width: 50px; height: 50px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" style="width: 50px; height: 50px;"><path fill="none" transform="rotate(49.63717240968655 25, 25)" d="M23.589212129501437,47.455727055351694A22.5,22.5 0 0,0 28.275447404006268,47.260310966012774" style="stroke-width: 5px;"></path></svg></md-progress-circular></div></div></div><!-- end ngIf: scheduleBasicDetail.Client_ID!=0 -->
<!-- ngIf: scheduleBasicDetail.Client_ID==0 -->
</div>
<div class="col-xs-2 dropdown-parent-div">
<div class="dropdown">
<i class="dropbtn fa fa-bars" aria-hidden="true"></i>
<div class="dropdown-content" style="margin-top:22px">
<strong> <i class="fa fa-file-excel-o icon-4x dropdown-excel-button" aria-hidden="true"> </i></strong>
</div>
<div class="dropdown-content" style="margin-top:22px">
<strong> <i class="fa fa-file-excel-o icon-4x dropdown-excel-button" aria-hidden="true"> </i></strong>
</div>
</div>
</div>
</div><!-- end ngRepeat: scheduleBasicDetail in Airline_item.scheduleBasicDetailList -->
<div class="col-xs-8 col-xs-offset-2 div_add_btn">
<!-- ngIf: showAirlineCreateButton --><div class="col-xs-6 col-xs-offset-6 text-center add_btn_schedule ng-scope" ng-click="Show_AirName(Airline_item.Client_ID,Airline_item.ClientName,Airline_item.scheduleBasicDetailList[0].Schedule_ID)" data-toggle="modal" data-target="#myModal" data-ng-if="showAirlineCreateButton" role="button" tabindex="0">
<span class="fa fa-plus" aria-label="Create a Schedule">
</span>
/div><!-- end ngIf: showAirlineCreateButton -->
</div>
</div>
You can use this XPath that should work no matter where element located:
//div[#data-ng-if="showAirlineCreateButton"]