how i add text in p tag?
<div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 350px;"><span id="cke_44" class="cke_voice_label">Press ALT 0 for help</span>
<iframe class="cke_wysiwyg_frame cke_reset" frameborder="0" src="" style="width: 100%; height: 100%;" title="Rich Text Editor, editor2" aria-describedby="cke_106" tabindex="0" allowtransparency="true">
<html lang="en" dir="ltr">
<head>
<body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" contenteditable="true" spellcheck="true">
<p>
<br type="_moz">
</p>
</body>
</html>
</iframe>
</div>
i use this code but the give error
var p = element(by.css('.cke_editable p'));
p.sendKeys('This is a peragraph tag');
You'll need to switch to the iframe's page context to do this:
browser.switchTo().frame($('.cke_wysiwyg_frame'))
var p = element(by.css('.cke_editable p'));
p.sendKeys('This is a peragraph tag');
// switch back to the "parent page" context
browser.switchTo().defaultContent()
Related
The default hide directive with angular-formly is ng-if which can be configured via e.g. the formlyConfigProvider.
Currently all my fields should always be shown and I don't want to have unneccesary ng-if="!field.hide" checks rendered that can inpact the performance.
How can I tell formly not to use this check per field/form or globally?
ng-if add and remove elements from the DOM, when you want to show and hide large number of elements it can be slow, insted you can use ng-show.
ng-show will only change the visibility of the element.
<html lang="en" itemscope="" itemtype="http://schema.org/Article">
<head>
<script>
var oModelesDep = [];
</script>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://s3.amazonaws.com/gowpres/resources/js/utils/jquery-1.10.2.js"></script>
<!-- Angular Material Library -->
<script src="https://www.weldpad.com/starterkit.js?containerId=60515"></script>
<script data-meta="61021" src="https://www.weldpad.com/sogettopanswerers.html?containerId=61021"></script>
</head>
<body ng-controller="AppCtrl" ng-app="MyApp">
<h4 ng-init="showchat = true">Your - Starter Kit</h4>
<button ng-click="showchat = false">hide</button>
<button ng-click="showchat = true">show</button>
{{showchat}}
<sogettopanswerers ng-show="showchat" tag="html">
<div ng-repeat="qdata in listqdata.items track by $index" style="background-color: white;">
<div class="well" style="overflow: auto;">
<h2>
<a href="{{qdata.link}}" class="question-hyperlink">
{{qdata.title}}
</a>
<small>{{qdata.view_count}} Views</small></h2>
<contentashtml ng-init="load()" content="qdata.body">
</contentashtml>
<div style="padding:15px;display: inline-block;vertical-align: top;">
<p>Name: {{qdata.owner.display_name}}</p>
<a href="{{qdata.owner.link}}">
<img ng-src="{{qdata.owner.profile_image}}" alt="Description"/>
</a>
</div>
<div style="display: inline-block;">
<p>Created: <span am-time-ago="qdata.creation_date * 1000"></span></p>
<p>
Last Update:<span am-time-ago="qdata.last_activity_date * 1000"></span>
</p>
<p>
Answered:{{qdata.is_answered}}
</p>
</div>
<p>
Answers:{{qdata.answer_count}}
</p>
</div>
</div>
</sogettopanswerers>
</body>
</html>
Look at the line:
<sogettopanswerers ng-show="showchat" tag="html">
and see how fast the response is.
you set hide-directive="ng-show" in the formly-form
<formly-form hide-directive="ng-show"></formly-form>
"hide-directive
Allows you to control the directive used to hide fields. Common value for this might be ng-show. It will be passed !field.hide. You can also specify this on a global level using formlyConfig.extras.defaultHideDirective = 'ng-show'"
http://docs.angular-formly.com/docs/formly-form
So you can either set it as I instructed or you can choose to edit it in the config on startup for all fields
I want to build a menu something like as below but I am not finding an appropriate sample utilising AngularJS 1.4, bootstrap & accordion.
Accordion is a must. Please advise.
menu1
menu2
submenu2.1
submenu2.2
sub-submenu2.2.1
sub-submenu2.2.2
menu3
I have added the code below. Style sheet is Bootstrap.css. Also some custom stylesheet used in project. Accordion menu elements should have different colours at each level of menu. Also the one selected should be displayed in different color. When we hover over elements it should display different color.
As per the below implementation I have 2 main level elements in menu. The first element is displaying proper accordion behaviour. Second element is always open.
No stylesheet is getting applied to either of the menu elements. Please advise.
HTML:
<script type="text/ng-template" id="menuTree">
<uib-accordion-group is-open="firstMenuItemStatus.isFirstOpen" is-disabled="firstMenuItemStatus.isFirstDisabled">
<uib-accordion-heading ng-if="c.pDtos">
{{c.name}}
</uib-accordion-heading>
<div ng-repeat="p in c.pDtos" ng-include="'smenuTree'"></div>
</uib-accordion-group>
</script>
<script type="text/ng-template" id="smenuTree">
<uib-accordion-group>
<uib-accordion-heading>
{{p.name}}
</uib-accordion-heading>
<div ng-show="p.aDtos" ng-repeat="a in p.aDtos">
<a ui-sref="crhDetail({ crhId : a.crhId})">{{a.name}}</a>
</div>
</uib-accordion-group>
</script>
<div class="menuSec" ng-controller="menuCtrl">
<uib-accordion close-others="true">
<div ng-repeat="c in menuTreeSet" ng-include="'menuTree'" >
</div>
</uib-accordion>
</div>
Custom CSS:
.menuSec {top: 80px;left: 0;right: 0;bottom: 0;}
.menuSec>ul {position: absolute;background:#2166b3;width:100%;}
.menuSec>ul>li, .secondLevelList>li, .thirdLevelList>li{position: relative;float: right;display:block;list-style: none;width: 100%;height: 40px;line-height: 44px;text-align: right;font-size: 12px;padding-right: 14px;box-shadow: 0 1px 0 #3A76C4;cursor: pointer;}
.secondLevelList, .thirdLevelList{width:220px;}
.secondLevelList>li, .thirdLevelList>li{width:220px;height:30px;line-height: 32px;float: right;list-style: none;}
.selected{height:auto !important;background:#135aa9;border-left: 3px solid #000033;border-bottom:none;box-shadow:none !important;}
.secondLevelList>.selected{background:#004388;}
.menuText{position:absolute;text-align:right;right:47px;}
.menuSec ul li:hover {background: #135aa9;border-left: 3px solid #000033;}
.menuSec ul li .fa {margin-left: 14px;line-height: 40px;}
.secondLevelList, .thirdLevelList{position:relative !important;float:right;display:block;border-top:1px solid #000033;}
.secondLevelList{margin-right:-14px;}
.thirdLevelList{margin-right:-24px;}
.secondLevelList>li{background:#0a4d99;border-bottom:1px solid #2a66a9;padding-right:24px;}
.selected>.secondLevelList>li:hover{background:#004388 !important;}
.secondLevelList>li:hover{background:#003b78;}
.thirdLevelList>li{background:#004388;border-bottom:1px solid #18589f;padding-right:34px;}
.thirdLevelList>li:hover{background:#003871 !important;}
.thirdLevelList>.selected, .thirdLevelList>.selected:hover{padding-right:10px;background-image:url(../images/NowWeAt.png) !important;background-position:right !important;background-repeat:no-repeat !important;}
.menuSecCT{width:80px;overflow:hidden;}
.menuSecCT .menuText{display:none;}
.menuSec ul li{padding-right:34px;}
.secondLevelList, .thirdLevelList{display:none;}}
Here is an example of multi-level (3 levels) UI Bootstrap accordion. You have to adapt to your needs.
This example is based on ng-include:
<script type="text/ng-template" id="menuTree">
<uib-accordion-group>
<uib-accordion-heading ng-if="menu.listChilds">
{{menu.label}}
</uib-accordion-heading>
<div ng-repeat="submenu in menu.listChilds" ng-include="'smenuTree'"></div>
</uib-accordion-group>
</script>
<script type="text/ng-template" id="smenuTree">
<uib-accordion-group>
<uib-accordion-heading >
{{submenu.label}}
</uib-accordion-heading>
<div ng-show="submenu.listChilds" ng-repeat="item in submenu.listChilds">
{{item.label}}
</div>
</uib-accordion-group>
</script>
<div ng-controller="MenuController">
<uib-accordion close-others="oneAtATime">
<div ng-repeat="menu in items" ng-include="'menuTree'"></div>
</uib-accordion>
</div>
http://plnkr.co/edit/ERURCsdvjhts1ujkYTrz?p=preview
I am using the flexslider with angularjs, so the examples form the website with jquery are not really helpful. So I have implemented the slider:
HTML
<div>
<flex-slider flex-slide="image in product.imagePaths track by $index" animation="slide" control-nav="thumbnails">
<li data-thumb="{{imagesUrl}}{{image.thumbnail}}">
<img ng-src="{{imagesUrl}}{{image.custom}}">
</li>
</flex-slider>
</div>
in the js I get an array of objects that consist of three strings each(paths for original, custom size and thumb)
and have overwritten CSS for size:
.flexslider {
width: 400px;
height: 400px;
}
.flexslider .slides img {
width: 400px;
height: 400px;
}
.flex-direction-nav a {
line-height: 40px;
}
I have 12 thumbnails, clicking them works fine, does exactly what they are supposed to do; the problem is that they are all visible, shown on three rows. I have added the requested classes:
<link rel="stylesheet" href="/Content/flexslider/flexslider.css" />
and scripts:
<script src="/Scripts/jquery-2.1.3.js"></script>
<script src="/Scripts/jquery.flexslider.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-flexslider.js"></script>
don't know what else to do, and I find documentation (examples) for angular very poor. Can anyone please help? spent already a day on it...
EDIT
plunker for demo: http://plnkr.co/edit/gWtik8Q3qXhQjlyjhoRD
SECOND EDIT
ok, I have found a plunker with a working carousel for thumbnails, but it basically builds two flex sliders. is this the only way? when in the example on git (https://github.com/thenikso/angular-flexslider/blob/master/examples/thumbnail-controlnav.html) they use my version? plunker: http://plnkr.co/edit/K4VBoSqCAFbr1Fps0JJr
See the Plunker I created. This is a modification of your Plunker attached. Per the implementation, jQuery or not, you need to split the images and the thumbnail. http://plnkr.co/edit/kTSQuJfi5OmOSw6cU06x?p=preview
<div id="container" ng-controller="MainCtrl">
<div class="col-sm-12">
<flex-slider slider-id="slider" flex-slide="image in prod.imagePaths track by $index" animation="fade" animation-loop="false" sync="#carousel" slideshow="false" control-nav="false" init-delay="100">
<li>
<img ng-src="{{image.custom}}">
</li>
</flex-slider>
</div>
<div class="col-sm-12">
<flex-slider slider-id="carousel" flex-slide="image in prod.imagePaths track by $index" animation="slide" animation-loop="false" item-width="210" item-margin="5" as-nav-for="#slider" slideshow="false" control-nav="false">
<li>
<img ng-src="{{image.thumbnail}}">
</li>
</flex-slider>
</div>
</div>
I am a noice programmer and new to the Ionic Framework and Angular.js. I am developing a mobile app using Ionic primarily "out of the box". But, I'd like to display an Ionic list that combines a:
checkbox
item content (e.g. string of text)
avatar (i.e. an image associated with the item)
See mockup below...
A streamlined example of the HTML markup looks like this:
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Combine Checkbox & Avatar in List</h1>
</ion-header-bar>
<ion-content>
<ul class="list">
<li class="item item-checkbox item-avatar-right">
<label class="checkbox">
<input type="checkbox">
</label>
<img src="http://placehold.it/100x100">
Item #1
</li>
<li class="item item-checkbox item-avatar-right">
<label class="checkbox">
<input type="checkbox">
</label>
<img src="http://placehold.it/100x100">
Item #2
</li>
</ul>
</ion-content>
</ion-pane>
But the page is displayed like so:
My questions:
Does the Ionic Framework support this combination (combining a checkbox and an avatar image in a list item)?
If so, what markup or code (HTML, CSS, JS) can I use to render this type of display?
You can see code with a simple example here:
Plunker Example Code
Appreciate guidance and direction from the Stackoverflow community!
I think that you won't be able to achieve that with Ionic default CSS. Maybe you should work on some css to adjust some positions due to CSS incompatibilities between these elements. However, I could reach something very close to what you showed. Put the following item in your plunker code and give it a try:
<li class="item item-avatar-right item-checkbox">
<img src="http://placehold.it/100x100">
<label class="checkbox">
<input type="checkbox">
</label>
<h2>Headline</h2>
<p>Description</p>
</li>
I was able to combine the item-avatar class with a checkbox by placing the checkbox on the right (using the item-checkbox-right class) and by overriding the min-height with 0.
My HTML:
<ion-content class="list">
<ion-checkbox class="item-avatar item-checkbox-right" ng-repeat="user in connectedUsers">
<img ng-src="{{user.picture}}">
<h2>{{user.name}}</h2>
<p>{{user.email}}</p>
</ion-checkbox>
</ion-content>
I also had to add the following CSS rule:
.item-avatar,
.item-avatar .item-content,
.item-avatar-left,
.item-avatar-left .item-content {
min-height: 0;
}
I got a result like the following:
I was working on a solution for the same problem and i came up with this css class : item-checkbox-img
Just add it to the img tag in your ion-checkbox
You can see the result in this codepen, the image is resized and its absolute position places it to the right of the item
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {});
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
.item-checkbox-img {
vertical-align: middle;
position: absolute;
top: 0px;
right: 15px;
height: 100%;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<title>Toggles</title>
<link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-list style="height: 2000px">
<ion-checkbox>ion-checkbox
<img class="item-checkbox-img" src="http://placehold.it/350x150">
</ion-checkbox>
<ion-checkbox>ion-checkbox
<img class="item-checkbox-img" src="http://placehold.it/100x100">
</ion-checkbox>
</ion-list>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<body class="layout-two-column unibet uMyAccount">
<div class="tooltip-container">
<div id="tooltip" class="tooltip tooltip-error right-center" style="top: 466px; left: 709px; display: none;">
<div class="tooltip-content gutter-3 icon icon-small icon-error">DANISH SITE SPECIFIC</div>
<div class="tooltip-pointer"></div>
<div class="tooltip-pointer-decoration"></div>
</div>
</div>
<div id="window">
<div id="container" class="lobby-theme-3">
<header id="header">
<nav id="nav-main">
<div id="no-sub-nav"></div>
<div id="main" role="main">
<div class="stack-wrap gutter-col-wrap-2">
Tried the following to get the text "DANISH SITE SPECIFIC":
//body[contains(#class,'layout-two-column unibet uMyAccount')]//div[contains(#id,'tooltip')]//div[contains(#class,'tooltip-content')]
But the above is not working when tried to get the text through .getText() call. Please help.
This code will work as a charm, keeping your code clean, and avoiding problems if you decide to insert/change the classes inside the element:
WebElement tooltip = driver.findElement(By.id("tooltip"));
String textYouNeed = tooltip.findElement(By.className("tooltip-content")).getText();
Use the below statement to get the tooltip text.
driver.findElement(By.className("tooltip-content.gutter-3.icon.icon-small.icon-error")).getText();
try this it works:)
WebElement tip = driver.findElement(By.className("tooltip-content
gutter-3 icon icon-small icon-error");
String textTip = tip.getText();
System.out.println(textTip);