I have a PDF report, using qWeb in Odoo (v8). My report has this line of code:
<t t-call="report.external_layout">
This line I suppose is for inserting the predefined header in the PDF report. In Settings -> Companies, tab Report Configuration in respective company, there is something like this:
<header>
<pageTemplate>
<frame id="first" x1="1.3cm" y1="3.0cm" height="21.7cm" width="19.0cm"/>
<stylesheet>
<!-- Set here the default font to use for all <para> tags -->
<paraStyle name='Normal' fontName="DejaVuSans"/>
<paraStyle name="main_footer" fontSize="8.0" alignment="CENTER"/>
<paraStyle name="main_header" fontSize="8.0" leading="10" alignment="LEFT" spaceBefore="0.0" spaceAfter="0.0"/>
</stylesheet>
<pageGraphics>
<!-- Set here the default font to use for all <drawString> tags -->
<setFont name="DejaVuSans" size="8"/>
<!-- You Logo - Change X,Y,Width and Height -->
<image x="1.3cm" y="27.7cm" height="40.0" >[[ company.logo or removeParentNode('image') ]]</image>
<fill color="black"/>
<stroke color="black"/>
<!-- page header -->
<lines>1.3cm 27.7cm 20cm 27.7cm</lines>
<drawRightString x="20cm" y="27.8cm">[[ company.rml_header1 ]]</drawRightString>
<drawString x="1.3cm" y="27.3cm">[[ company.partner_id.name ]]</drawString>
<place x="1.3cm" y="25.3cm" height="1.8cm" width="15.0cm">
<para style="main_header">[[ display_address(company.partner_id) or '' ]]</para>
</place>
<drawString x="1.3cm" y="25.0cm">Phone:</drawString>
<drawRightString x="7cm" y="25.0cm">[[ company.partner_id.phone or '' ]]</drawRightString>
<drawString x="1.3cm" y="24.6cm">Mail:</drawString>
<drawRightString x="7cm" y="24.6cm">[[ company.partner_id.email or '' ]]</drawRightString>
<lines>1.3cm 24.5cm 7cm 24.5cm</lines>
<!-- left margin -->
<rotate degrees="90"/>
<fill color="grey"/>
<drawString x="2.65cm" y="-0.4cm">generated by Odoo.com</drawString>
<fill color="black"/>
<rotate degrees="-90"/>
<!--page bottom-->
<lines>1.2cm 2.65cm 19.9cm 2.65cm</lines>
<place x="1.3cm" y="0cm" height="2.55cm" width="19.0cm">
<para style="main_footer">[[ company.rml_footer ]]</para>
<para style="main_footer">Contact : [[ user.name ]] - Page: <pageNumber/></para>
</place>
</pageGraphics>
</pageTemplate>
</header>
I changed some lines in order to print the header just like I need it. When I press button Preview Header/Footer, it shows everything just like I typed it, but I doesn't work when I print the report: header is still printed like it was by default. Some threads in forums say to uncheck the Reload from Attachment checkbox... in my case, it always has been unchecked.
As you can see, header is typed in RML form, and my report is in qWeb... Is this a problem? If it is it, how to fix it?
So, how to edit (... and make it to work ...) the PDF report default header???
Thanks in advance.
To define your custom header in qweb report by giving a header class to div tab like
<template id="your_custom_layout_header">
<div class="header">
<div class="row">
<div class="col-xs-3">
<img t-if="company.logo" t-att-src="'data:image/png;base64,%s' % company.logo" style="max-height: 45px;"/>
<!-- All your custom code here -->
</div>
</div>
</div>
<div class="footer">
<div class="row">
<!-- All your custom code here -->
</div>
</div>
</template>
Hear In Qweb there are Two different classes for set the custom header and Footer in div tag can directly set the custom header set as the header class in div and footer class set as the footer in div tag.important think is that we do not add any external or internal header and footer in your view file Just add the below tag.
<div class="header">
<div class="row" style="border-bottom: 1px solid black;">
<div class="col-xs-3">
<img t-if="company.logo" t-att-src="'data:image/png;base64,%s' % company.logo" style="max-height: 45px;"/>
<div t-field="company.partner_id"
t-field-options='{"widget": "contact", "fields": ["address", "name"], "no_marker": true}' />
</div>
<div class="col-xs-5 pull-right" style="margin-top:5px;">
<t t-if="company.vat">
<b>GST ID :</b>
<span t-field="company.vat" /><br/>
</t>
<t t-if="company.phone">
<b>PHONE :</b>
<span t-field="company.phone" /><br/>
</t>
<t t-if="company.fax">
<b>FAX :</b>
<span t-field="company.fax" /><br/>
</t>
<t t-if="company.email">
<b>EMAIL :</b>
<span t-field="company.email" /><br/>
</t>
<t t-if="company.website">
<b>WEBSITE :</b>
<span t-field="company.website" />
</t>
</div>
</div>
</div>
<div class="footer">
<div class="text-center" style="border-top: 1px solid black;">
<ul class="list-inline">
<li>Page:</li>
<li><span class="page"/></li>
<li>/</li>
<li><span class="topage"/></li>
</ul>
</div>
</div>
header and footer class automatically set the custome header and footer for that report in Qweb.
The code which I showed off you which is working fine from my side.
I hope this should helpful for you ..:)
Related
I'm using vue-slick-carousel in my app. I have the following code:
<template>
<div id="app">
<div class="banner-container">
<div>
<VueSlickCarousel v-bind="settings">
<div v-for="item in items" :key="item.id">
<!-- ALTERNATIVE 1 (WORKS) -->
<div>
<a href="abc" target="_blank">
<img id="picture1" src="./assets/carouse-item.png" />
<div class="position-relative">
<div class="banner-description">
<span class="banner-title">
<a v-bind:href="'#'" class="header-anchor">#</a>
TITLE<br />
</span>
<span class="banner-alternative-text">
<a v-bind:href="'#'" class="header-anchor">#</a>
DESCRIPTION<br />
</span>
</div>
</div>
</a>
</div>
<!-- ALTERNATIVE 2 (DOESN'T WORK) -->
<!-- <Child :item="item"/> -->
</div>
</VueSlickCarousel>
</div>
</div>
</div>
</template>
There are 2 alternatives. Alternative 1 works fine:
Alternative 2 is basically the code under Alternative 2 extracted into a new component - Child. It produces this output:
I can't understand why just extracting the part of code into a new component changes the layout like that.
The source code of the app is available at https://github.com/marcinjahn/vue-carousel-issue.
One of the web pages is showing products using databind:foreach
Here is the piece of code
<div class="product-list">
<ul data-bind="foreach: products">
<li>
<div class="product-summary">
<div class="photo">
<a data-bind="attr:{href: Link}">
<img data-bind="attr:{src: SummaryImageUrl, title: DisplayName}" alt="product image" />
</a>
</div>
<div class="product-info">
<h4 class="product-title" data-bind="attr:{title: DisplayName}">
<a data-bind="attr:{href: Link}, text: DisplayName"></a>
</h4>
<!-- ko if: Brand-->
<div data-bind="html: Brand" class="product-brand"></div>
<!-- /ko-->
<!-- ko ifnot: Brand-->
<div class="product-brand"> </div>
<!-- /ko -->
I want to show a message if there is no product.Hence, added a line as below:
<div data-bind="visible:products().length==0">
No product(s) found.
</div>
<div class="product-list">
<ul data-bind="foreach: products">
<li>
Now when page is loading, it shows No products found and then hides it and renders whole products
Could you please help?
The problem is when the data for the products is loaded compared to when it gets rendered on to the screen. I imagine what is happening is that there is a process to retrieve the products from the server, while that is happening the screen is rendered and bound to the view model, resulting in the No Products Found being displayed. then at some unspecified time later the products get loaded and the screen gets updated with the new data. I think what you probably need is a flag to indicate when a search is being performed, and when its finished. this will allow you to show and hide the rendering of the results when the results are known.
<div data-bind="visible: showResults">
<div data-bind="visible:products().length==0">
No product(s) found.
</div>
<div class="product-list">
<ul data-bind="foreach: products">
<li></li>
</ul>
</div>
</div>
I would created an observable flag to notify if data is loaded and then wrap your html in ko virtual binding as shown in following code snippet.
function viewModel() {
var self = this;
self.products = ko.observableArray([]);
self.isDataLoaded = ko.observable(false);
self.loadData = function(){
setTimeout(function(){
self.products.push({name:"A"});
self.products.push({name:"B"});
self.products.push({name:"C"});
self.products.push({name:"D"});
self.isDataLoaded(true);
}, 2000);
}
}
var vm = new viewModel();
vm.loadData();
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--ko if:isDataLoaded-->
<div class="product-list">
<ul data-bind="foreach: products">
<li data-bind="text:name"></li>
</ul>
</div>
<div data-bind="visible:products().length==0">
No product(s) found.
</div>
<!-- /ko -->
I'm really not getting why my <h:commandbutton> wont work.
If I put the same commandbutton outside of the navbar, it works. the button becomes white if I hover over it. My code is the following:
<nav class=" navbar nav-bottom">
<img class="nav-item navbar-picture" src="#{resource['images/logo.gif']}" />
<img class="nav-item nav-logo-text" src="#{resource['images/retailsonar.svg']}" />
<div class="topnav-right">
<div style="float:left; margin-top:5px">
<h:outputText class="navbar-text" id="welkom" value="Welkom, #{userBean.getNaam()}"/>
</div>
<div style="float:right">
<h:form>
<h:commandButton class="btn-navbar" action="#{userBean.logout()}" value="logout" />
</h:form>
</div>
</div>
</nav>
<!-- navbar einde -->
<div class="vertical-center-full-page">
<center class="vertical-center">
<h:form>
<h:commandButton class="btn-navbar" action="#{userBean.logout()}" value="logout" />
</h:form>
the button in the navbar wont work
the button on the main screen does work, I can log out by clicking on it
I'm implementing a Jumbotron element like this:
<div className="jumbotron">
<div>
<h6 className="display-6">Reset Password</h6>
<p className="lead">We've just emailed you password reset instructions at <u>{this.email && this.email}</u></p>
<hr className="my-4" />
</div>
</div>
Unfortunately, the content overflows the jumbotron, like this:
How do I fix this?
EDIT: Here's another one. The compiled HTML appears like this in my browser:
<div class="container">
<div class="jumbotron">
<h6 class="display-6">Activate account</h6>
<p class="lead"><!-- react-text: 215 -->Please confirm the verification code we've just emailed you at <!-- /react-text --><u>b_kogan#hotmail.com</u></p>
<button class="btn btn-primary">Resend email verification code</button>
</div>
</div>
And, again, it's overflowing:
Here is a quick example of what you have in your HTML and with using bootstrap 4 and everything looks as expected,I think you have different style applied or this is not the rendered html on the browser.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div>
<h6 class="display-6">Reset Password</h6>
<p class="lead">We've just emailed you password reset instructions at <u>{this.email && this.email}</u></p>
<hr class="my-4" />
</div>
</div>
I have a list of items in one of my view.
I can only fit up to 6 items, and it's laid out like this:
I used class="col-md-2" for each one.
When I have more than 6, it just simply go down to the another row.
I don’t want that. You can see it here.
Now, if the list has 6 or more items,
list them horizontally
show the big > so that the users will know that there is more
show the 2 dots in the middle
Edit
This is what I got so far. I used Larval 4 so this syntax is in HTML/Blade.
#foreach ( MarketingMaterialCategory::all() as $mmc )
<h2><i class="fa fa-file-image-o color lighter"></i> {{{ $mmc->name or '' }}} <small> </small></h2>
<div class="row">
#foreach ( MarketingMaterial::where('marketing_materials_category_id','=', $mmc->id )->get() as $marketing_material)
<div class="col-md-2" >
<!-- Shopping items -->
<div class="shopping-item">
<!-- Image -->
<div class="col-sm-12 imgbox" >
<!-- <span class="col-sm-6"></span> -->
<img class="col-sm-12 pull-right" width="200" src="/marketing_materials/{{$marketing_material->id}}/download/thumb_path" alt="" />
</div>
<!-- Shopping item name / Heading -->
<h6>{{{ $marketing_material->title or '' }}}<span class="color pull-right">{{ FileHelper::formatBytes($marketing_material->media_size,0) }}</span></h6>
<!-- Shopping item hover block & link -->
<div class="item-hover bg-color hidden-xs">
Download
</div>
</div>
</div>
#endforeach
</div>
<hr>
#endforeach
Can someone help me how to resolve this ?
Bootstrap doesn't support that kind of scrolling. However, I have used this JavaScript library in the past and it does pretty much exactly what you want: Slick.js
It is very flexible and it will only show the scrolling options if it can't display all the contents on the page.
If you use it though, do not use the bootstrap col-md-2 classes, just set a manual width.