Superfish Main Menu not filling block vertically - drupal-7

I am using Superfish with the Drupal 7 At Commerce theme (Adaptive Themes).
The main menu is not displaying properly. The menu is only filling the upper half of the Main Menu Block as provided by the theme. Also, the menu items are crunched together too closely.
The image shows the menu, at only half its vertical size with menu items crunched together.
I have used this theme with superfish before and never had to do any special styling.
I think I am missing something or have not configured something correctly.
I appreciate any help.
Jack

I found the problem. It is in the theme/sub-theme. It turns out that the minor version of the theme and sub-theme must match. I reinstalled both and the problem went away.

Related

Overlay not applying to react big calendar

I'm using react-big-calendar with react-sidebar and if the sidebar opens, all the area is covered by overlay but some elements are visible on the top.
What can be the problem?
P.S: I've also given the z-index to both but nothing worked for me!
react-big-calendar with react-sidebar
I don't know the particulars of react-sidebar, but it's definitely a z-index issue. Does react-sidebar provide a Portal option for it's overlay (I'm not seeing one)? RBC is dynamically writing out the events to the page, and using 'auto' z-index, so if your overlay is defined first (like the sidebar is on the left, and calendar on the right), then that's what's happening.

material ui, layout component for desktop to mobile responsive transition

I am writing a Single Web App with material ui, that needs to be responsive, but I do not know which is the control where I must allocate the mains component, if it is a grid or a box.
The next image show the main components arrangement in md,lg,xl
The next image show the main components arrangement in sm,xs when width < 960
In the web I found many complex and very difficult to understand layouts, but not find a basic example. Some like "material ui responsive for dummies".
The mobile version, will have a breakpage between the Appbar and Sidenav, both will occupy the full height, and the Map in the second page will fill the screen.
I did it for you with MU Grids and media queries, if you have questions, ask. I am always ready to help. This is codesandbox link. Let me know if it help you.
https://codesandbox.io/s/charming-shirley-oq6l5
Show my codesandbox answering your problem : https://codesandbox.io/s/amazing-sound-1nj87
It display your layout for md lg xl correctly. For xs and sm screens, sidenav & map take full height with a break page between sidenav and appBar
Thanks to both, it solved the main part o what i need.
Also need to implement a change of page.
I forget to mention that the map will be React-Leaflet,
so need to implement a flap button over the map for the mobile version.
The button is for scroll to up, because any finger movement in the map area only will affect the map content.
Do not will have effect in the scroll.
Another thing to implement is the break page concept:
The behaviour of the break page is like when you see a pdf in presentation mode and press
the keyboard button Repag - Avpag, it change all the content and never see the half top and the half down.
Grettings

ExtsJs4 switch panels

In ExtJs4 Layout Examples how do they switch right panel content when user clicks on menu items? Are there any examples with code samples?
I want exactly the same feature.
They create content panel with layout 'cards', add all examples as individual panels in to it, and then make them visible when you click through them. Check the source code - it's pretty obvious.

Drupal 7 Bartik theme main menu

I am dabbling fresh with Drupal 7 and so far having little success with getting the Menu to behave the way I want it to. My CSS and PHP basics are strong, but understanding Drupal's system is in itself a huge challenge and hence my doubts.
For those acquainted with the Bartik theme, the main menu defaults itself in the header.
I am trying to create a floating/persistent menu that encapsulates the entire width of the website. But I am not sure where I need to go in and make the required changes.
One option I have is to remove the main menu from the Bartik header and then introduce the main menu block in the 'featured' region. Here the menu is rendering itself horizontally instead of vertically the way i want it to be.
Essentially the question is, How do I alter the main menu in the Bartik theme? Where do I need to get in and make changes.OH, and I have sub-themed it, just to let you know.
Thanks much !
Parijat
I'm not sure I follow but it sounds like you need to create a new region to put the menu in. You add these in the themes .info file.
region[region_name] = Region name
Print the regions contents out in your themes page.tpl.php file.
Clear the cache and it will show up in the blocks page.
You can the style it how ever you want.

jqGrid IE7 hover nightmare

I've wasted too much time on this and am begging, begging, I tell you, the stackoverflow community for help!
I'm a new jqGrid user, and have my grid working as I want it to, but at the moment, cannot get a row to highlight in IE 7 as the mouse is hovered over it. Our shop is currently running IE7, so changing browsers/versions is not a possibility. Hover works great in Firefox, does not work in IE7.
I have googled endlessly for "jqgrid ie7 hover", "jquery ie7 hover", and any iteration of "ie7" and "hover", and "css" and all that.
I have tried so many variations of DOCTYPE declarations it ain't funny. I've tried reverse engineering the http://www.trirand.com/blog/jqgrid/jqgrid.html demo pages until my fingers are aching. Yes, the hover works on the demo pages. No it ain't working on my own page. I have tried manually passing in the ui hover CSS classes directly with different attributes and the !important flag just to see if I get anything. Nothing.
Now here is what does happen when I hover over a jqGrid row with IE7: The bottom and right borders of the table cells will change color, but the background color does not. So, I know the hover highlighting is working for the cell borders, but not for the cells or row itself.
As a diagnostic aid, I slapped in a javascript alert() to bang when I hovered over the table. It works at the table level, but does not ever fire if I set it to fire if I hover over a row or cell. I used the IE Developer Toolbar DOM parser to verify I'm calling it right. I'm wondering if jqGrid takes over that functionality, though.
Anyhow, folks, the short version is: Why can't I get row highlighting to work in IE7?
Help me Obi Wan Kenobi, you're my only hope!
I'll answer my own question. The problem was a conflict with a separate .css file. My page uses the 960 Grid System for layout control. One of the items used as part of the grid system is a "reset.css" which was conflicting with the jqGrid hover display in my app. I commented out the call to reset.css and the problem went away. Fwiw, I did not see any other adverse affects to the grid system by leaving out reset.css.

Resources