How to make a QWeb report widget? - odoo

I'm trying to create a simple Qweb widget. My code is like this
<template id="contact_name">
<address t-ignore="true" class="mb0" itemscope="itemscope" itemtype="http://schema.org/Signature">
<div t-att-class="'name' not in fields and 'css_non_editable_mode_hidden'">
<span itemprop="name" t-esc="name"/>
</div>
</address>
</template>
Then I called the widget like this
<address t-field="o.partner_id" t-field-options='{"widget": "contact_name", "fields": ["name"], "no_marker": true}' />
It did not print out name but print out the object res.partner(703,)
How is it to print the name? Is it not enough to just to use <span itemprop="name" t-esc="name"/>?

<div class="page">
<div class="oe_structure"/>
<div class="col-xs-6 pull-left">
<h2 style="color:red">
<span>Plan Order :
<span style="color:Red" t-field='doc.name'/>
</span>
</h2>
</div>
<div colspan="4" class="col-xs-6 text-right">
<span>
<img t-att-src="'/report/barcode/?type=%s&value=%s&width=%s&height=%s' % ('Code128', doc.name, 500, 50)"
style="width:100%;height:50px"/>
</span>
</div>

Related

Images inside Paginator in Angular 8

Does anybody know how to put images inside a paginator ?
https://www.primefaces.org/primeng/v8.2.9-lts/#/paginator
**Instead of this** :
<div class="sticky-header">
<div class="p-grid p-align-center" style="color: #007ad9;">
<!--<div class="p-col-2 p-hidden-sm-down">
Help Step
</div>-->
<p-dataView [value]="helps" [paginator]="true" [rows]="1">
<ng-template let-help pTemplate="listItem">
<div>
{{help.Title}}
</div>
</ng-template>
</p-dataView>
</div>
<div class="p-grid p-align-center" class="p-col-12" style="color: #007ad9;">
**<img src="/assets/images/Language.jpg" alt="Trash Button">**
</div>
<hr />
</div>
Use this :
<div class="sticky-header">
<div class="p-grid p-align-center" style="color: #007ad9;">
<!--<div class="p-col-2 p-hidden-sm-down">
Help Step
</div>-->
<p-dataView [value]="helps" [paginator]="true" [rows]="1">
<ng-template let-help pTemplate="listItem">
<div>
{{help.Title}}
**<img src="/assets/images/Language.jpg" alt="Trash Button">**
</div>
</ng-template>
</p-dataView>
</div>
<div class="p-grid p-align-center" class="p-col-12" style="color: #007ad9;">
</div>
<hr />
</div>

V-if And V-else aren't working how I want it to. i want to hide one section when the other section is true

I want to hide one section when the other section is true, but I'm not sure if I'm using v-if and v-else in the right way. I tried rearranging the divs with the v-if but no combination I tried works for hiding the div in the way I want.
<template>
<section id="whiteClawVideo" class="videoWrapper d-block w-100">
<div class="video-container fluid">
<iframe width="100%" height="600" src="https://www.youtube.com/embed/JORN2hkXLyM?autoplay=1&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
<form #submit.prevent="SearchMovies()" class="search-box">
<input type="text" placeholder="What are you looking for? " v-model="search" />
<input type="submit" value="Search">
</form>
<div class="movies-list" v-if="search.value !=''" >
<div class="movie" v-for="movie in movies" :key="movie.imdbID">
<router-link :to="'/movie/'+movie.imdbID" class="movie-link">
<img :src="movie.Poster" alt="Movie Poster" />
<div class="type">{{ movie.Type }}</div>
<div class="detail">
<p class="year">{{movie.Year}}</p>
<h3>{{ movie.Title }}</h3>
<p>{{movie.imdbID}}</p>
</div>
</router-link>
</div>
</div>
<div class="container" v-else>
<MovieSection />
<SecondMovieSection />
</div>
Change your v-if to just search !== '' since that's your model

Boostrap 3 - thumbnail images alignment problem

how to align them in a row with equal height.
<div id="about-page-contain">
<div class="">
<div class="row equal">
<div class="wwd">
<div class="col-md-12">
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/plots">
<img src="/public/uploadfiles/images/be71f72e-b2e6-4dab-8dd4-8bc4d48365b8.jpg" alt="PLOTS" style="">
<div class="caption" style="text-align:center;">
<p>PLOTS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/flats">
<img src="/public/uploadfiles/images/ff74dcc3-71b4-4d35-b53b-77c6c36a0947.jpg" alt="FLATS" style="">
<div class="caption" style="text-align:center;">
<p>FLATS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/farm-land">
<img src="/public/uploadfiles/images/06fdde52-b169-45eb-a96a-ec1dd07f15e5.jpg" alt="FARM LAND" style="">
<div class="caption" style="text-align:center;">
<p>FARM LAND</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/development-sites">
<img src="/public/uploadfiles/images/45d18935-9220-41ed-8f58-4aa3a16be8a8.jpg" alt="DEVELOPMENT SITES" style="">
<div class="caption" style="text-align:center;">
<p>DEVELOPMENT SITES</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/development-lands-for-plots">
<img src="/public/uploadfiles/images/d85c0a59-2d35-4f24-830b-8cfe606f8caf.png" alt="DEVELOPMENT LANDS FOR PLOTS" style="">
<div class="caption" style="text-align:center;">
<p>DEVELOPMENT LANDS FOR PLOTS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/independent-houses">
<img src="/public/uploadfiles/images/5d265aad-31ef-4285-94a3-3aaeb0111e7a.jpg" alt="INDEPENDENT HOUSES" style="">
<div class="caption" style="text-align:center;">
<p>INDEPENDENT HOUSES</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/outrate-lands-for-appt-&-plots">
<img src="/public/uploadfiles/images/8d3cfcec-5415-422c-8426-665271216009.jpg" alt="OUTRATE LANDS FOR APPT & PLOTS" style="">
<div class="caption" style="text-align:center;">
<p>OUTRATE LANDS FOR APPT & PLOTS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/commercial-properties">
<img src="/public/uploadfiles/images/707cc088-4383-4423-8172-2fb2d9efa46d.jpg" alt="COMMERCIAL PROPERTIES" style="">
<div class="caption" style="text-align:center;">
<p>COMMERCIAL PROPERTIES</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/independent-villas-in-prime-locations">
<img src="/public/uploadfiles/images/c2a9b09c-94bd-43ee-92ae-db4c587dd8eb.jpg" alt="INDEPENDENT VILLAS IN PRIME LOCATIONS" style="">
<div class="caption" style="text-align:center;">
<p>INDEPENDENT VILLAS IN PRIME LOCATIONS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/construction-contract">
<img src="/public/uploadfiles/images/5f253c56-7f4d-4e61-9359-f5b2f7748443.jpg" alt="CONSTRUCTION CONTRACT" style="">
<div class="caption" style="text-align:center;">
<p>CONSTRUCTION CONTRACT</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
There are a few issues here:
You have a class of wwd that we cannot see. Is that applying some styles of some sort?
Each image has a blank style="" class. Why is that there?
If I remove the link to the bootstrap styles I do not see any difference in applied styles.
the image sizes of your images can affect the layout and there are no actual links to the image so it makes it difficult to reproduce. Include the full links in your example to make it easier to reproduce.
I created a codepen with a fake image but I don't see the issue you are seeing.
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/flats">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt="DEVELOPMENT SITES" style="" width="100px">
<div class="caption" style="text-align:center;">
<p>FLATS</p>
</div>
</a>
</div>
</div>
How about this example?
<div class = "row">
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt = "Generic placeholder thumbnail" width="100px">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt = "Generic placeholder thumbnail" width="100px">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt = "Generic placeholder thumbnail" width="100px">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt = "Generic placeholder thumbnail" width="100px">
</a>
</div>
</div>

this code i'm using in not a mobile responsive

This is what i am using bootstrap 3.3.1 this code is not mobile friendly kindly look into. when i open in mobile all content gets small instead of convert into grids.please tell me what do to make it mobile responsive..
This is what i am using bootstrap 3.3.1 this code is not mobile friendly kindly look into. when i open in mobile all content gets small instead of convert into grids.please tell me what do to make it mobile responsive..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- ====================================================
header section -->
<header class="top-header" >
<div class="container">
<div class="row">
<div class="col-xs-5 header-logo">
<br>
<img src="img/logo.png" alt="" class="img-responsive logo">
</div>
<div class="col-md-7">
<nav class="navbar navbar-default">
<div class="container-fluid nav-bar">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="menu active" href="http://www.mysite" >Home</a></li>
<li><a class="menu" href="#products">our products </a></li>
<li><a class="menu" href="#contact"> contact us</a></li>
</ul>
</div><!-- /navbar-collapse -->
</div><!-- / .container-fluid -->
</nav>
</div>
</div>
</div>
</header> <!-- end of header area -->
<section class="slider" id="home">
<div class="container-fluid">
<div class="row">
<div id="carouselHacked" class="carousel slide carousel-fade" data-ride="carousel">
<div class="header-backup"></div>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/-slider.png" alt="">
<div class="carousel-caption">
<h1></h1>
<p></p>
<button>button</button>
</div>
</div>
<div class="item">
<img src="img/-slider.png" alt="">
<div class="carousel-caption">
<<h1></h1>
<p></p>
<button>button</button>
</div>
</div>
<div class="item">
<img src="img/-slider.png" alt="">
<div class="carousel-caption">
<<h1></h1>
<p></p>
<button>button</button>
</div>
</div>
<div class="item">
<img src="img/-slider.png" alt="">
<div class="carousel-caption">
<<h1></h1>
<p></p>
<button>button</button>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carouselHacked" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carouselHacked" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<br />
<div class="container" id="products">
<div class="row">
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/women-care.jpg" style="width: 140px; height: 140px;">
<h2>Women Care</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/man-power.jpg" style="width: 140px; height: 140px;">
<h2>Man Power</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/" style="width: 140px; height: 140px;">
<h2>Product Name</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
</div>
<div class="row">
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/" style="width: 140px; height: 140px;">
<h2>Product Name</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/" style="width: 140px; height: 140px;">
<h2>Product Name</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/" style="width: 140px; height: 140px;">
<h2>Product Name</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
</div>
</div>
<!-- map section -->
<section class="api-map" id="contact">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 map" id="map"></div>
</div>
</div>
</section><!-- end of map section -->
<!-- contact section starts here -->
<section class="contact">
<div class="container">
<div class="row">
<div class="contact-caption clearfix">
<div class="contact-Product Name text-center">
<h2>contact us</h2>
</div>
<div class="col-md-5 contact-info text-left">
<h3>contact information</h3>
<div class="info-detail">
<ul><li><i class="fa fa-calendar"></i><span>Monday - Sunday:</span> 24X7</li></ul>
<ul><li><i class="fa fa-map-marker"></i><span>Address:</span></li></ul>
<ul><li><i class="fa fa-phone"></i><span>Telephone:</span> </li></ul>
<ul><li><i class="fa fa-envelope"></i><span>Email:</span> info#mysite</li></ul>
</div>
</div>
<div class="col-md-6 col-md-offset-1 contact-form">
<h3>leave us a message</h3>
<form class="form">
<input class="name" type="text" placeholder="Name">
<input class="email" type="email" placeholder="Email">
<input class="phone" type="text" placeholder="Phone No:">
<textarea class="message" name="message" id="message" cols="30" rows="10" placeholder="Message"></textarea>
<input class="submit-btn" type="submit" value="SUBMIT">
</form>
</div>
</div>
</div>
</div>
</section><!-- end of contact section -->
<!-- footer starts here -->
<footer class="footer clearfix">
<div class="container">
<div class="row">
<div class="col-xs-6 footer-para">
<p><i style="color:white;">©</i> <i style="color:white;">mysite</i> All right reserved</p>
</div>
<div class="col-xs-6 text-right">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-skype"></i>
</div>
</div>
</div>
</footer>
<!-- script tags
============================================================= -->
<script src="js/jquery-2.1.1.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/gmaps.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>

How to vertically align radio buttons

I have the following markup:
<div class="container-fluid">
<h2>Transfer Options:</h2>
<div class="row well well-sm">
<div class="col-xs-6">
<div id="sendTypeRadio" class="btn-group-vertical" >
<span class="input-group-addon">
<input id="radioEmail" type="radio" name="sendType" value="email" disabled>Email
</span>
<span class="input-group-addon">
<input id="radioAttachments" type="radio" name="sendType" value="attachments" disabled>Attachments
</span>
<span class="input-group-addon">
<input id="radioBoth" type="radio" name="sendType" value="both" disabled>Email and attachments
</span>
</div><!-- /input-group -->
</div><!-- /.col-xs-6 -->
</div>
</div>
The problem is the buttons are all next to each other on the x-axis. I have been changing things for a day. Moving it out of the row tag and back in, removing almost all the formatting and such. What I want to maintain is the input-group-addon styling, but I want each button on a new row. I've searched and found nothing, any clues?
In asking my question I came up with a really crappy answer:
<div class="container-fluid">
<h2>Transfer Options:</h2>
<div class="row well well-sm">
<div class="col-xs-6">
<div id="sendTypeRadio" class="btn-group-vertical" >
<div class="row">
<div class="col-xs-2">
<span class="input-group-addon">
<input id="radioEmail" type="radio" name="sendType" value="email" disabled>Email
</span>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<span class="input-group-addon">
<input id="radioAttachments" type="radio" name="sendType" value="attachments" disabled>Attachments
</span>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<span class="input-group-addon">
<input id="radioBoth" type="radio" name="sendType" value="both" disabled>Email and attachments
</span>
</div>
</div>
</div><!-- /input-group -->
</div><!-- /.col-xs-6 -->
</div>
This gives me each item on a new row but absolutely ruins the styling of Bootstrap radio buttons