I am trying to add existing division of Odoo product template in a new division. for that, I can do the "replace" of the whole division. and add my custom division.
for example, here is default Odoo template section with the div.
<section t-attf-class="container mt8 oe_website_sale" id="product_detail">
<div class="row" id="odoo_default_row">
</div>
</section>
and I wanted to add odoo_default_row div in my custom div element. like
<section t-attf-class="container mt8 oe_website_sale" id="product_detail">
<div id="my_custom_div">
<div class="row" id="odoo_default_row">
</div>
</div>
</section>
what is the best way to add existing division in the custom division despite using xpath replace?
We can replace whole div element using "replace" attribute. With these, we can freely design custom div element.
Try with following code:
<div id="odoo_default_row" position="replace">
<!-- Design your div element as per your requirement-->
</div>
NOTE:
As per my understanding with your situation is that "inside" attribute will not work.
Related
Alright, I have a item which has this class class="country" and there are 12 elements with the same class. Now I want to get a element on its value. For example Italy. And now I want to click on a link in this item. The class of the link is class="link". So basically I want to click the link of the item with the name Italy
My code at the moment:
cy.get('.country').should('have.text', 'Italy').click();
HTML
<div class="countries">
<div class="text">
<h3></h3>
<div class="country">Italy</div>
<h4>Yala</h4>
<p>test</p>
<a class="link" href="/mysite">Show details</a>
</div>
</div>
Should() is an assertion and won't select the element you want.
you probably want the contains() function.
cy.get('.country').contains('Italy').click()
Best
My issue is similar to the one here: paper-menu-button's dropdown (paper-menu) not overlaying other iron-list items, but no adequate solution is proposed there.
The problem is that I have a <paper-dropdown-menu>, which opens up correctly inside the <iron-list> item it is in, but goes underneath the following <iron-list> items:
I have a simple <paper-dropdown-menu> like this:
<paper-dropdown-menu-light class="custom" label="Languages" no-label-float>
<paper-listbox class="dropdown-content" selected="1">
<paper-item>Spanish</paper-item>
<paper-item>English</paper-item>
<paper-item>French</paper-item>
<paper-item>Sinhala</paper-item>
</paper-listbox>
</paper-dropdown-menu-light>
which is inserted into another element with an <iron-list> (which loads a JSON file with <iron-ajax>):
<iron-list id="list" items="[[bookList.books]]" as="item">
<template>
<div>
<div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]" style="z-index: 1;">
<div class="avatar">[[item.id]]</div>
<div class="pad">
<div class="primary">[[item.titleen]]</div>
<div class="shortText">[[item.slug]]</div>
<div class="longText">[[item.blurb]]</div>
<div class="languagedrop">
<language-drop></language-drop>
</div>
</div>
</div>
</div>
</template>
</iron-list>
I tried setting the z-index for each <iron-list> item to 1, but that did not work. I tried working with <iron-overlay>, but I did not manage to get that done. I'm very new to Polymer, so if anybody has a solution or workaround that would be great.
That's because iron-list is using transform: translate3d for each list item.
The workaround that I have found is working is to add z-indexto the current list item (<div class="item"></div>) on which you have the dropdown expanded, or to all items from top to bottom in descending order, programatically.
I am beginning with AsciiDoctor and I want to output HTML. I've been trying to figure out how to create custom class in divisions, I searched google, manuals etc. and couldn't find a solution. What I want to do is simply write something like this:
Type the word [userinput]#asciidoc# into the search bar.
Which generates HTML
<span class="userinput">asciidoc</span>
but I want to have div tags instead of span. Is there any way to do it or should I just use something like
+++<div class="userinput">asciidoc</span>+++ ?
I think what you need is called "role" in Asciidoctor.
This example:
This is some text.
[.userinput]
Type the word asciidoc into the search bar.
This is some text.
Produces:
<div class="paragraph">
<p>This is some text.</p>
</div>
<div class="paragraph userinput">
<p>Type the word asciidoc into the search bar.</p>
</div>
<div class="paragraph">
<p>This is some text.</p>
</div>
You have now a css selector div.userinput for the concerned div.
See 13.5. Setting attributes on an element in the Asciidoctor User Manual (you can also search for "role").
You may want to use an open block for that purpose:
Type the following commands:
[.userinput]
--
command1
command1
--
Producing:
<div class="paragraph">
<p>Type the following commands:</p>
</div>
<div class="openblock userinput">
<div class="content">
<div class="paragraph">
<p>command1</p>
</div>
<div class="paragraph">
<p>command1</p>
</div>
</div>
</div>
The advantage is it can wrap any other block and is not limited to only one paragraph like the other answer.
For slightly different use cases, you may also consider defining a custom style.
I have this view which can rotate a div element. Something like
<div class="rotatable">
<div class="front">
{{outlet front}}
</div>
<div class="back">
{{outlet back}}
<div>
</div>
Now I have this index template which contains two of these rotatable elements. Each rotatable elements has a different front and back. So it could look like this
<div id="index">
{{#rotatable}}
{{outlet front App.FrontView1}}
{{outlet back App.BackView1}}
{{/rotatable}}
{{#rotatable}}
<div>This should show up inside {{outlet front}}</div>
{{outlet back App.BackView2}}
{{/rotatable}}
</div>
This doesn't work of course, but how should this be done ?
Cheers
I guess this question was a little bit unclear. Anyway, the answer is given in this post
EmberJs: how to use connectOutlet
I was playing with angular.js the other day and I found this filter function, that angular.js provides for us.
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query">
</div>
<div class="span10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
My question is: Can I use angular.js filter on premade html elements, somehing like this.
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query">
</div>
<div class="span10">
<!--Body content-->
<ul class="phones" ng-filter:query>
<li>First element</li>
<li>Second elementy/li>
<li>Third element</li>
</ul>
</div>
</div>
</div>
Thank you for your answers!
For this kind of DOM manipulation/filtering, Angular directives ngSwitch or ngShow/ngHide are normally used.
<ul class="phones" ng-switch on="query">
<li ng-switch-when="Nexus S">First element</li>
The above would look for an exact match though (so it is not as nice as #tosh's directive). ng-switch is often used with a select drop-down, where the possible values are fixed/known.
ngShow/ngHide are probably a better match for what you are trying to do. An in-line expression or $scope function can be used to determine whether to show an element:
<li ngShow="some expression using query">First element</li>
<li ngShow="myFilter()">First element</li>
function MyCtrl($scope) {
$scope.myFilter = function() {
if($scope.query ...) { // could use RegExp() here like #tosh
return true
}
return false
}
The above does not require jQuery.
No. Your first example uses a filter - called "filter"! A filter can form part of an Angular binding expression. It is placed after a pipe character, and applies a "filter function" to the part of the expression that came before the pipe. Some filters also take additional parameters, to the right of a colon. The filter called "filter" acts on an Array (the part before the pipe, in this case phones) passing each item through a check determined by the parameter to the right of the colon. In your case, using a string variable called query, it returns an Array with any items from phones that contain the string in query.
Other examples of filters in Angular include currency, date, uppercase and orderBy. They all take an input (for example a string) returning another value (for example the uppercase version of the string) and in some cases additional configuration parameters (such as a date or currency format, or field to order by). But they only work with an input that is some value in the "data model", not directly on the content of a DOM node.
Your second example attempts to use a directive called "ngFilter". A directive is an extension to standard HTML syntax, and can be expressed as hyphenated attributes (as in this case), data- attributes (data-ng-filter), namespaced attributes (ng:filter), css classes, etc. Angular's default directives have the prefix "ng". But there is no such directive as "ngFilter" in Angular. Your example will load fine, but there will be no effect on the DOM processing from adding this non-existent directive.
I do not think that is part of the default directive, but
that's interesting task.
I tried to implement with a custom directive. http://plnkr.co/edit/TOGbtq
app.directive('ngFilter', function() {
return {
link: function(scope, element, attr) {
scope.$watch(attr.ngFilter, function(q){
$(element).children().each(function(i,a){
$(a).toggle((new RegExp(q)).test($(a).text()));
});
});
}
};
});