I am using dojo to render the panels on UI. I am facing one issue. All the panels get rendered on UI for few seconds(around 1~2 secs). After that I am getting a blank white screen. Now if I want to see the panels I've to do dragging the splitter OR maximize/restore that pane. I.e. basically I need to play with the width so as to get back the disappeared panels.Please suggest some solutions over this.
It would be better if you can provide more information in your question, your code is better. Otherwise, it is hard to tell what exactly cause this issue.
But you can try add resize call of the container of your panels somewhere after you startup this container.
Related
So I have a website that has a hamburger menu on mobile.
The problem is that whenever the page loads on a small device, the hamburger menu is way outside the view port to the right. This causes side scrolling issues and tons of white space.
I originally assumed I had written some css that was causing this, but after experimenting, I've come to realize that I do not know what is going on at all.
I have Gifs of the problem. I will also provide a URL if needed.
Heres the first gif
https://gfycat.com/GiftedPlaintiveEgret
So heres what is happening. I am inspecting the DOM of the webpage. If you pick any random element on the page, and edit a CSS attribute, then the menu fixes itself. It doesn't matter what element you select or what css attribute you edit; when you make an adjustment the problem is fixed.
Here is the second gif
https://gfycat.com/EasyIllustriousBlackbear
In this gif, the issue is literally fixed just by activating a CSS plugin called pesticide. Pesticide simply adds another external css sheet to the document that outlines everything in blue. Notice that even when I turn off pesiticde, my issue has been fixed.
And finally the third gif
https://gfycat.com/ContentRepentantBeetle
This is the most perplexing issue. It fixes the hamburger icon simply by resizing my browser screen. Obviously mobile users cant do this.
I truly don't understand this issue. I've tried to set a width of 100% on the nav element. I've written some javascript that when the DOM is ready, to add a css attribute to a a DIV in the footer and then remove it after a few seconds. This does not fix my issue. I would happily provide the javascript I wrote if requested.
Has anyone else ever had an issue like this?
EDIT
Here is another example. I use the browser Blisk to test my sites on multiple devices. Look at this
https://gfycat.com/BouncyFlakyGlobefish
When I first load up the site, I have my hamburger menu issue. When I tell the browser to view the site from a different device 'say switching from iphone 5 to iphone 6' it fixes the issue. I am so frustrated with this problem.
The white section's animation is increasing the width of the page (pushing the hamburger which is fixed to the right out of view), I'm not certain why this doesn't update properly after the animation is complete, but it would appear it requires a page re-flow before working correctly.
A possible CSS fix would be to add .bodymargins{overflow:hidden} though this may cause problems to other styling (untested on your site)
If this isn't an option, you could manually trigger a re-flow of the page shortly after loading (this is a slightly nasty option, but is better than it being broken)
Various re-flow options available here
It may be because you are using media queries and your browser width is not yet small enough for them to fire when you test.
If not, make the media queries and don't use the margin-left:auto for the smaller screen size?
I am working with Sencha Architect 3.1 , and i am facing an issue with Tree Panel collapse.
There is a view port with Border layout .
In the west region there is one Tree Panel and Panel with same width.
I have an event listener for click of leaf node in a Tree Panel in which i will give this.collapse(),
but when the Tree Panel is expanded next time it moves towards the right.
Here is a sample fiddle which i have done which has the same problem.
Please help me to find solution for this problem.
The big problem here is that you are attempting to collapse the TreePanel.
Let's take this in steps as to better understand the issue. There are 2 different options for the user to see the Tree Panel in your example.
The first would be to click the expand button tool within the header on the left side. But in this case the expand/collapse button tool has been hidden. Thus this way is not possible.
The second is to click anywhere(else) within the header along the left side.
The above methods for the user result in very different behaviors. If the first option were used, the panel would "expand", resulting in the other panels being pushed to the right so that the Tree Panel could be shown. If the second option were used, the panel would "float" over the existing panels.
I suggest you set hideCollapseTool: true and give the these two options a try to see for yourself.
With with knowledge, it should be easy to understand that performing this.collapse() is the incorrect way to "hide" the Tree Panel, because the panel was never expanded. Because it was not expanded, attempting to collapse the panel results in the x location of the Tree Panel to get offset incorrectly (Sencha should have error checking here, but obviously not).
So, the answer to question is to simply change this.collapse() to this.hide(). Unfortunately, there is no good way to tell the panel to unfloat itself and animate away. Either I don't know which method to call or Sencha has overlooked this issue.
I hope this was clear.
Dear Elders of The Internet -
I have created a headache for myself, and I hope you can help :-)
This is a two-part questions. I have a page with three panels, and want a horisontal slide. For this I have created buttons, see live demo here.
1. Horizontal slide, responsive
When clicking top right button "two right panes" I want the page to show just that: the two right panes only. This is not a problem on large screens, but I cannot get it to work on slightly smaller (media queries and further responsiveness, I think I will be able to figure out).
Similarly; when clicking "single left pane" I would like it to stretch the third (far right) panel, and hide the two others.
Clearly, I want it to respond to a 100% viewport.
2. Highchart
I cannot get the Highchart chart to act accordingly depending on the top left buttons sliding. The highchart will adjust if I resize the whole window, but I cannot get it to adjust when sliding panels. For a demo of a chart that works, scroll down in third panel (this is "homemade" graphs).
I have attempted to illustrate the problem in the screenshots below.
(I have posted another question relating to the same page, if you should be so inclined to take a look).
I suspect it is pretty simple, but I cannot for the life of me see where I went wrong. Any hints would be much appreciated. All the best.
Highcharts will resize only when window is resized, if you want to resize chart use chart.setSize(w,h), see reference.
Well, good people, I kinda figured it out myself... for the possible benefit of others; my solution was to set the width of the two first columns fixed (or rather; max-width), and thereby using calc to calculate the size of the third columns with minus the two fixed width divs.
width: -webkit-calc(98% - 520px);
width: calc(98% - 520px);
For the Highchart part of the question, much thanks to #Pawel for prompt answer. I haven´t entirely worked it out, as we are currently discussing whether using Highcharts or not is the way to go. If so, I guess I might be back with more questions later.
I have a few different Google Charts that i want to put inside the sections of a jQuery accordion. The problem is that all the charts that are not inside the first part of the accordion are smaller for some reason. Something about the accordion is shrinking these charts. I do not want them to shrink. Does anyone know what I can do to keep them from shrinking?
See this example which illustrates the problem: http://jsfiddle.net/dN3LL/
Thanks!
EDIT
So from the answer provided by brandwaffle, I considered that the graphics should render before the divs are collapsed into accordion form, so I simply put the $('#accordion').accordion(); line right after the graphs are finished rendering, and it works! See the fiddle: http://jsfiddle.net/dN3LL/4/
I've had this happen to me with various different pieces of content in the past. I think the problem happens because the content is rendered in a collapsed container, so it defaults to the smallest possible size (I've seen this with content in flexible-width divs inside of the accordion as well). The best solution I can offer for an across-the-board resolution is to hook whatever google chart generation (or other content display) to the accordionchange event that jQueryUI's Accordion offers: http://jqueryui.com/demos/accordion/
If you use the accordionchange event, the Google Chart will render itself after the accordion has switched to the correct section, which should eliminate any problems you're having as a result of the chart trying to render into a squished (i.e. unopened) container. There may be a better CSS fix for this, but I haven't found one yet.
one workaround is, load chart first and then run accordion code once chart load complete or run accordion code after 1-2 sec (setTimeout)
So, I'm making a fairly simple on page javascript application. While it's one page, I'd like to have several pages of data. I'd like to have the entire page be a giant horizontal accordion. Clicking on the headers on either side would switch to the requisite page. I'd like to to fill the entire page so it doesn't leave empty space. Does anybody know of such a javascript library?
Thanks for your time.
Edit: I could set the width and height of a normal accordion library from the size of the window at page-load, but that doesn't adapt to page resizing very well (at all.).
Check out iridium.com, a site I worked on a while back. It's using a jQuery plug-in called "slide deck" which may suit your needs. You'd have to style it for full-page of course.
To readjust the main div per window resize:
window.onresize = function(event) { /* adjust fullscreen div here */ }
I recently worked on a fairly similar project for my personal portfolio - much like typical accordions but to prevent user confusion from the extra-tall accordion bits, the window scrolled as the giant accordion opened. check my profile if you care to take a gander