Silly question, but I can't find any reference to this issue online other than an unanswered subreddit thread.
Sometime within the last few weeks, the layout for the redux-devtools-extension in devtools stopped being responsive. I used to be able to resize the window, and the panels would stack on top of each other, or the panels would get wider to adjust for the changed window width. Now, it's completely static, and a lot of info is hidden unless I get my window really big.
Chrome is fully updated, redux-devtools-extension is fully updated, and there are no issues applying it in the redux store. Does anyone have any ideas??
The screenshot shows how a good chunk of the right panel ("State") is covered and the layout doesn't adjust when there's overflow.
Related
I am new to Web Development and React (and fairly amateur at CSS), so there must be some fundamental issue with my understanding of how flex works.
With reference to this codesandbox, the website that I am designing (for upskilling myself) seems to have (for the lack of a better word) some kind of 'shunt' in the Home Page. To elaborate, keep a close watch on the navbar on top. As soon as you click on 'About', the whole page seems to move a little to the right. Only the home page is being affected in this manner.
I have tried figuring out the issue on my own using the Browser's handy 'inspect tools'. Came to the following conclusions.
It seems that the Home page has the width of 1519px whereas all other pages have the size 1536px. I am unable to understand why there is a difference of 15px at all.
Trying to isolate the issue (by removing all elements and adding them back one-by-one to see which one is erroneous), I realised this 'shunt' is being caused whenever I place a flex element inside another flex element. Thanks to other stackoverflow answers, I found that the dimensions of a flex element depend upon the parent (which in turn is another flex element with ambiguous sizing properties).
Issue
Even when I resolve the above mentioned problem, there still remains the "latest-post-card" element which impacts the Home Page orientation. Further, when I remove the height property for the "latest-post-card" everything falls right into place, perfectly, just the way I want it to appear, save for the fact that the height of this card is variable. For the sake of consistency, I would like this card's height to be fixed (as I will keep updating the contents of this card dynamically through the backend).
Requesting fellow developers to shed light on the issue here; would appreciate if anyone can point out what the root of the problem is and how I can remedy it.
What you're referring to as a "shunt" is caused by the other pages taking up less height and therefore not needing the scrollbar. When the scrollbar disappears, the page basically expands by the width of the scrollbar and therefore the content jumps slightly to the right.
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
I have an issue on my company's ecommerce site. On non-widescreen monitors, if you one of our pages while the browser is zoomed to 110% or higher, the layout gets messed up (specifically, the right side Div, which comprises 80% of the page (roughly) gets pushed below the left side div).
The site is built with the Smarty templating engine and uses pinnacle cart, but both have been heavily modified by the previous developer and myself. What can be done to improve the site's versatility with browser zoom? It wouldn't be an issue, except my boss alway has her browser zoomed to 110%.
Example page: http://www.buynowornever.com/handbags/ (but any page with the filters on the left side will do it).
There's obviously something wrong with the spacing on the page, such that when the browser attempts to reformat it in the zoom, the right div gets too large and overflows. I've tried correcting this with various overflow tricks, but have been unsuccessful.
I've looked through several answers here (including How to prevent the floating layout wrapping when firefox zoom is reduced) and on other sites and have not been able to make them work for my situation. My CSS and Web Design skills are not very strong.
The issue was bad data. Some of the category headers that I was using had close divs hidden in them. This caused layout issues on some pages, but because of the hierarchy, was not utterly fatal (and chrome handles some of these problems pretty gracefully). I cleared up the data issue and the pages all work as intended.....
I really should remember GIGO in these situations.
I came across a weird bug with jsfiddle. The layout I get when I visit the site is completely broken. This bug happened when I dragged the vertical resize bar while my second display disconnected. See this the result:
There is probably a way I can get this fixed from the inspector by resizing it manually, locating left panels and changing their width manually and than playing with the vertical resize bar; I'l keep investigating.
Where are the layout positions stored?
Before asking this question, I tried to reset my cookies, I had a look into local storage and session storage (they were both empty). I know it's a local issue because jsfiddle is too awesome to break like that, it's not because of the code in the fiddle, I opened the fiddle in private navigation and worked like a charm.
Edit: I fixed my issue by deleting .column.left, #handler_vertical appeared, I moved it and now data is fixed, but I still don't know where this is stored ;)
I had this same issue and worked out that it was after I reduced the size of my browser window, I'd accidentally moved the vertical bar left, which caused this to 'disappear', so when I resized the window to full, no vertical bar!
To fix, I searched the inspector element for 'handler_vertical', and around this were column left and column right, with widths set inline. Simply remove these inline widths and it's back to normal.
Strange that some js is still adding itself even after clearing cache and cookies!!
I accidentally deleted an HTML node in Chrome's inspector, which broke JSfiddle's layout.
When I reloaded the page, I was surprised to see the layout was still broken.
I cleared my cache and made a hard reload, but JSfiddle's layout was still broken!
The solution came out recently : I changed Chrome's theme... and it fixed JSfiddle.
Sometimes you just don't want to understand.
I know this was solved a while ago, but I just wanted to add that the FAQ acknoledges this and pasting Layout.setWindowSizes(null)into the browser console fixes the layout.
Source: http://doc.jsfiddle.net/faq.html
Same just happened to me, reloading the site had no effect but deleting last cached elements made it
I have recently taken control of a large website. My problem is that sometimes, on some browsers/ computers, when you navigate between pages (or hit refresh) the entire content loads slightly to the right, then half a second later, jumps back to the left where it should be. The distance is only around 5mm, over the course of a second, but it is noticeable.
Things that are useful to know:
It is a wordpress site, but has only basic functions- The menu contains jQuery but there's little other javascript to prevent loading.
All content is wrapped within a container that is centred using
{margin: 0 auto;}
There are several CSS style sheets, and some major tags such as the container have been defined several times- i even found a discrepancy between the width between two of these, but when fixed everything still jumps.
There are no images on the side that are causing it to jump by being slow to load.
The content only jumps if the content is greater than the screen height- that is, it goes off screen.
Content will jump with my old computer, but will not jump with my new computer, on the same network and connection.
On an older computer content will jump with IE 10, but not when you put IE10 into compatibility mode.
I'm afraid that i don't have the permission to put a link to the website, so i've tried to put everything i know about it here. I know that makes it more difficult, but any pointers to put me in the right direction will help a lot!
Update!
The scroll bars were the problem- I used the answer from this thread: Making the main scrollbar always visible
and all jumping has stopped!
You should simplify the problem removing 'things' until you isolate it.
If you don't have a preproduction or development environment to test make a copy of the page where the problem still exists. Then start removing things. If any div needs some content so the layout is stable replace anything dynamic or complex with simple text or images.
If the problem seems fixed removing something don't think you got it, undo what you just did so it still fails and keep on removing parts or functions that definitely have nothing to do with the problem.
When you have a minimal example that is still failing it will be much easier to figure out what the problem is or if not post the example here so we can help.