November Happy Hour will be moved to Thursday December 5th.
AI OnAI Off
EPiServer + Bootstrap 3: dojo controls render incorrectly on edit mode
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
{
<script type=text/javascript>
$(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.
May 17, 2015 21:46
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.
Edited,
May 18, 2015 8:33
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?