When I edit a page and view the source in a page it does not indent the code.
<p><img alt="" src="/sites/climateactionnow.ca/files/images/Canada-CO2-emissions-2018.png" style="width: 100%;" /></p><p class="rtecenter"><span style="font-size:8px;"><em>Canada per capita CO2e emissions</em></span></p>
Another site shows the source like this
<p><img alt="" src="/sites/climateactionnow.ca/files/images/Canada-CO2-emissions-2018.png" style="width: 100%;" /></p>
<p class="rtecenter"><span style="font-size:8px;"><em>Canada per capita CO2e emissions</em></span></p>
How can I fix this?
Related
I have a simple slick carousel in an Angular App, using angular-slick. Whenever I load the App for the first time (with the view that contains the slick carousel), the carousel displays correctly. However after switching to another view and returning to the carousel slick view, I get the following error:
TypeError: u.slick is not a function
the Carousel looks like this:
<div class="col-sm-6 col-sm-offset-3 mainContent">
<div style="height: 50px; margin-bottom:70px;">
<slick class="slider multiple-items slick-slider" slides-to-scroll="1" slides-to-show="3" infinite="true" speed="3000" autoplay="true" init-onload="true">
<div ng-class="slick-slide" style="width: 187px;"><h3 class="text-center">1</h3></div>
<div ng-cclass="slick-slide" style="width: 187px;"><h3 class="text-center">2</h3></div>
<div ng-cclass="slick-slide" style="width: 187px;"><h3 class="text-center">3</h3></div>
<div ng-cclass="slick-slide" style="width: 187px;"><h3 class="text-center">4</h3></div>
<div ng-cclass="slick-slide" style="width: 187px;"><h3 class="text-center">5</h3></div>
<div ng-cclass="slick-slide" style="width: 187px;"><h3 class="text-center">6</h3></div>
</slick>
</div>
</div>
Is there a reason why the (I guess) jQuery plugin gets "lost" after changing views?
Thanks
For anyone facing the same problem, I ended up using a different angular-slick directive, the one created by DevMarc (https://github.com/devmark/angular-slick-carousel), which solved the problem "auto-magically".
I have a popup, and I want to show/hide by click image or youtube video`
<img ng-show="showImage" style="width: 430px;" ng-src="{{images}}">
<div ng-show="!showImage" style="width: 430px;" >
<iframe width="430" height="321" src="{{getIframeSrc(idBitches)}}" ></iframe>
</div>
But something wrong. How can I do it?
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>
This is the below Extjs code for my webpage
<div id="dataViewPanel" class="x-panel">
<div id="ext-gen76" class="x-panel-header x-unselectable" style="-moz-user-select: none;">
<div id="ext-gen168" class="x-tool x-tool-refresh "> </div>
<div id="ext-gen164" class="x-tool x-tool-add " style="position: relative;">
<div id="ext-gen189" class=""></div>
</div>
<div id="ext-gen160" class="x-tool x-tool-edit x-item-disabled " style="position: relative;">
<div id="ext-gen188" class=""></div>
</div>
When I search with below command in the Firefox console, I can locate the correct output
window.frames['abFrame'].contentDocument.getElementById('dataViewPanel').childNodes[0].childNodes[1]
As I am new to handling of ext.js objects in Web-driver, I am unable to locate the element with class="x-tool x-tool-add and unable to click on this.
Could any one please help me with this.
I have a form that I use to post Live data that is appended to the form using Jquery. The data that is appended contains an input box containing the value of the data I want the form to post. Everything works in Chrome, Firefox and IE8 but not IE7.
Why can't IE7 post live data. What am I doing wrong is there anyway to get around this???
See code below:
<!--Start Cartbox-->
<form method="get" name="register" action="process.php">
<div id="cart" class="ui-widget-content ui-state-default">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-cart">Your Devices</span> Your Products</h4>
<ul id="cartbox" class="cart ui-helper-reset ui-helper-clearfix">
<!--EXAMPLE OF LIVE DATA-->
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">product 1</h5>
<img src="product1.png" alt="product1"/>
<input type="hidden" name="devicetype[]" value="product1" />
<div class="draggableicons">
<a style="float:left" href="#" title="<b>Product 1 ($150.00)</b><br />" class="vtip ui-icon ui-icon-info">More info...</a>
Add to cart
</div>
</li>
<!--EXAMPLE OF LIVE DATA-->
</ul>
</div>
<button class="addbutton">Add the product to your cart</button>
</form>
<!--End Cartbox-->
I don't see an ending </form> tag
I also dont think jQuery plays well with '[]' in field or id/class names