<div class="wizard" id="createacc">
<h5>Link</h5>
<section class="text-center">
<div class="pos-vertical-center">
<h4>Welcome to the sign in wizard. Please link your account if you're a debater.</h4>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-xs-12 col-sm-12">
<button class="btn btn--primary type--uppercase" type="submit">Link account</button>
</div>
<div class="col-sm-2"></div>
</div>
<br>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-xs-12 col-sm-12">
<button class="btn btn--primary type--uppercase" type="submit">I want to add the "next" button here </button>
</div>
<div class="col-sm-2"></div>
</div>
</div>
</section> ... more code
</div>
I just wanted to add the "next" button within one of the sections as a substitute for the next button at the bottom. I've looked around and couldn't seem to find anything. I also tried to copy the class and the href #next and that didn't seem to work.
Related
I have a project in Ionic v1 and I am making some enhancements to it.
I have a list of cards where the card itself is clickable to take the user to more details. I need to add couple buttons on the card but I can't get the clicks to be captured by the button - the click goes to the card href. Sample code below.
<div class="list card" ng-repeat="(evtKey, evtObj) in someHash">
<div class="item" ng-click="clickCard(evtKey)">
<div class="row">
<div class="col-20 row-center">
<div> Some stuff here</div>
</div>
<div class="col-80 item-text-wrap">
<div> More stuff here </div>
<div class="row text-center">
<div class="col col-33">
<div> More stuff </div>
</div>
<div class="col col-33">
<button class="button button-small button-stable" ng-click="alert('Yes')">Yes</button>
</div>
<div class="col col-33">
<button class="button button-small button-stable" ng-click="alert('No')">No</button>
</div>
</div>
</div>
</div>
<p class="item-icon-right"><i class="icon ion-chevron-right icon-accessory"></i></p>
</div>
</div>
Looking for help on how to make the click on the button be captured by the button and not by the card. Examples I have found so far are all on doing that with Ionic v2 and later and not for v1.
Thanks,
-S
event.stopPropagation() will stop calling event from parent elements. And also don't put alert in ng-click
<div class="col col-33">
<button class="button button-small button-stable" type="button" ng-click="somefunc('Yes');$event.stopPropagation();">Yes</button>
</div>
<div class="col col-33">
<button class="button button-small button-stable" type="button" ng-click="somefunc('No');$event.stopPropagation();">No</button>
</div>
I am trying to automate a site in which I get numbers of records and I want to find a record which contains a particular text and then click on the button corresponding to that record. Problem I am facing is that I can find the text but the button is in another div. Can anyone help?
Below is the html:
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="col-lg-5 col-md-5 col-sm-5">
<p class="f-12 ng-binding">
<!-- ngIf: item.childCategoryName.length>0 -->
<p class="f-13 black-text ng-binding ng-scope" ng-if="item.childCategoryName.length>0">
<!-- end ngIf: item.childCategoryName.length>0 -->
<p class="f-13 black-text">
<p class="f-13 black-text">
<h3 id="content" class="s-job ng-binding">test47</h3>
<p id="content" class="f-12 m-t-20 ng-binding">test47 </p>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 ">
<div class="pull-right">
<p class="">
<button id="121" class="btn btn-green" ng-click="jobInfo(item.taskId)">
<span class="pull-left ng-binding">Voir la tâche</span>
<span class="circle"/>
</button>
</div>
</div>
</div>
<hr/>
</div>
Try below and let me know the result:
driver.findElement(By.xpath("//h3[.='" + title + "']/following::button[.='Voir la tâche']")).click()
You can also add some explicit wait for element to present in DOM:
WebDriverWait wait = new WebDriverWait(driver,20);
wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//h3[.='" + title + "']/following::button[.='Voir la tâche']"))).click();
or check if your button located inside an iframe
I have the HTML as below:
<div class="top-grids">
<div class="container">
<div class="col-md-4 top-grid text-center">
<div class="top-grid-pic">
<img src="images/pic01.png" title="Boots" />
<span>Boots</span>
</div>
<div class="top-grid-pic-info">
Seeall
</div>
</div>
<div class="col-md-4 top-grid text-center">
<div class="top-grid-pic">
<img src="images/pic02.png" title="Boots" />
<span>Casual</span>
</div>
<div class="top-grid-pic-info">
Seeall
</div>
</div>
<div class="col-md-4 top-grid text-center">
<div class="top-grid-pic">
<img src="images/pic03.png" title="Boots" />
<span>Formal</span>
</div>
<div class="top-grid-pic-info">
Seeall
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
In Drupal 7, I have created a view (block) and named it "Featured Products". I have added two fields - image and title. Please check the attached screen shot.
After doing the same, I have created a view file named "views-view-field--new-uc-products--block.tpl.php" and write the code as below:
<div class="top-grids">
<div class="container">
<?php print $output; ?>
</div>
and place this under the 'templates' folder.
Now I see the drupal site and the View Source file which contains the below HTML structure:
<div class="view-content">
<table class="views-table cols-0" >
<tbody>
<tr class="odd views-row-first">
<td >
<div class="top-grids">
<div class="container">
<div class="col-md-4 top-grid text-center">
<div class="top-grid-pic"><div class="product-image"><div class="main-product-image"><img typeof="foaf:Image" src="http://localhost/uberdrupal/sites/default/files/styles/uc_product/public/515sRCSoS9L._SX331_BO1%2C204%2C203%2C200_.jpg?itok=4Exqjiv3" alt="" title="" /></div></div>
</div>
</div>
</td>
<td class="views-field views-field-title" >
<div class="top-grids">
<div class="container">
<span>Twisted</span>
</div>
<div class="top-grid-pic-info">
See All
</div>
</div> </div>
</div>
Can Someone tell me how can I customize the view template so that it can show the HTML as I desired?
Thanks
Go to admin/structure/views/settings and have these settings
Then go to your view and under Advanced, you will have Theme:Information. Click it and you will be shown a list of tpl files that you can change the html as you wish.
I have a layout with 4 columns, 4x col-md-3. When I try to make the screen smaller, these columns have to behave to first 3 columns, then 2, and then 1 when the screen is too small.
But they don't, the columns just become smaller, and don't move beneath the other columns.
I must be missing something.
Code:
<div class="row-fluid vakanties_strip_wrapper">
<div ng-repeat="vakantie in vakanties">
<a ui-sref="details_vakantie/({ vakantieId: vakantie.ID })">
<div class="col-lg-3">
<div class="vakantie_blok" ng-class="$even ? 'red' : 'blue'">
<div class="vakantie_strip_img">
SOME IMAGE
</div>
<div class="vakantie_strip_tekst_beschr">
SOME TEXT
</div>
</div>
</div>
</a>
</div>
<div class="clearfix"></div>
</div>
Try with this option.
<div class="row-fluid vakanties_strip_wrapper">
<div ng-repeat="vakantie in vakanties">
<a ui-sref="details_vakantie/({ vakantieId: vakantie.ID })">
<div class="col-xs-12 col-sm-6 col-lg-3">
<div class="vakantie_blok" ng-class="$even ? 'red' : 'blue'">
<div class="vakantie_strip_img">
SOME IMAGE
</div>
<div class="vakantie_strip_tekst_beschr">
SOME TEXT
</div>
</div>
</div>
</a>
</div>
<div class="clearfix"></div>
I using Bootstrap 3 and like to re-ordering the grid column in mobile layout.
Desktop is looks like as screenshot:
where open in mobile phone, the picture is goes to bottom, isn't possible to place the picture to top by re-ordering the grid column when user view in mobile version?
code for the output:
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-9">
<div>John Smith</div>
<div>Application Engineer</div>
<div>
<dl class="dl-horizontal">
<dt>Reg. Number</dt><dd>M8553</dd>
<dt>Mobile Number</dt><dd>012-5229887</dd>
<dt>Email</dt><dd>john.smith#email.com</dd>
</dl>
</div>
<div class="row">
<div class="col-xs-12 col-lg-2"><img src="QR-code.png" width="78" /></div>
<div class="col-xs-12 col-lg-10">
<div>
<span>
<button type="button" class="btn btn-primary" data-id="10"><span class="fa fa-fw fa-thumbs-o-up"></span> Like</button>
</span>
<a class="btn btn-success btn-alink" role="button" href="mailto:feedback#email.com?subject=Feedback"><span class="fa fa-fw fa-envelope-o"></span> Send us your feedback</a>
</div>
<div><span>0</span> liked, 63 views.</div>
</div>
</div>
</div>
<!-- /.col-lg-9 -->
<div class="col-sm-4 col-lg-3">
<img src="images/john-smith.jpg" alt="john-smith">
</div>
<!-- /.col-lg-3 -->
</div>
<!-- /.row -->
</div>
Take a look at this
Column ordering
Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.
heres the link http://getbootstrap.com/css/