vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Doc updates

pull/256/head
cagataycivici 2020-03-17 12:12:29 +03:00
parent e53c3f8f4e
commit 65c5641c94
2 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/views/datatable/DataTableDoc.vue
View File

@ -1515,10 +1515,10 @@ export default {
</CodeHighlight> </CodeHighlight>
<h3>Responsive</h3> <h3>Responsive</h3>
<p>DataTable display can be optimized according to screen sizes, this example demonstrates a demo where columns are stacked on small screens.</p> <p>DataTable display can be optimized according to screen sizes, this example demonstrates a sample demo where columns are stacked on small screens.</p>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;DataTable :value="cars" class="p-datatable-responsive"&gt; &lt;DataTable :value="cars" class="p-datatable-responsive-demo"&gt;
&lt;template #header&gt; &lt;template #header&gt;
Responsive Responsive
&lt;/template&gt; &lt;/template&gt;
@ -1570,31 +1570,35 @@ export default {
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="css"> <CodeHighlight lang="css">
.p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title { .p-datatable-responsive-demo .p-datatable-tbody > tr > td .p-column-title {
display: none; display: none;
} }
@media screen and (max-width: 40em) { @media screen and (max-width: 40em) {
.p-datatable-responsive .p-datatable-thead > tr > th, /deep/ .p-datatable {
.p-datatable-responsive .p-datatable-tfoot > tr > td { &.p-datatable-responsive-demo {
display: none !important; .p-datatable-thead > tr > th,
} .p-datatable-tfoot > tr > td {
display: none !important;
}
.p-datatable-responsive .p-datatable-tbody > tr > td { .p-datatable-tbody > tr > td {
text-align: left; text-align: left;
display: block; display: block;
border: 0 none; border: 0 none !important;
width: 100% !important; width: 100% !important;
float: left; float: left;
clear: left; clear: left;
}
.p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title { .p-column-title {
padding: .4em; padding: .4em;
min-width: 30%; min-width: 30%;
display: inline-block; display: inline-block;
margin: -.4em 1em -.4em -.4em; margin: -.4em 1em -.4em -.4em;
font-weight: bold; font-weight: bold;
}
}
}
} }
} }
</CodeHighlight> </CodeHighlight>
@ -2625,7 +2629,6 @@ export default {
width: 100% !important; width: 100% !important;
float: left; float: left;
clear: left; clear: left;
border: 0 none;
.p-column-title { .p-column-title {
padding: .4em; padding: .4em;

3
src/views/datatable/DataTableResponsiveDemo.vue
View File

@ -126,9 +126,6 @@ export default {
font-weight: bold; font-weight: bold;
} }
} }
.p-datatable-tbody > tr > td {
border: 0 none;
}
} }
} }
} }