locked
[Bug] display:flex on document body causes pushpins to be distorted in Map controls. RRS feed

  • Question

  • jsFiddle with fix at https://jsfiddle.net/air_hadoken/L5gvfkvd/ 

    jsFiddle without fix (shows breakage) at https://jsfiddle.net/air_hadoken/L5gvfkvd/1/

    Problem description:

    Given Bing Maps is loaded into an HTML document

    And a Map control is displayed

    And the document body has CSS property display:flex

    And the document body has CSS property align-items:stretch OR no align-items property

    When a pushpin is added with a custom icon

    Then the display of the pushpin has incorrect dimensions

    Analysis:

    Bing Maps web controls create an Image element and apply it as a direct child of the document body to import image data into the canvas used by the Web controls.  When the body is a flex layout, child elements are stretched by default, i.e. stretching is the default method for aligning items into a flex layout's cross dimension.  This also stretches images, leading to the images imported into the Web control having the document body's full width (in a column layout) or height (in a row layout).

    Recommendation:

    When creating image elements for importation into a Map control's canvas, always directly style the element with align-self:flex-start -- this has no effect on non-flex layouts, and corrects for possible stretching for flex layouts.

    Monday, May 9, 2016 7:44 PM

Answers

  • Good news, this issue has now been fixed in the experimental branch. You can test this by adding "&branch=experimental" to the map script URL. This will be merged into the main release branch by the end of the month.

    [Blog] [twitter] [LinkedIn]

    Monday, June 6, 2016 9:28 PM

All replies

  • Thanks for reporting. I have logged a bug for our developers to investigate.

    [Blog] [twitter] [LinkedIn]

    Monday, May 9, 2016 8:06 PM
  • Good news, this issue has now been fixed in the experimental branch. You can test this by adding "&branch=experimental" to the map script URL. This will be merged into the main release branch by the end of the month.

    [Blog] [twitter] [LinkedIn]

    Monday, June 6, 2016 9:28 PM