EPiServer + Bootstrap 3: dojo controls render incorrectly on edit

EPiServer + Bootstrap 3: dojo controls render incorrectly on edit mode

Keijo Mukku

Vote:

Hello,

I have a problem on how editmode renders dojo controls with bootsrap 3. For some reason dojo gets confused with new margins on bs3 at editmode. See image below:

After I run following script on browser console everything gets sorted out:

jQuery(".epi-overlay-blockarea").each(function () {
jQuery(this).css({ "margin-left": "-15px", "margin-right": "-15px" });
});

jQuery(".epi-overlay-block").each(function () {
jQuery(this).css("left", $(this).position().left + 15 + "px");
});

Any ideas how to run this fix automatically AFTER all dojo overlay controls are loaded? Or am I missing some obvious way to fix the issue?

#121608

May 15, 2015 8:37

Grzegorz Wiecheć

Vote:

Hi,

I had similar problem with my ContentArea. I changed the box-sizing to border-box and that helped. The EPiServer width calculation start working. But I didn't used css framework and don't think that it could be that easy to do with bootstrap.

Maybe you could apply your fix for the edit mode only. You can do this by adding to Layout/MasterPage markup code like:

if PageEditing.PageIsInEditMode

{

$(document).ready(function(){

// add your fix here

});

</script>

}

The PageEditing.PageIsInEditMode condition is true only when you viewing the page in EditMode, so it will not break the ViewMode.

#121687

May 17, 2015 21:46

Keijo Mukku

Vote:

Hi,

Thanks but I did try those already. Bootstrap 3 is using box-sizing: border-box;. That Javascript fix should be done on dojo/wait for dojo widgets to be rendered.

Seems like it's the negative margin of .row that causes layout to break. Removing the negative margin on edit mode partially solves the issue, but result is not pixel perfect.

#121806

Edited, May 18, 2015 8:33