How do you fix VM backend layout?

[billynair]

The back end of VirtueMart is not displaying the way I believe it was intended to show. How do you get the main content to display up next to the menu bar? We are looking for a CSS fix in the template like float, width, or z-index.

[See Screenshot]

Background info{
We recently moved to Joomla and Virtuemart, it just happened to be just after the Joomla update to 3.4.1 and before VM 3.0.6.4, so there were some weird issues. One was with the price updates, fixed with the VM update. This backend layout is not a big deal, it is only in the back end so it doesn't affect our customers, but it sure slows things down on the production side of things. Every time we hit save or switch tabs we have to scroll down the page.
We tried 3 different backend templates, 2 that came standard with Joomla, and one that we made, but we can not get the DIVs to butt up against each other. We even tried dropping the margins/padding to 0, reducing the widths of the menu-wrapper to 100px and the admin-content to 300px with no luck. We are not really sure where else to look for a solution.
}
also{
This is only a problem in older Firefox and Safari, Chrome, IE, Opera, and newer Firefox do not have this problem. One of our machines, the main production machine can not be upgraded to use a newer Firefox due to issues with plugin upgrades and other factors that are restrictive at this point. This means that we need to have this work without changing the browser we are using. I am sure there is a CLASS or ID that we can float or change the width of to make this work.
}

[reinhold]

Which Browser do you use? I experience the same behavior with IE 8 and 9 (which we are still using at work), but all other browsers (firefox, chromium, Android browsers) work fine for me.

Best regards,
Reinhold

[billynair]

Thank you @reinhold, you are right, it is due to our browser, and I forgot to add that into the description in the question. It works fine on the other few computers in the office, but I have to use an older version of Firefox for various reasons for development, and rather than having 2 different browsers open to circumnavigate this minor issue, I would rather tweak a float, width, or z-index of the DIV to make it work on this machine.

Thank you for your contribution.

[Milbo]

Billynair,

Code Select Expand


but I have to use an older version of Firefox for various reasons for development,


?? I doubt that. We use the flexboxes, yes. The reason is that usually admins can use better browsers and in fact you are the first having problems with it (and telling us).

[reinhold]

As a solution, you can try adjusting the CSS for the VM backend to remove the flexbox CSS feature and instead use floats. In particular:

Code Select Expand

.virtuemart-admin-area { display: block; }
.virtuemart-admin-area #menu-wrapper { float: left; }
.virtuemart-admin-area #admin-content { margin-left: 221px; }

This works for me with IE9 (which does not support flexboxes) as well as with chromium 41 (which does support flexboxes) and firefox 36.

Best regards,
Reinhold

[billynair]

Code Select Expand

.virtuemart-admin-area { display: block; }
.virtuemart-admin-area #menu-wrapper { float: left; }
.virtuemart-admin-area #admin-content { margin-left: 221px; }

Best regards,
Reinhold

w00h00!! That is exactly what I was looking for! I just couldn't figure out which DIV to tweak!

?? I doubt that. We use the flexboxes, yes. The reason is that usually admins can use better browsers and in fact you are the first having problems with it (and telling us).

There are certain Firefox Addons that I constantly use that aid in speed and functionality that are not ever going to be updated, newer addons are just not as good, and the few minor setbacks I get from stuff like this issue are just not enough to make me want to upgrade. I upgraded last year and had to revert back after a month, I just can't work as efficiently with out the addons... it is absolutely not a reflection on VirtueMart, I just assumed it was a minor tweak in the CSS that I just couldn't chase down.

[Milbo]

Interesting hint. Yes I experienced also that some good old tools are not anylonger available for a new Browser version. Please remove the css and go to the file \administrator\components\com_virtuemart\helpers\adminui.php.

Around line 88, there is

Code Select Expand


<!--[if lt IE 9]>
<script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>

my idea is just to add here the css

Code Select Expand


<!--[if lt IE 9]>
<script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<style type="text/css">
.virtuemart-admin-area { display: block; }
.virtuemart-admin-area #menu-wrapper { float: left; }
.virtuemart-admin-area #admin-content { margin-left: 221px; }
</script>
<![endif]-->