I've created a responsive dropdown/drilldown megamenu in Foundation 6.5.3.
It works great in every browser except Microsoft Edge and IE11. I expected problems in IE, but the edge issues threw me for a loop.
In Edge, the menu items get stacked vertically even though it is supposed to be a horizontal menu. As illustrated by this pen:
https://codepen.io/denpub/pen/KLRQGO
right now the divs that wrap the menus and the one that wraps the large menu contain both the grid-x and cell styles:
<div class="grid-x cell ..."></div>
seems to be the what causes the stacking issue and if I separate these like so:
<div class="grid-x ..."><div class="cell"></div></div>
it fixes the stacking issue in Edge, but causes the menu to lose the nice flex spacing in all browsers as illustrated with this pen:
https://codepen.io/denpub/pen/KLRojm
In IE11 all the menu items stack on top of each other. If anyone has a suggestion to resolve this it would be greatly appreciated.
My guess is it's the expanded class on the parent menu. This could cause the li's to go full width when there is less space.
Related
I’m a big fan of Firefox’s mini grid view in the web inspector, which provides
a small version of the currently overlaid grid, which is in proportion to the real thing.
Hovering over the different areas of the mini grid causes the equivalent area on the grid overlay to also highlight, along with a tooltip containing useful information such as the dimensions of that area, its row and column numbers, etc. [my emphasis]
It bugs me to no end, though, that the tooltip emphasised in the quote does not appear if the highlighted grid row/column is too close to the viewport’s edge. Instead of adjusting for this by moving the tooltip into view, the behaviour seems to be just to not show it at all, which rather defeats the purpose – especially when, as far as I know, this tooltip is the only way to see the calculated size of empty grid tracks.
I can’t find any bugs regarding this on Bugzilla, but then I can virtually never find anything on there, so there’s a decent chance I’m just bad at searching.
Is there some setting I can’t find that will allow me to see the tooltips even for edge rows/columns? Or if this is just a bug, has it been addressed?
I've tested this in Firefox 98.0 and could reproduce it. As this is definitely a bug in the Firefox DevTools and I couldn't find one either in Bugzilla, I now created a bug report for it.
I'm working with Chart.js version 2.8 so not sure if it is in the version or if it is a common issue.
My chart loads fine at first but then my page refreshes and the duplicates can be seen when I hover on any of my charts(there are 4).
The duplicate looks like this:
!https://postimg.cc/3db6xFTz
I'm not sure what to try or where to start looking at what causes this. I've tried searching for similar cases but no one seems to have this issue. Any advice would be greatly appreciated.
Right, well I found the problem and the solution.
The root of the issue came about when my page refreshed and the chart would resize. I then tried the Chart.defaults.global.maintainAspectRatio= false;command which worked but duplicated the X-axis tick labels.
The problem: These two commands cannot work together. It causes the duplication on hover.
Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio= false;
The solution: found in the chartjs.org documentation.
Detecting when the canvas size changes can not be done directly from the canvas element. Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the container size (example):
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
<canvas id="chart"></canvas>
</div>
Note that in order for the above code to correctly resize the chart height, the maintainAspectRatio option must also be set to false.
I added the div's to encase my canvas, changed the sizing and this fixed my problem :)
OK, so I have noticed this on a couple of sites that I am building right now, but for debugging purposes let's use this one; http://bsmgpdev.org.uk/
When viewing on a mobile (iPhone X currently here) and clicking either the search or menu icon, the slider seems to jump/expand horizontally as the reveal modal opens/closes.
Now, I'm entirely sure it's something I've done, or missed, I don't doubt that for one minute, but could anybody point me in the right direction or (even better) tell me how to fix this?
Thanks
I am using Foundation off-canvas and the reveal-for-large class so that the sidebar is always visible to larger screens. In Chrome and Firefox, the sidebar always appears open between page loads, which is great. However, upon each page load in Edge and IE, the sidebar first does not appear (although left margin space has been reserved for it) - and then the sidebar slides in to fill the space.
It is distracting to have this animation on each page load. Is there any way to force the sidebar to stay open in IE? Or disable the animation perhaps?
Change the $offcanvas-transition-length SASS property to 0s.
Main aim is wanting to draw Tab's within the draw area of the Toolbar of the Applicaiton for a NoteBook or Tab's to use the above space instead of being bellow the toolbar.
The frame work we're using is WxWidgets, C++/C. I have looked around but have not been able to find a solution or if anyone has done a similar approach with drawing tab's actually inside the toolbar itself.
I read some Microsoft MSDN articles and they recommend against controls drawing over controls.
I did some test's today, and think I've come up with a solution. My solution is to draw the window like normal, but have the NoteBook on the right in a child window that is dynamically resized and repositioned so that it's tab's are overlay on-top of the toolbar to make the most effective use of the area. I would have to deal with on focus and lose focus window messages, but this is the most elegant way I can think about achieving the task.
Any Idea's you can recommend or problem's I may face with following this approach.
I would be concerned about using overlapping widgets like this. Although it may not look quite the same visually I would suggest looking at wxToolBook which puts tabs in a toolbar and would solve your problem, you could use the GetToolBar method to insert your own toolbar items.
If that wasn't close enough visually to what you are looking to achieve I would suggest deriving a new control from wxBookCtrlBase and then creating a tab control with custom drawn tabs which you could add to the toolbar using wxToolBar::AddControl.