Using Yeoman rtjs generator. Very basic example using rollup.js and rollup-plugin-riot.
Tag is very simple:
<home>
<div class="card" id="home-card">
<div class="card-block">
<a href="https://v4-alpha.getbootstrap.com">
<h1>Bootstrap 4 starter template</h1>
</a>
<p class="lead">
Use this document as a way to quickly start any new project.
<br />
All you get is this text and a mostly barebones HTML document.
</p>
</div>
</div>
<style>
#home-card {
margin-top: 65px;
}
</style>
</home>
However, the HTML produced lacks the <home> tag:
<div class="container">
<div class="card" id="home-card">
<div class="card-block"><a href="https://v4-alpha.getbootstrap.com"><h1>Bootstrap 4 starter template
</h1>
</a>
<p class="lead"> Use this document as a way to quickly start any new project. <br> All you get is this text and a mostly barebones HTML document.
</p>
</div>
</div>
</div>
Thus, this included style doesn't work:
<style type="text/css">
home #home-card,[data-is="home"] #home-card{ margin-top: 65px; }
</style>
This is probably something simple/basic, but as a riot.js newbie, I'm not seeing it.
I didn't realize this was a virtual tag:
<div class="container">
<virtual data-is={component}></virtual>
</div><!-- /.container -->
This removes the <home> tag
Related
I'm using Materialize to generate modals on a php website, only the data below is clearly visible.
This is based on data from a MySQL database. For each hard drive in said db, generate a card and populate with drive data.
For testing purposes I removed all php code to see if that was what was breaking it, sadly I still had normal text punch through.
Any ideas? Are there css options I can use to force the opaque settings? Or maybe an alternative altogether, I did have a look at css overlays but had the same problem.
In the code below I've removed all php. The complete website source code can be found at my repo
here (albeit without the modal stuff as not committed to master yet)
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<!-- Drive stats on index -->
<div class="card-content center">
<h6>Hard Drive Canonical Name Goes Here via PHP</h6>
<ul>
<li>Hard Drive Size Goes Here Via PHP</li>
<li>Hard Drive Temp Goes Here via PHP</li>
<li> </li>
<li>Last updated at database timestamp goes here via PHP</li>
</ul>
</div>
<div class="container center">
<a class="waves-effect waves-light btn blue darken-1 modal-trigger" href="#modal">Launch Temperature History</a>
<div id="modal" class="modal">
<div class="modal-content">
<div class="card graphcolour">
<div class="card graphcontent">
<canvas id=1></canvas> <!-- <?php echo htmlspecialchars( $drive['DiDriveId'] )?> is what would normally be in here -->
</div>
</div>
"hello there!"
</div>
<div class="modal-footer">
Close
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.modal').modal();
})
</script>
<!-- Status Images -->
<!-- Images would go here based on PHP if else statements -->
</div>
</div>
The materialize modal code snippets were edited versions of below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<div class="container">
<h3>A Demo of Modal</h3>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn pink darken-1 modal-trigger" href="#demo-modal">Launch Modal</a>
<!-- Modal Structure -->
<div id="demo-modal" class="modal">
<div class="modal-content">
<h4>A Demo of Simple Modal</h4>
<p>Content of the modal goes here. Place marketing text or other information here.</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.modal').modal();
})
</script>
</body>
</html>
Thanks to SeanDoherty for clarifying what I felt was the answer. I moved the Modal outside of the card, added three empty line breaks to the bottom of my card, then re-added the modal script with css offsetting. It's cheap, but it works!
.modalPosition{
top: -100px;
}
Using Odoo 11 with wkhtmltopdf verion 0.12.1.3
All the default headers are not on any of the PDF reports I print, even when I try to preview the document templates in general settings.
I still have the footers though.
Furthermore the reports are very plain now, like the table-striped that has become a white plain column, or "row" that doesn't show the elements inside in a row but rather one under the other.
Edit :
To illustrate my problem here is what happen when I chose the Standard template in General Settings and I try to Preview the document.
There is what happends
What's strange is that I didn't touch - I don't think so - this header in any way (even though I've done some custom reports but unrelated).
Here is the code of web.external_layout_standard:
<?xml version="1.0"?>
<t t-name="web.external_layout_standard">
<div class="header">
<div class="row">
<div class="col-xs-3 mb4">
<img t-if="company.logo" t-att-src="'data:image/png;base64,%s' % to_text(company.logo)" style="max-height: 45px;"/>
</div>
<div class="col-xs-9 text-right" style="margin-top:22px;" t-field="company.report_header" name="moto"/>
</div>
<div t-if="company.logo or company.report_header" class="row zero_min_height">
<div class="col-xs-12">
<div style="border-bottom: 1px solid black;"/>
</div>
</div>
<div class="row">
<div class="col-xs-6" name="company_address">
<span t-field="company.partner_id" t-field-options="{"widget": "contact", "fields": ["address", "name"], "no_marker": true}" style="border-bottom: 1px solid black; display:inline-block;"/>
</div>
</div>
</div>
<div class="article o_report_layout_standard">
<t t-raw="0"/>
</div>
<div class="footer">
<div class="text-center" style="border-top: 1px solid black;">
<ul class="list-inline mb4">
<li t-if="company.phone">Phone: <span t-field="company.phone"/></li>
<li t-if="company.email">Email: <span t-field="company.email"/></li>
<li t-if="company.website">Web: <span t-field="company.website"/></li>
<li t-if="company.vat"><t t-esc="company.country_id.vat_label or 'TIN'"/>: <span t-field="company.vat"/></li>
</ul>
<div name="financial_infos">
<span t-field="company.report_footer"/>
</div>
<div class="text-muted">
Page: <span class="page"/> / <span class="topage"/>
</div>
</div>
</div>
</t>
EDIT temporary SOLUTION
It might have been a cache problem since we were several people working on the same admin account at the same time.
Thus I copied the database. Checked it worked well in my new database (eureka!). Erased the old one. And changed the name of the copy by the old name.
BUT! at some point it keeps despairing again. I'm doing qweb changes in custom reports so I don't touch the headers but maybe it's connected...
It seems that your pdf processor (wkthmltopdf) is not finding the proper CSS to form the reports. I solved this issue in Odoo 11 with the following steps:
Create a new system parameter report.url
For this go to Settings -> Parameters -> System and check if the parameter report.url exists. If not create it.
Set the value of report.url to http://127.0.0.1:8069 or http://0.0.0.0:8069
This is by the way the approach suggested by CZoellner. I have learnt more insight from the discussion on headers and CSS in reports at Odoo Help.
Here is the scenario, I have multiple tiles on home page. when a user logins in for the first time some of them need to be disabled. Same i am trying to test using selenium.
To disable the div i am using ng-class by which i am applying .disableDiv class on the div which has below css
.disableDiv {
pointer-events: none;
opacity: 0.4; }
When i target it using .isEnabled() but it is showing true even if the disable class is applied on it.
Please suggest how should i target the disabled elements.
below as you see isNewUser is ng-class which applies .disableDiv on the element which makes is disabled for the end user.
Thanks in advance
HTML
<div class="col-md-6 col-sm-12 tile-box-1" id="div-importcontent" ng-class="isNewUser">
<div class="tile-box-2">
<div class="col-md-2 col-sm-2 col-xs-3 tile-box icon-box">
<!-- icon -->
<a class="d-icon-download icon" ui-sref="importcontent" id="a-importcontent"></a>
</div>
<div class="col-md-10 col-sm-9 col-xs-8 tile-box desc-box">
<h4 class="heading" ui-sref="importcontent" id="h4-importcontent">Import content</h4>
<!-- <a class="d-icon-info_circle icon-info"></a> -->
<span class="desc" ui-sref="importcontent" id="span-importcontent">Import installed applications reporting content into BMC Remedy Smart Reporting
</span>
</div>
</div>
</div>
I have a very simple HTML page that in summary includes the Fabric UI CSS file and has a body (body.ms-Fabric) with
<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-sm12 ms-u-md4 ms-lg2">
Column 1
</div>
<div class="ms-Grid-col ms-sm12 ms-md8 ms-lg10">
Column 2
</div>
</div>
</div>
but is displaying two rows instead of the expected two columns
What am I doing wrong?
Am I missing any other CSS include or class?
Thanks
It does work. :)
They seem to have forgotten to update their guide when they included rtl support. Simply add dir="ltr" to the html tag or at least the div parent to .ms-Grid-col
<link href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.3.0/css/fabric.min.css" rel="stylesheet" />
<div class="ms-Fabric" dir="ltr">
<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-sm6 ms-md4 ms-lg2">A</div>
<div class="ms-Grid-col ms-sm6 ms-md8 ms-lg10">B</div>
</div>
</div>
</div>
I have the same issue here, I dont know why we are missing float left:
.ms-Grid-col{
position:relative;
min-height:1px;
padding-left:8px;
padding-right:8px;
box-sizing:border-box}
[dir=ltr] .ms-Grid-col{float:left}
[dir=rtl] .ms-Grid-col{float:right}
if you add float:left; to .ms-grid-col class then it will be ok
I know that we can add left and right buttons in a header in Jquery Mobile App.
But can we any more buttons or controls in the header section itself?
I think I have a better solution,
<header data-role ="header" data-theme="b">
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</header>
Screenshot;
with regard to this info:
you can find it here:
http://www.metaltoad.com/sites/default/files/Responsive-Widths_0.png
you can use this code:
<style type="text/css">
#media all{
.my-header-grid.ui-grid-b .ui-block-a { width: 30%; }
.my-header-grid.ui-grid-b .ui-block-b { width: 40%; }
.my-header-grid.ui-grid-b .ui-block-c { width: 30%; }
}
}
</style>
<div class="my-header-grid ui-grid-b" data-theme="a">
<div class="ui-block-a ui-bar-a" data-theme="a">
<div align="left" style="padding-left:5px;padding-top:3px;height:33px;height:40px;">
Back
Edit
</div>
</div>
<div class="ui-block-b ui-bar-a">
<div align="center" style="padding-top:3px;height:33px;text-align:center;height:40px;">
<div style="padding-top:7px;">
<article role="heading" aria-level="1">expand </article>
</div>
</div>
</div>
<div class="ui-block-c ui-bar-a">
<div align="right" style="padding-top:3px;height:33px;height:40px;">
Add
Refresh
</div>
</div>
</div><!-- /grid-b -->
if by any chance your programming with c# mvc razor engine don't forget to write the css media tag with 2 # like so ##media because the razor engine treats 2 # as one.
you see and can play with all of the designs shown here in this link:
http://jsfiddle.net/yakirmanor/BAat8/
iv added some links but i recommend youll read this:
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
the simple implantation is:
<header data-role ="header" data-theme="a">
<a data-icon="back" href="/" rel="external">Back</a>
<h1 class="ui-title" role="heading">Staff</h1>
<a class="ui-btn-right" data-icon="back" href="#" rel="external">Refresh</a>
</header>
or this:
<div data-role="header" data-theme="b">
<a data-icon="back" href="/" rel="external">Back</a>
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</div>
or this:
<div data-role="header" data-theme="e">
<div class="ui-btn-left" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</div>
hope iv helped.
It might be easier to create a custom navbar instead of modifying the header toolbar, Here si the docs: http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-navbar.html
This might help:
<div class="ui-btn-right">
<!-- Home Button -->
<a href="index.html" data-role="button"
data-icon="refresh" data-iconpos="notext" data-direction="reverse" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Refresh">
</a>
<!-- Home Button -->
<a href="index.html" data-role="button"
data-icon="home" data-iconpos="notext" data-direction="reverse" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Home">
</a>
</div>
This gives me those nice rounded buttons, two side by side on the right side.
Just like on the mobile docs.
Works in 1.1.1, haven't tried the latest RC
I was able to achieve this by the following code:
<div data-role ="header" data-theme="b">
Prev
<div data-role="controlgroup" data-type="horizontal" style="margin-left:75px;margin-top:5px;" >
<a href="index.html" data-role="button" data-icon="arrow-l" >P.Week</a>
N.Week
</div>
Next
</div>
No, there is a hard limit of 2 as far as I have found. The best I was able to come up with was to get another unstyled link to appear.
There are however, navbars - On one of my projects, I needed a number of buttons in the header area, I placed a navbar directly below it, and was reasonable pleased with the results.
They are explained in detail here:
http://jquerymobile.com/test/docs/toolbars/docs-navbar.html