For some reason it doesn't show me any scrollbars.
The overflowing content is simply hidden.
Middle-clicking with the mouse allows to scroll. It's just that the scrollbars are hidden.
Tried with CSS:
body: {
overflow-x: scroll;
overflow-y: scroll;
}
The above displays a disabled/useless scrollbars, that is I resize the window but the scrollbars stay nonfunctional.
This issue is barely mentioned online.
Using nwjs-v0.12.3-win-x64.
Does anyone know a solution? I just want simple scrollbars.
The complete code is on: https://jsfiddle.net/rtk1ebg1/
package.json:
{
"name": "hello",
"main": "index.html",
"window": {
"title": "Hey!",
"icon": "icon.png",
"toolbar": true,
"position": "center"
}
}
Try
body {
overflow: scroll;
}
Edited(forgot the main lines)
body {
height: 100%;
overflow: hidden;
width: 100%;
}
Related
I have created a transition to be run between route changes:
.page-enter-active {
position: absolute;
width: 100%;
//max-height: 100vh;
overflow: hidden;
animation: slideScaleRight 2s ease;
}
.page-leave-active {
position: absolute;
width: 100%;
//max-height: 100vh;
overflow: hidden;
animation: scaleSlideRight 2s ease;
}
#keyframes scaleSlideRight {
0% {
transform: scale(1);
}
33% {
transform: scale(0.75) translateX(0);
opacity: 0.5;
}
66% {
transform: scale(0.75) translateX(150%);
}
100% {
transform: scale(0.75) translateX(150%);
}
}
#keyframes slideScaleRight {
0% {
transform: scale(0.75) translateX(-150%);
}
33% {
transform: scale(0.75) translateX(-150%);
}
66% {
opacity: 0.5;
transform: scale(0.75) translateX(0);
}
100% {
transform: scale(1) translateX(0);
}
}
The transition run smooth but I just discover that if the page is not at top position, before leaving, nuxt force an scroll to the top making the experience really bad...
I can guess nuxt is scrolling up before triggering the transition and I really would like to keep the page where it is before leaving.
Any ideas?
You could set scrollToTop: false on an upper page (or even in /layouts/default.vue?) to prevent the scrolling of the page as shown in the documentation.
If you want more granularity, you could also look into scrollBehavior.
I'm using some echarts in my Vue application with vue-echarts. All charts have :autoresize="true".
My problem is, that if I try to print the page, the width of the charts are set to match the width of the browser. If browser is full screen then some charts get clipped.
CSS:
.echarts {
width: 100%;
min-height: 200px;
}
#media print {
#page { margin: 1cm }
body {
width: 110mm;
height: 297mm;
margin: 25mm 25mm 25mm 25mm;
}
.echarts {width: 600px !important;} /* This does not work! */
}
In the generated DOM there is a container, and inside that another div with the style: position: relative; width: 567px; height: 400px; padding: 0px; margin: 0px; border-width: 0px; cursor: pointer;
Width of the inner container is updated when browser is resized.
Yes, I have faced the same problem. I have also tried before print and after print and call function to redraw the chart but some times its break when Brower gets a zoom out and zoom in.
I say it's not the best solution but it works perfectly.
Solution -
Overwrite the window.print method in mounted.
window.print = function () {
setTimeout(function () {
_print();
}, 500);
};
use flag print_mode for printing.
let self = this;
window.addEventListener('afterprint', function () {
self.print_mode = false;
});
user ref of the chart instance to get base64 data. call getDataURL() to get image data.
chart = echarts.init(chart_dom);
chart_img = chart.getDataURL()
<img v-if="print_mode" class="print-only" :src="chart_img"></img>
so while printing it display image and print and in normal mode, it shows a chart.
How is it possible to make a dGrid instance take up 100% of the height of its container? I can use CSS to make the ".dgrid" classed div a specific height but when I set it to 100% it doesn't display.
Got it.
.dgrid {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
}
(With position absolute/relative on container, of course)
I think the supported way to do this is with the .dgrid-autoheight css class.
require([
"dgrid/List",
"dgrid/OnDemandGrid",
"dgrid/Selection",
"dgrid/Keyboard",
"dojo/_base/declare",
"dgrid/test/data/createAsyncStore",
"dgrid/test/data/smallColorData",
"dojo/domReady!"
], function(List, Grid, Selection, Keyboard, declare, createAsyncStore, smallColorData){
window.grid = new (declare([Grid, Selection, Keyboard]))({
className: "dgrid-autoheight",
collection: createAsyncStore({ data: smallColorData }),
columns: {
col1: "Color",
col5: "R",
col6: "G",
col7: "B"
}
}, "grid");
});
This is from the test examples.
#voidstate's answer is good. Another way to do it is like this:
HTML:
<div class="containsDGrid">
<div data-dojo-attach-point="dgrid"></div>
</div>
CSS:
.containsDGrid {
height: 500px;
width: 500px;
}
.dgrid {
height: 100%;
width: 100%;
}
The key is that if you set the height of the dgrid to 100%, the dgrid's parent must have its hight set. For example if we don't set the height of the .containsDGrid div then it will look like this (notice the height of 2px):
For another example see Dojo Dgrid - Use remaining space in block
How to reduce the height of list item in Sencha touch 2? My list showing large numbers of single word name/value pair. As each item taking extra height, list is becoming too long. So i want to reduce each item height to exact content height. I tried using css like this but no luck. Any help?
var tabPanel=Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'top',
defaults: {
styleHtmlContent: true
},
items: [
{
title: 'DETAILS',
xtype: 'list',
cls: 'myList',
....
itemTpl: '<table><tr><td>{fieldName}</td><td>{fieldValue}</td></tr></table>',
.............
.myList .x-list-item {
max-height: 30px;
}
Each list item has a min-height of 2.6em. So, you can reduce that and add a overflow property. Use this:
.my-list .x-list-item .x-list-item-label{
min-height: 0.8em !important;
overflow : auto;
}
And it is not a good practice to use Html tables inside itemTpl. Use plain DIV elements with -webkit-box CSS3 property.
You can use itemHeight config of list. http://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List-cfg-itemHeight
in addition to that you can also use CSS like this to control padding:
.my-list .x-list-item .x-list-item-body{
min-height: 0.5em !important;
padding-top: 0.3em;
padding-bottom: 0.3em;
}
use a property called as
itemHeight: [*Height of the item you need*],
i.e
itemHeight: 40
Read it from the Component's JS file
I am trying to override the CSS of a back button in a Sencha Touch 2 Navigation View. Using this CSS
#ext-container-1 .x-button {
background: url(../images/button_zurueck.png) no-repeat;
width: 55px;
height: 55px;
margin-top: 120px;
margin-right: 26px;
border: none;
}
I was able to show the image but the width attribute is overidden by the style attribute set on the button so only a small part of the button is shown. This ist the content of the style attribute left after the button animation:
element.style {
left: 0px !important;
-webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg) scaleX(1) scaleY(1) scaleZ(1) !important;
opacity: 1 !important;
width: 16px !important;
}
How can I override the width of the button?
This is a bug in 2.0.0 and has already been fixed by Sencha for the next release.
More information: http://www.sencha.com/forum/showthread.php?188982
I was able to show the full button by adding right padding. Its dirty but its work. Looking forward for the next release of Sencha Touch.
At the end I got rid of that button totally and inserted my own button which simulates the "back" functionality.
On the card:
config: {
defaultBackButtonText: '',
navigationBar: {
backButton: {
iconCls: 'back',
ui: 'plain'
}
}
}
On the CSS:
//Back
.x-button-icon.back {
background-image: url(../../resources/images/bt_seta.png);
background-repeat: no-repeat;
}