I've created UI based on vuetify that looks as follows:
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<div id="app">
<v-app>
<v-app-bar
color="deep-purple accent-4"
dark app
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Page title</v-toolbar-title>
</v-app-bar>
<!-- Sizes your content based upon application components -->
<v-content>
<!-- Provides the application the proper gutter -->
<v-container fluid>
<v-row justify="start">
<v-col>
<v-card max-width="300" class="mx-auto">
<v-list-item>
<v-list-item-icon>
<v-icon large color="teal darken-2">mdi-email</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title class="headline">Messages</v-list-item-title>
<v-list-item-subtitle>overview of all messages</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-card-text>
<v-row align="center" justify="center" no-gutters>
<v-col cols="5">
<p class="title">SYSTEM1</p>
</v-col>
<v-col cols="5">
<p class="subtitle-1">111111111111</p>
</v-col>
</v-row>
<v-row justify="center" no-gutters>
<v-col cols="5">
<p class="title">SYSTEM2</p>
</v-col>
<v-col cols="5">
<p class="subtitle-1">111111111</p>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
<v-col>
<v-card max-width="300" class="mx-auto">
<v-list-item>
<v-list-item-icon>
<v-icon large color="teal darken-2">mdi-email</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title class="headline">Messages</v-list-item-title>
<v-list-item-subtitle>overview of all messages</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-card-text>
<v-row align="center" justify="center" no-gutters>
<v-col cols="5">
<p class="title">SYSTEM1</p>
</v-col>
<v-col cols="5">
<p class="subtitle-1">111111111111</p>
</v-col>
</v-row>
<v-row justify="center" no-gutters>
<v-col cols="5">
<p class="title">SYSTEM2</p>
</v-col>
<v-col cols="5">
<p class="subtitle-1">111111111</p>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-row>
<v-col cols="6">
<p class="title">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</v-col>
</v-row>
</v-container>
</v-content>
<v-footer app>
<!-- -->
</v-footer>
</v-app>
</div>
My question is, the row with the content:
<v-row>
<v-col cols="6">
<p class="title">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</v-col>
</v-row>
how to make it scrollable? So the whole page should not be scrollable, but only the content of the row, that I mentioned above, should be scrollable. It should also take the remaining spaces of the v-container, that means for example:
v-container = 100%
v-row(the first row) = 300px
so the second row should be 100% - 300px, I know, it is not the same unit.
How to archive it?
Related
PDF documents don't require space characters to be present in the page content streams to visually break words. As a consequence, a glyph for the space character may be missing as well in font programs. PDF compliant viewers appear to use font metrics and text state to infer an appropriate word spacing width and check it against characters positioning to add missing spaces when selecting/copying text. Unfortunately the PDF specification appears to not stress enough how word spacing width can be computed in such cases. While pdf.js appears to hard code a size for tracking word breaks, from my empirical tests it seems a different approach is used by Acrobat Reader/Pro. What it could be such heuristic?
The question is very technical and answering it requires either having some insider knowledge of Adobe Acrobat internals or having implemented text extraction in PDF documents with a robust set of test cases that were compared against Adobe results. To whom it may concern, assuming a robust words break algorithm for text extraction can be implemented by inferring an arbitrary spacing width and comparing against glyphs location, the heuristic I'm currently testing is the following:
unscaledSpacingWidth = (average of non zero glyph widths obtained from /W or /Widths arrays) / 7
Where 7 is an arbitrary constant which seems to work well and match Adobe Acrobat results close enough in a limited set of samples I tested. This compares against the solution in pdf.js which is just picking an hard-coded value of 0.1 PDF points.
The found spacing width is subjected to scaling according to font size and other text state context.
I have raw file with entry in Thai language " Yamato-Esulon (Thailand) Co.,Ltd (โรง 1)' but when i put that on SQL table it changes to 'Yamato-Esulon (Thailand) Co.,Ltd (Ó╣éÓ©úÓ©ç 1)' . I'm using datatype nvarchar(MAX). Has someone come across this before and how can this be prevented?
Your problem may be due to the font that you are using. Only certain fonts will work for thai language, so fonts like arial and calibri simply won't work.
For Thai, the fonts that work are:
Dialog, DialogInput, Monospaced, Sansserif, Serif, Leewaldee, Leewaldee UI, Leewaldee UI Semilight, Lucida Sans, Lucida Sans Typewriter, Microsoft Sans Serif, and Tahoma
This holds true for almost any other language, so be sure that a certain font works for the language that you are using. You can check which fonts work through a .jar file that I found online relating to an older post.
I've created a little jsfiddle for a Floating Action Button.
It seems to work just fine on iOS, Desktop and Android using Chrome, Firefox, Safari, Explorer and Edge version 40 BUT as soon as I update to Edge version 41 (the latest) it breaks!
I wonder if I'm doing something wrong or if something changed in the last version of Edge that breaks "position: sticky"?
I've google this issue and checked here too but I don't seem to find an answer ...
Thank you for your time!
JSFIDDLE
.fab-overlay {
right: 10px;
bottom: 10px;
position: fixed;
}
.fab-overlay .fab-container {
width: 55px;
position: sticky;
}
.fab-overlay .fab-container .fab {
float: right;
width: 55px;
height: 55px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-khtml-border-radius: 50%;
background-color: red;
}
<div class="page-content">
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point of
using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making
it look like readable English. Many desktop publishing packages and
web page editors now use Lorem Ipsum as their default model text,
and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years,
sometimes by accident, sometimes on purpose (injected humour and the
like).
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point of
using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making
it look like readable English. Many desktop publishing packages and
web page editors now use Lorem Ipsum as their default model text,
and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years,
sometimes by accident, sometimes on purpose (injected humour and the
like).
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point of
using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making
it look like readable English. Many desktop publishing packages and
web page editors now use Lorem Ipsum as their default model text,
and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years,
sometimes by accident, sometimes on purpose (injected humour and the
like).
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point of
using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making
it look like readable English. Many desktop publishing packages and
web page editors now use Lorem Ipsum as their default model text,
and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years,
sometimes by accident, sometimes on purpose (injected humour and the
like).
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point of
using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making
it look like readable English. Many desktop publishing packages and
web page editors now use Lorem Ipsum as their default model text,
and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years,
sometimes by accident, sometimes on purpose (injected humour and the
like).
</div>
<div class="fab-overlay">
<footer class="footer fab-container">
</footer>
</div>
How can I set the Font in Odoo Qweb Reports?
Currently, when I develop a report in ubuntu 12.04, PDF copy of report looks good.
But, same thing if I try in ubuntu 14.04, font looks very small.
How to over come it?
Try like this,
<div class="page" style="font-size: 18pt;font-family:Helvetica,Verdana,Arial,sans,Lucida Grande,Calibri;">
Any one of these fonts if there, it will use that Font and the font size.
When printing to PDF from Visual Studio, all my .cs files get printed with black text on white background. On the other hand, the .css and .cshtml files get printed with white text on a black highlight. The first mode is usable while the latter isn't. However, both cases seem to ignore the Tools > Options > Environment > Fonts and Colors > Printer configuration, which is configured to colour syntax normally on printing and has no configuration whatsoever especifying a black highlight.
On the physycal side we have an even stranger output: when physically printing on a black-and-white laser printer we got a black text on white back (result is displayed on the right-hand side of the picture below). When printing on a colour laser printer we got a white text on black highlight (on the left-hand side of the picture).
Changing the Visual Studio Theme from Dark to Light has no effect
Using a third party tool such as VSCodePrint also prints the code with a black highlight
I have used both Adobe Acrobat Pro PDF printer and CutePDF Writer, but both give me the same results as the left-hand side of the picture in the PDF (digitally, of course)
Any contribution is welcome as there is little to no information on the Web about this.
According to visual studio editor team, it was a confirmed bug on 2012. There appeared to be a resolution (kb download) to fix that, but I don't see it being "applyable" to VS2013. See: http://connect.microsoft.com/VisualStudio/feedback/details/760291/vs2012-with-dark-theme-prints-code-with-black-background