If I add a Bootstrap 3 progress bar to a Bootstrap table with table-condensed, I lose the "condensed" part of the rows (they get taller). Is there a default minimum height to a progress bar that would force table-condensed rows to be larger?
Here's an example of the behavior I'm trying to "fix":
JSFiddle: Condensed table/progress bar example
<table class='table table-condensed table-striped'>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
<br/>
<table class='table table-condensed table-striped'>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>
<div class='progress progress-striped'>
<div class="progress-bar progress-bar-warning" role="progressbar" style="width: 50%;">
Progress
</div>
</div>
</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
Bootstrap adds a margin-bottom: 20px; to its progress bar divs. Overriding that sized table rows appropriately for me.
You need to override the margin CSS property for the progress class.
.table-condensed .progress {
margin-bottom: 0 !important;
}
Add this to the head of the page as additional styles or to your css as an additional class.
Related
Having a hard time fixing my issue when rendering QWeb reports to PDF. Using the /report/html style is fine.
I need to push the TAX INVOICE # div to the very right side. Below is rendered from PDF
Rendered in PDF
In /report/html it is working fine.
Rendered in html
Using this style: style="width: auto; margin-right: 0px; margin-left: auto;" inside the div
<div class="row">
<div>
<table class="table table-sm o_main_table table-bordered" border="1">
<thead>
<tr>
<th class="text-center" colspan="2"><span>CUSTOMER</span></th>
</tr>
<tr>
<th class="text-left"><span>SHIP TO:</span></th>
<th class="text-left"><span>BILL TO:</span></th>
</tr>
</thead>
<tbody class="invoice_tbody">
<tr t-att-class="'font-weight-bold o_line_section'">
<td class="text-left"><span t-field="doc.partner_shipping_id.name" t-options="{'widget': 'text'}" /> <span t-field="doc.partner_shipping_id" t-options='{"widget": "contact", "fields": ["address", "name"], "no_marker": True}' /></td>
<td class="text-left"><span t-field="doc.partner_id.name" t-options="{'widget': 'text'}" /> <span t-field="doc.partner_id" t-options='{"widget": "contact", "fields": ["address", "name"], "no_marker": True}' /></td>
</tr>
</tbody>
</table>
</div>
<div style="width: auto; margin-right: 0px; margin-left: auto;">
<table class="table table-sm o_main_table table-bordered" border="1" style="width: 100%">
<thead>
<tr>
<th class="text-center" colspan="2">
<span>TAX INVOICE #</span>
</th>
</tr>
</thead>
<tbody>
<tr t-att-class="'font-weight-bold o_line_section text-center'">
<td colspan="2"><h3 style="color: red;"><strong><span t-field="doc.name" t-options="{'widget': 'text'}"/></strong></h3></td>
</tr>
</tbody>
</table>
</div>
</div>
Try float instead. Set float to right for the second table (div) which contains tax invoice. It will work.
I have created this table in my Qweb report and as you can see this table has borders. But how can I remove border for <tfoot element only? It should be bordered on <thead and <tbody.
Do I need to do it with custom CSS somehow?
<table style="border-color:grey;" class="table-bordered table-sm o_main_table" name="moves_table">
<thead>
<tr>
<th>No</th>
<th>Description</th>
<th class="text-center">Code</th>
<th class="text-right">Units</th>
<th class="text-right">Quantity</th>
<th class="text-right">Package quantity</th>
<th class="text-right">Net weight (kg)</th>
<th class="text-right">Weight incl. packaging</th>
<th class="text-right">Type of package</th>
</tr>
</thead>
<tbody class="invoice_tbody">
<tr t-foreach="o.move_ids_without_package" t-as="l">
<td class="text-center">
<span t-esc="l_index + 1" />
</td>
<td>
<span t-field="l.name"/>
</td>
<td>
<span t-field="l.product_id.default_code"/>
</td>
<td class="text-right">
<span t-field="l.product_uom.name"/>
</td>
<td class="text-right">
<span t-esc="'%.2f'%(l.product_uom_qty)"/>
</td>
<td class="text-right">
<span t-esc="'%.2f'%(l.product_uom_qty)"/>
</td>
<td class="text-right">
<span t-esc="'%.2f'%(l.product_uom_qty)"/>
</td>
<td class="text-right">
<span t-esc="'%.2f'%(l.product_uom_qty)"/>
</td>
<td class="text-right">
<span t-esc="'%.2f'%(l.product_uom_qty)"/>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-right"><span><strong>Total amount</strong></span></td>
<td class="text-right"><span t-esc="sum(o.move_ids_without_package.mapped('product_uom_qty'))"/></td>
<td class="text-right"><span t-esc="sum(o.move_ids_without_package.mapped('product_uom_qty'))"/></td>
<td class="text-right"><span t-esc="sum(o.move_ids_without_package.mapped('product_uom_qty'))"/></td>
<td class="text-right"><span t-esc="sum(o.move_ids_without_package.mapped('product_uom_qty'))"/></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-right"><span><strong>Total Weight</strong></span></td>
<td></td>
<td></td>
<td></td>
<td class="text-right"><span t-esc="sum(o.move_ids_without_package.mapped('product_uom_qty'))"/></td>
</tr>
</tfoot>
</table>
I suggest you do this the right way using css file, not style attributes because if you need this table, in another report you are going to repeat your self a lot and you are going to define style attribute in every td tag inside tfoo tag:
create and add css file to reports:
<template id="assets_common" name="Table no foot border" inherit_id="web.report_assets_common">
<xpath expr="." position="inside">
<link href="/your_folder_name/static/src/css/table_report_css.css" rel="stylesheet"/>
</xpath>
</template>
In your table_report_css.css file use a special class to distinct your table no-footer-border and gray-border to make border gray:
/* notice the table should have this two class */
.table-bordered.gray-border {
border-color:grey;
}
/* hide tr border inside tfoo I think this is not needed */
.table-bordered.no-footer-border tfoo tr{
border: border: none;
}
/* hide border td border inside tfoo tag this is required */
.table-bordered.no-footer-border tfoo td{
border: border: none;
}
Now in your template this two class to your table tag add table-bordered,gray-border and no-footer-border classes:
<!-- remove the style -->
<table class="table-bordered table-sm o_main_table gray-border no-footer-border" name="moves_table">
Note: don't forget to add the XML file that extends the report_assets_common to manifest, when you edit the css file no need to restart the server or upgrade your module. and this is for Odoo version >= 11.0, in < 11.0 the template of report assets is report.assets_common.
I was wondering if this is capable/ anyone has an example.
The webpage I'm accessing has a very structured layout and uses comments to start and finish sections.
In each section their is always a opening comment, a closing comments and a <h3></h3> and then only sometimes a <table></table>
If I know the Xpaths where a section starts and where it finishes is there a way to loop this range?
HTML
<!-- Asset Allocation -->
<h3 style="border-top: 1px solid #CCCCCC; margin-top: 20px;">Asset Allocation</h3>
<p class="fundreportsubheading">% as at 31 Aug 2017</p>
<table class="table2 tablefundreport noth">
<tbody><tr class="N_Qodd">
<td style="text-align: left;">Domestic Equity</td>
<td>4.181</td>
</tr>
<tr class="N_Qeven">
<td style="text-align: left;">International Equity</td>
<td>95.494</td>
</tr>
<tr class="N_Qodd">
<td style="text-align: left;">Listed Property</td>
<td>0.000</td>
</tr>
<tr class="N_Qeven">
<td style="text-align: left;">Unlisted Property</td>
<td>0.000</td>
</tr>
<tr class="N_Qodd">
<td style="text-align: left;">Domestic Fixed Interest</td>
<td>0.000</td>
</tr>
<tr class="N_Qeven">
<td style="text-align: left;">International Fixed Interest</td>
<td>0.000</td>
</tr>
<tr class="N_Qodd">
<td style="text-align: left;">Cash</td>
<td>0.325</td>
</tr>
<tr class="N_Qeven">
<td style="text-align: left; border-bottom: none;">Other</td>
<td style="border-bottom: none;">0.000</td>
</tr>
</tbody></table>
<!-- /Asset Allocation -->
Sample comment Xpaths
//*[#id="maincontent"]/div[2]/div[3]/comment()[3]
//*[#id="maincontent"]/div[2]/div[3]/comment()[4]
I have put together a Bootply demonstration here: http://www.bootply.com/Ss2aAnzqlZ.
It's a panel with a table as per http://getbootstrap.com/components/#panels-tables. However, I've also made the panel collapsible. The collapsing bit works OK, but the table itself doesn't retain shape. As you'll see in the Bootply, it doesn't fill the width of the panel when you first load the page. When you click "Improvements" in the panel header to collapse the panel, the table takes up the full panel width during the animation, then disappears. When you click again to show the panel content, the table is the full width until the animation stops, at which point, it shrinks back to what looks like an "auto" width.
Oddly enough, inspecting the table element shows that the table itself is full width, but the thead, tbody and tfoot aren't.
I've sort of tracked it down to the presence of the "collapse" class in the table. If you start the Bootply without the "collapse" class, it's full width until you collapse the panel. When you expand it, it goes back to auto width. I don't know why ... do you?
Here's the snippet, but the collapsing doesn't appear to run here. The Bootply is better.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div style="margin:15px">
<div class="panel panel-default">
<div class="panel-heading">
Improvements
</div>
<table id="improvementsPanel" class="table panel-collapse collapse in" aria-expanded="true" style="">
<thead>
<tr>
<th>Description</th>
<th class="text-right">Qty</th>
<th>UOM</th>
<th class="text-right">Rate</th>
<th class="text-right">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td class="text-right">133.00</td>
<td>m²</td>
<td class="text-right">425.00</td>
<td class="text-right">56,525</td>
</tr>
<tr>
<td>Item 2</td>
<td class="text-right">85.00</td>
<td>m²</td>
<td class="text-right">70.00</td>
<td class="text-right">5,950</td>
</tr>
<tr>
<td>Item 3</td>
<td class="text-right">25.00</td>
<td>m²</td>
<td class="text-right">100.00</td>
<td class="text-right">2,500</td>
</tr>
<tr>
<td>Item 4</td>
<td class="text-right"></td>
<td></td>
<td class="text-right"></td>
<td class="text-right">1,500</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="text-right" colspan="4">Total</th>
<th class="text-right">66,475</th>
</tr>
</tfoot>
</table>
</div>
</div>
The collapse class toggles the display style on the table between none and block and this appears to be interfering with the standard table CSS.
You can resolve this by putting your table inside a div and setting that div to collapse rather than the table.
New Bootply: http://www.bootply.com/L8h2OdpMuD
HTML:
<div style="margin: 15px">
<div class="panel panel-default">
<div class="panel-heading">
Improvements
</div>
<div id="improvementsPanel" class="panel-collapse collapse in" aria-expanded="true">
<table class="table">
<thead>
<tr>
<th>Description</th>
<th class="text-right">Qty</th>
<th>UOM</th>
<th class="text-right">Rate</th>
<th class="text-right">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td class="text-right">133.00</td>
<td>m²</td>
<td class="text-right">425.00</td>
<td class="text-right">56,525</td>
</tr>
<tr>
<td>Item 2</td>
<td class="text-right">85.00</td>
<td>m²</td>
<td class="text-right">70.00</td>
<td class="text-right">5,950</td>
</tr>
<tr>
<td>Item 3</td>
<td class="text-right">25.00</td>
<td>m²</td>
<td class="text-right">100.00</td>
<td class="text-right">2,500</td>
</tr>
<tr>
<td>Item 4</td>
<td class="text-right"></td>
<td></td>
<td class="text-right"></td>
<td class="text-right">1,500</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="text-right" colspan="4">Total</th>
<th class="text-right">66,475</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
Alternatively, you can add the css:
table.collapse.in {
display: table;
}
Arguably this could be a patch to component-animations.less.
I have a table with 4 columns. The second column displays an email address and i'd like that column to take up the maximum amount of width within the table that it can. Then when the viewport size becomes smaller, the column width should be responsive and the email displayed should truncate if it becomes too large for the column.
All the solutions i've found so far either use table: {table-layout:fixed;} or set a max-width value on the td. Which are no good for me as they force the columns to specific widths.
This is what i'm trying to achieve regarding the column width layout, but the truncation fails. I read on an SO comment (showing the max-width solution) that setting width: 100% and min-width: 1px would have the desired affect, but it doesn't appear to work.
http://plnkr.co/edit/gIC5u6wq6oCYhF5pCJJp?p=preview
This is a max-width example where at least the text truncates, but the column widths are wrong.
http://plnkr.co/edit/e8sj2iqRUpBytMomddCS?p=preview
I've also tried wrapping the email text in a div, setting the width of the td to 100% and then setting the truncation on the inner div (also with width: inherit) but that didn't work either.
Add a class to other columns i.e Checkbox, Staff and Client columns and fix their width by giving appropriate widths.
Below is the HTML and CSS code:
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap#3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>Email</th>
<th class="text-center">Staff</th>
<th class="text-center">Client</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center other-col">
<input type="checkbox">
</td>
<td class="email-col">
example#example.com
</td>
<td class="text-center other-col">
yes
</td>
<td class="text-center other-col">
no
</td>
</tr>
<tr>
<td class="text-center other-col">
<input type="checkbox">
</td>
<td class="email-col">
example#example.com
</td>
<td class="text-center other-col">
yes
</td>
<td class="text-center other-col">
no
</td>
</tr>
<tr>
<td class="text-center other-col">
<input type="checkbox">
</td>
<td class="email-col">
example#example.com
</td>
<td class="text-center other-col">
yes
</td>
<td class="text-center other-col">
no
</td>
</tr>
<tr>
<td class="text-center other-col">
<input type="checkbox">
</td>
<td class="email-col">
example#example.com
</td>
<td class="text-center other-col">
yes
</td>
<td class="text-center other-col">
no
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
You can find that an additional class other-col is added in the above code.
CSS
/* Styles go here */
.email-col {
/*width: 100%;
min-width: 1px;*/
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.other-col {
width:10%;
}
Add style for that cell
word-break: break-all;