I want to limit viewport, where the nodes can be dragged and displayed to full hd resolution (1920×1080 px). Is it possible with cy.resize() function? I've tried to set cy.resize({width: 1920px, height: 1080px}), but it doesn't work.
Use CSS on your container.
If you read the docs for cy.resize(), you'll notice it just syncs with CSS changes.
You can use custom CSS also when you add graphs in HTML.
Like
<div class="col" [hidden]="noGraph">
<div id="cy" class="bg-white graph-dynamic-height"></div>
</div>
and in CSS
.graph-dynamic-height {
height: calc(100vh - 215px);
}
The above code work for me.
Related
On my Vuetify + Lealflet project the map hides all popup dialogs and I don't know why. I use Vue2Leaflet library. I am a beginner with web development. Here is a pic of the problem:
<l-map
:center="center"
:zoom="zoom"
#click.right="mapRclicked"
ref="map"
style="height: 50vh; width: 50vh"
>
The problem is a clash of z-index ranges. Vuetify uses z-index ranges 0-10 while leaflet uses the range 100-1100. Fortunately, the z-index of a child element is relative to the z-index of their parent.
I advice you to give l-map a z-index of 0 like this.
<l-map
:center="center"
:zoom="zoom"
#click.right="mapRclicked"
ref="map"
style="z-index: 0; height: 50vh; width: 50vh"
>
This will automatically bring your component in line with all of Vuetify z-indexes. In contrast, #bgsuello workaround requires that you modify the z-index of every Vuetify component that may conflict with the map, including other dialogs, menus, animations, tabs, toolbars, snackbars...
Edit: This is an outdated answer.
see #Javier answer below as pointed out by #ondrejsv on comment.
It does not work anymore at least in Vuetify 2.1.9 and Vue 2.6.x. The solution by Javier seems to work.
Increase the z-index style property of your dialog.
<v-dialog style="z-index:9999;"
... rest of your code ...
I find it quite practical to wrap the map in an image, like this
<v-img
height="100%"
width="100%">
<l-map>
...
</l-map>
</v-img>
This way there is no need to do anything with the z-index.
I am on Vue2.x + Vuetify + Vue2leaflet.
I tried many things and finally what worked for me was to cover the with a . My code reads as :
<v-lazy>
<v-img>
<l-map>
.... rest of the code
</l-map>
</v-img>
</v-lazy>
This takes inputs on v-lazy from https://medium.com/#elralimi.lamia/leaflet-vuejs-vuetify-map-not-showing-well-in-a-modal-with-grey-parts-9a5d551ea472. v-img was suggested by geomuc in the above response.
Other options that I tried but failed were: this.map.invalidateSize(); , this.map.remove();, this.$nextTick(() => {...}, z-index.
I'm trying to use Skrollr to fix an element to the bottom of the viewport, if the bottom of the element hits the viewport bottom. This part is fine.
The problem is, after - lets say 1000px - of scrolling, i want to continue the scrolling, while i change the above mentioned fixed element to static again.
<div class="header">Header</div>
<div class="height-placeholder" data-anchor-target="#fixed-element" data-0-bottom="display:none;" data--0-bottom="display:block;"></div>
<div id="fixed-element" data-0="#class:;" data-bottom="#class:stuck;" data-1000="#class:;">Fixed at the bottom for a while</div>
<div class="content">
Regular content...<br>
</div>
http://jsfiddle.net/bkccg8x5/2/
So my idea was to create a placeholder above the fixed element and when the fixed element is stuck to the bottom, i simply add this element, so when i unstuck the fixed element, it would continue to scroll normal without any jump.
The problem with this solution is that i defined a fixed height for the placeholder, and this way it will only work correctly at a certain viewport height. Makes things more complicated, that every element on the site has a fluid height, so i need a solution that will work in every resolution.
Any ideas?
I solved this by creating a 1000px tall container and when the bottom of the container is hitting the bottom of the viewport, i change the fixed element to absolute.
<div class="header">Header</div>
<div id="height-placeholder" data-0="#class:;" data-bottom="#class:unstuck;">
<div id="fixed-element" data-0="#class:;" data-bottom="#class:stuck;">Fixed at the bottom for a while</div>
</div>
<div class="content">
Regular content...<br>
</div>
Here is the demo, works fine with any height:
http://jsfiddle.net/bkccg8x5/3/
I am attempting to put a weekly agenda in a row of thumbnails using Fullcalendar, but the resizing doesn't seem consistent.
1) On my work monitor, the agenda table renders correctly at full screen width, then changes to being taller than the neighboring thumbnails when the screen is narrowed, and then returns to correct rendering at full width. It also renders correctly when in mobile emulation and the row switches from horizontal to vertical configuration. The screen resolution is 1920x1080.
2) At home, the agenda renders initially as taller than the neighboring thumbnails at full width, then remains taller as the horizontal dimension decreases, renders correctly in mobile emulation, then renders correctly when the screen is restored to full-width. Screen resolution is 1366x768.
The base dimensions of the neighboring images are 465x300.
Relevant code bits. The jQuery calling the calendar (in the $(document).ready() section).
$('#calendar-index').fullCalendar({
defaultView: 'basicWeek',
height: $("#imgSource").height(),
width: $("#imgSource").width(),
windowResize: function(view) {
this.height() = $("#imgSource").height();
this.width() = $('#imgSource').width();
}
});
The HTML section:
<div class="row">
<div class="col-md-4">
<div class="thumbnail text-center"><div id="calendar-index"></div>Button Text</div>
</div>
<div class="col-md-4">
<div class="thumbnail text-center"><img id="imgSource" src="image1.png">Button Text</div>
</div>
<div class="col-md-4">
<div class="thumbnail text-center"><img src="image2.png">Button Text</div>
</div>
I've got a feeling that connecting it to a $("#imgSource").load() rather than $(document).ready() call would work, but I'm avoiding using deprecated functions if possible.
http://jsfiddle.net/sidhenimh/63e0h54o/
I found a fix for this, in case anyone else runs into a similar issue; it doesn't work perfectly, but it does at least make the horizontal scaling a lot more stable. There's a free jQuery plugin called "Datatables" that enables automatic horizontal scaling. Vertical scaling doesn't work still, but the table at least displays correctly initially regardless of monitor resolution/size.
Datatables Plugin
I tried several ways to override bootstrap3 nav-pills active color via CSS but it seems the LESS takes priority. I tried also using !important on the relative CSS properties with no luck: the LESS always has priority.
The only way I found is to obviously recompile bootstrap with customized nav-pills colors, but I'd prefer to use CSS so I can rely on CDN.
Any hint?
The relative affix/scrollspy is working of course via:
<body data-spy="scroll">
...
<ul class="nav nav-pills nav-stacked affix-top hidden-print" data-toggle="affix" data-spy="affix">
Relative jsfiddle
Not sure what you did, but this code works:
.nav-pills > li.active > a {
background-color:red;
}
// This changes the color of the active
.nav-pills>li.active>a:hover {
background-color:red;
}
// This changes the color of the hovered pill
I have a loadMask. This sets a gray background and on top of that the loading image that says Loading. From the documentation:
// Basic mask:
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();
The problem is I only want the small square with the loading image and the "loading..." label, I need to get rid of the gray background.
This gray background get dawn in .x-mask x-mask-gray div. I have tried setting the CSS of this div to different values for width and height but I can't make it work.
here is the HTML:
<div class="x-mask x-mask-gray" id="ext-gen1099" style="width: 1124px; height: 575px; ">
<div class="x-mask-loading">
<div class="x-loading-spinner">
<span class="x-loading-top"></span>
<span class="x-loading-right"></span>
<span class="x-loading-bottom"></span>
<span class="x-loading-left"></span>
</div>
<div class="x-loading-msg">Loading...</div>
</div>
</div>
If you see, width is set to 1124px and height to 575px, I need that to disappear, make it 0px or remove the whole x-mask-gray but without removing the child nodes. And hopefully view the "Loading..." label centered.
I hope you can help me, any suggestions are greatly appreciated.
Your best option is to override those styles but just make the background transparent instead of trying to remove the DIV completely.
If you add the following CSS it will leave the mask's background transparent.
.x-mask, .x-mask.x-mask-gray
{
background-color: transparent;
}
Alternatively, you could override the Ext.LoadMask's onBeforeLoad method and pass in true as the last parameter of the mask() method (which is the 'transparent' parameter) which will remove the x-mask-gray class from the masking DIV, as below:
var myMask = new Ext.LoadMask(Ext.getBody(), {
msg: "Please wait...",
onBeforeLoad: function(){
if (!this.disabled) {
this.el.mask(Ext.LoadingSpinner + '<div class="x-loading-msg">' + this.msg + '</div>', this.msgCls, false);
this.fireEvent('show', this, this.el, this.store);
}
}
});
myMask.show();
Unfortunately, you will still need the CSS override for the .x-mask class with this solution because it still adds a 30% opacity background.
Hope this helps
Stuart