I can't find anything that is similar to knockout's "with" binding in kendo.
Essentially I would like to be able to set the context of a particular area of my html so that I don't have to keep referencing child properties of my observable.
From the ko docs.
<h1 data-bind="text: city"> </h1>
<p data-bind="with: coords">
Latitude: <span data-bind="text: latitude"> </span>,
Longitude: <span data-bind="text: longitude"> </span>
</p>
Whereas in kendo I'd have to go
<h1 data-bind="text: city"> </h1>
<p>
Latitude: <span data-bind="text: coords.latitude"> </span>,
Longitude: <span data-bind="text: coords.longitude"> </span>
</p>
There isn't any direct equivalent of the with binding in Kendo.
As a workaround you can use the source binding which is like the simple template binding in KO:
<h1 data-bind="text: city"> </h1>
<p data-template="template" data-bind="source: coords">
<script id="template" type="text/x-kendo-template">
Latitude: <span data-bind="text: latitude"> </span>,
Longitude: <span data-bind="text: longitude"> </span>
</script>
</p>
Related
I want to optimize the space and be a little more tidy.
For this I wanted to put in the header the info of the company and that of the client.
being the following provision:
LOGO | my company | partner
The part of the logo I have been able to dimension and that of my company it is easy because it will never change, I can write it by hand and it is always repeated, but the client part, I do not know how to complete it with "t-fields"
Anyone know a manual or give me a hand to know the fields I need.
thank you!
As I can see you need header in three part so use given template.
<template id="custom_layout_header" inherit_id="report.external_layout_header">
<div class="header" position="replace">
<div class="header">
<style>
.bottom-bt{border-bottom: 1px solid black;}
</style>
<div class="row">
<div class="col-xs-3" style="margin-top:25px;">
<img t-if="company.logo" t-att-src="'data:image/png;base64,%s' % company.logo" style="max-height: 45px;"/>
<br/>
</div>
<div class="col-xs-6">
<center><b>
<h3><span t-esc="company.name"/></h3>
</b>
<p>
<span t-esc="company.street"/><span t-esc="company.street2"/>
<br/><span t-esc="company.city"/>,<span t-esc="company.zip"/>,<span t-esc="company.state_id.name"/>,<span t-esc="company.country_id.name"/>
</p></center>
</div>
<div class="col-xs-2">
<span t-field="company.rml_header1"/>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<p class="text-left">your partnerfields<span t-esc="yourpartnerfield"/></p>
</div>
</div>
<div class="row zero_min_height">
<div class="col-xs-12">
<div class="bottom-bt"></div>
</div>
</div>
</div>
</div>
</template>
good evening everyone
recently i have use Bulma framework and now i want to try design my theme in RTL mode , I've install all the required thing like bulma rtl and ... , but when i try to use it export that show in browser is like the below image , I've tried use body direction but it doesn't work, and one more thing i use laravel and install all of this with npm
and here is my code :
<nav class="navbar " role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-
target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
<nav class="navbar is-dark " role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-
target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
Now Bulma framework (from version : 0.9.0) supports RTL languages.
You do not need to do anything special.
Just download new version of Bulma and use Bulma-rtl.css file.
Example on codepen
after apply bulma-rtl, you have to make this class and add that to your navbar,navbarBasicExample and navbar-start classes.
.flex-direction-row{
flex-direction: row;
};
like this
hope help you.
If you are using ReactJs
Check Bluma framework version . Your version >= 0.90
In the Index.js file imports you must use bluma-rtl.min.css :
By default :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bulma/css/bulma.min.css';
ReactDOM.render( <App/> , document.getElementById('root') );
Change to:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bulma/css/bulma-rtl.min.css';
ReactDOM.render( <App/> , document.getElementById('root') );
add dir="rtl" to the innermost html tag that includes RTL text
example:
<div class="columns is-mobile">
<div class="card">
<div class="card-content">
<div class="content is-large">
<p dir="rtl">
یه متن به زبان فارسی
</p>
</div>
</div>
</div>
</div>
I'm trying to hover the mouse over a given element so that the help balloon appears. I need help finding the element to take action on.
I'm new with protractor. I have the docs in front of me and I've also reviewed many SO postings regarding protractor and element finding. By and large I'm doing ok, but I have one that's a bit complicated and eluding my newb ability.
I've tried many variations of by.className(), by.css() and either it finds multiple elements, or None. The acp-help-circle appears 6 times in the given UI. I'm only sharing a snippet of the code (for brevity sake of course).
<ng-include src="'OtherSettingsTemplate'" class="ng-scope"><div class="nok-content-panel panel panel-default ng-scope ng-isolate-scope" is-collapsed="true">
<div class="panel-heading ng-scope util-clickable" ng-class="{'util-clickable':contentPanel.collapsable}" ng-click="contentPanel.headerClick($event);">
<i ng-show="contentPanel.collapsable" class="toggle-icon icon-states acp-caret-bottom" ng-class="{'acp-caret-bottom' : !contentPanel.isCollapsed, 'acp-caret-right': contentPanel.isCollapsed}" style=""></i>
<b class="ng-binding ng-scope">Other</b>
<div class="right ng-scope">
<i class="acp-help-circle ng-scope" popover-placement="left" popover-trigger="'hovertooltip'" uib-popover-html="'Doc Control and Doc Manager cannot be enabled at the same time for the same configuration. Please only enable the feature used within your Licensed Property Manager configuration.'" nok-popover="Doc Control and Doc Manager cannot be enabled at the same time for the same configuration. Please only enable the feature used within your Licensed Property Manager configuration."></i>
</div>
</div>
<div class="panel-collapse ng-scope in collapse" uib-collapse="contentPanel.isCollapsed" style="" aria-expanded="true" aria-hidden="false">
<div class="panel-body">
<div class="content-wrapper">
<form name="editApp.otherSettingsForm" class="otherSettingsForm ng-pristine ng-valid ng-scope" novalidate="">
<fieldset>
<div class="fieldsRow">
<div class="col-title">
<span class="label ng-binding">Document Control</span>
</div>
<div class="col-lef">
<nok-switch-button ng-model="editApp.configuration.otherSettings.dcEnabled" size="medium" is-disabled="editApp.configuration.otherSettings.docManagerEnabled && !editApp.configuration.otherSettings.dcEnabled" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty"><div class="switch-button medium switch-button-off" ng-click="switchButton.toggleSwitch()" ng-class="{'switch-button-on': switchButton.on,
'switch-button-off': !switchButton.on,
disabled: switchButton.isDisabled,
readonly: switchButton.isReadonly}" style="">
<div class="switch-button-container">
<span translate="components.switch-button.onLabel" translate-values="" class="ng-scope">On</span>
<label>
<span></span>
<span></span>
<span></span>
</label>
<span translate="components.switch-button.offLabel" translate-values="" class="ng-scope">Off</span>
</div>
</div>
</nok-switch-button>
</div>
<div class="col-right">
</div>
</div>
<div class="fieldsRow">
<div class="col-title">
<span class="label ng-binding">Inky</span>
</div>
<div class="col-lef">
<nok-switch-button ng-model="editApp.configuration.otherSettings.inkyEnabled" size="medium" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty"><div class="switch-button medium switch-button-off" ng-click="switchButton.toggleSwitch()" ng-class="{'switch-button-on': switchButton.on,
'switch-button-off': !switchButton.on,
disabled: switchButton.isDisabled,
readonly: switchButton.isReadonly}" style="">
<div class="switch-button-container">
<span translate="components.switch-button.onLabel" translate-values="" class="ng-scope">On</span>
<label>
<span></span>
<span></span>
<span></span>
</label>
<span translate="components.switch-button.offLabel" translate-values="" class="ng-scope">Off</span>
</div>
</div>
</nok-switch-button>
</div>
<div class="col-right">
</div>
</div>
<div class="fieldsRow p-t-10">
<div class="col-title">
<span class="label ng-binding">Doc Manager</span>
</div>
<div class="col-lef">
<nok-switch-button ng-model="editApp.configuration.otherSettings.docManagerEnabled" size="medium" is-disabled="editApp.configuration.otherSettings.dcEnabled && !editApp.configuration.otherSettings.docManagerEnabled " class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty"><div class="switch-button medium switch-button-off" ng-click="switchButton.toggleSwitch()" ng-class="{'switch-button-on': switchButton.on,
'switch-button-off': !switchButton.on,
disabled: switchButton.isDisabled,
readonly: switchButton.isReadonly}" style="">
<div class="switch-button-container">
<span translate="components.switch-button.onLabel" translate-values="" class="ng-scope">On</span>
<label>
<span></span>
<span></span>
<span></span>
</label>
<span translate="components.switch-button.offLabel" translate-values="" class="ng-scope">Off</span>
</div>
</div>
</nok-switch-button>
</div>
<div class="col-right">
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</ng-include>
Just a few of the many iterations I've tried...
element(by.className('acp-help-circle')) //finds > 1. The class is not unique.
element(by.cssContainingText('Doc Control and Doc Manager cannot be enabled at the same time for the same configuration. Please only enable the feature used within your Licensed Property Manager configuration.')) //this finds none.
Any help is appreciated
If your looking for the locator, Try any of the below locator to select help balloon
const ele = element(by.css('div.panel-heading>div>i.acp-help-circle'));
const ele = element(by.css('div.right>i.acp-help-circle'));
const ele = element(by.css('div.panel-heading>div>i'));
If you still get more than one element. Then try the below one
const ele = element.all(by.css('div.panel-heading>div>i.acp-help-circle')).get(1); //Change the index as per the index of your element in the element array.
Hope it helps you
Fist of all I am new to css/javascript/bootstrap.
All I want is to place this code:
<i class="fi-guide-dog"></i>
inside my span (or somewhere) so the dog icon shows next to the "Dog" word.
Please find my code below:
{%load static%}
<link rel="stylesheet" type="text/css" href="{% static 'toarnatot/style.css' %}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle= "collapse" data-target ="#topnavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href={%url 'toarnatot:home'%}><strong>ToarnaTot</strong></a>
</div>
<!-- items -->
<div class="collapse navbar-collapse">
<ul class ="nav navbar-nav">
<li class="">
<a href="{% url 'toarnatot:home'%}">
<span class="glyphicon glyphicon-something" aria-hidden="true">
Dog
</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
Do not put anything inside the span tag , instead create another tag to print the text that you want to display with the glyphicon.
like:
<p>dog</p>
<span class="glyphicon glyphicon-something" aria-hidden="true"></span>
I am a newbie to ionic framework and I am using the carousel from this link "http://www.gajotres.net/how-to-create-elegant-slider-carousel-in-ionic-framework/".
I have to change the content of page according to the slides of carousel.
Here it is, may be it would help you :)
<div id="miniMizedCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div id="textViewer" class="fluidMedia">
<div ng-switch-when="VIDEO" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<div xyz-video videocode="videoCode">
</div>
</div>
<div id="quizViewer" ng-switch-when="QUIZ" ng-bind="lessonContent">
</div>
<div id="Div2" class="fsContentArea" ng-switch-when="TEXT" ng-bind="lessonContent">
</div>
<div id="htmlViewer" class="lessonContentArea" ng-switch-when="HTML" ng-bind-html="lessonContent">
</div>
<div ng-switch-when="HTMLACTIVITY" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="htmlActivity" ng-src="{{lessonContent}}">
</iframe>
</div>
<div ng-switch-when="PDF" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="pdfViewer" ng-src="{{lessonContent}}" frameborder="0">
</iframe>
</div>
<div ng-switch-when="PPT" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="pptViewer" ng-src="{{lessonContent}}" frameborder="0">
</iframe>
</div>
</div>
</div>
</div>
<a class="left carousel-control {{carouselLeftBar}}" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" ng-click="ShowPrevLesson()">
</span><span class="sr-only">Previous</span> </a>
<a class="right carousel-control {{carouselRightBar}}"
role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right right-arrow"
aria-hidden="true" ng-click="ShowNextLesson()"></span><span class="sr-only">Next</span>
</a>
</div>