Discussion on 'TheThemeMachineResponsive' with Bing.Maps

Topics: Administration, Customizing Orchard, General
Dec 1, 2014 at 7:16 AM
After activating the 'TheThemeMachine Responsive'(TTMR) I'm no longer able to run the Module: 'BingMaps'.
Bing.Maps seems to be a pretty straight forward Orchard module BUT I'm struggling since months to make it work with
the TTMR (Yes, it works flawless with the 'TheThemeMachine' provided by DEFAULT in Orchard 1.8.1).

In this case, just changing the Theme, is NOT an option.

QUESTION: Is there anybody out there running the TTMR and using Bing.Maps? or willing to test this?

I, of course, reported this on the relevant CODEPLEX project site and in the Orchard discussions!? see below reference:
Orchard; Wiki Link: [discussion:554215]
https://responsivetheme.codeplex.com/workitem/6

I'm very aware that I probably miss something simple!
Thanks in advance for your time and advise, ed
Dec 9, 2014 at 5:13 PM
After some more digging I found:
Bing.maps generates besides a lot of other <div>s the following:
<div class="MSVE_Map" style="left: 0px; top: 0px; z-index: 1;">
In the meantime I figured when 'un-clicking' (DOM explorer F12) in the MVSE_Map class "position: absolute"
I can see the map!

This class is in 'mapcontrols.css'; I have no idea how I could override this!?
More bizarre: when using TTM: it works with 'position: absolute!'

I'm definitely out of ideas
thanks for any hints, ed
Dec 10, 2014 at 4:50 AM
In this theme, in site.css there is this line
  img, object, embed, video { max-width: 100%; _width: 100%; height: auto; } /* Fluid images */
Anywhere after, add this line
  .widget-bing-map-widget img { max-width: none; }
Another thing, for a responsive theme you may want to specify a width in percentage in place of a fix width in pixel
To do that, copy the BingMap.cshtml in YourTheme/Views/Parts/

Replace
  <div id="BingMap@(mapIndex)" style="position:relative; width:@(Model.Width)px; height:@(Model.Height)px;"></div>
With
  <div id="BingMap@(mapIndex)" style="position:relative; width:@Model.Width; height:@Model.Height;"></div>
Now, at least you have to specify an unity in your settings, e.g width = 80% and hight = 150px

Regards
Dec 10, 2014 at 5:59 PM
Edited Dec 11, 2014 at 7:19 AM
hi jtkech,
thank you so much ... upfront: all is working again using your advise!
I can appreciate your solution, HOWEVER, don't you think that a final solution should be part of the
official 'TheThemeMachine Responsive' theme package!?
In that context thanks for reporting it also on my CodePlex TTMR issue!

Hope somebody will take it up
again thanks for your time, ed
PS: as far as the BingMap.cshtml is concerned: I prefer to stick with the original version to control the size!