Search code examples
htmlcsstwitter-bootstraprenderingmarkitup

MarkItUp rendering problems in combination with bootstrap

Within a webinterface I integrated MarkItUp as editor. But I have rendering problems:

On the one hand the inner (thick blue) frame doesn't fit to the outer one (see right side of the picture below).

On the other hand the thick blue frame extends to the iconbar. A resulting problem is that you have to make very, very smooth mouse moves to use the drop down menus - if you don't do so, they'll dispear very quickly.

wrong frame

For clarification a fiddle:

var mySettings = {
	markupSet:  [ 	
		{name:'Size', key:'S', openWith:'[size=[![Text size]!]]', closeWith:'[/size]', dropMenu :[
          {name:'Big', openWith:'[size=200]', closeWith:'[/size]' },
          {name:'Normal', openWith:'[size=100]', closeWith:'[/size]' },
          {name:'Small', openWith:'[size=50]', closeWith:'[/size]' }
    ]},
    {name:'Size', key:'S', openWith:'[size=[![Text size]!]]', closeWith:'[/size]', dropMenu :[
          {name:'Big', openWith:'[size=200]', closeWith:'[/size]' },
          {name:'Normal', openWith:'[size=100]', closeWith:'[/size]' },
          {name:'Small', openWith:'[size=50]', closeWith:'[/size]' }
    ]},
    {name:'Size', key:'S', openWith:'[size=[![Text size]!]]', closeWith:'[/size]', dropMenu :[
          {name:'Big', openWith:'[size=200]', closeWith:'[/size]' },
          {name:'Normal', openWith:'[size=100]', closeWith:'[/size]' },
          {name:'Small', openWith:'[size=50]', closeWith:'[/size]' }
    ]},
    {name:'Size', key:'S', openWith:'[size=[![Text size]!]]', closeWith:'[/size]', dropMenu :[
          {name:'Big', openWith:'[size=200]', closeWith:'[/size]' },
          {name:'Normal', openWith:'[size=100]', closeWith:'[/size]' },
          {name:'Small', openWith:'[size=50]', closeWith:'[/size]' }
    ]}
	]
}




$(document).ready(function()	{
   $('#markitup').markItUp(mySettings);
});
.markItUp .markItUpButton1 a {
	background-image:url(https://rawgit.com/markitup/1.x/master/markitup/sets/default/images/bold.png);
}

.markItUp .markItUpButton2 a {
	background-image:url(https://rawgit.com/markitup/1.x/master/markitup/sets/default/images/italic.png);
}
.markItUp .markItUpButton3 a {
	background-image:url(https://rawgit.com/markitup/1.x/master/markitup/sets/default/images/stroke.png);
}

.markItUp .markItUpButton4 a {
	background-image:url(https://rawgit.com/markitup/1.x/master/markitup/sets/default/images/list-bullet.png); 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://rawgit.com/markitup/1.x/master/markitup/skins/markitup/style.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rawgit.com/markitup/1.x/master/markitup/jquery.markitup.js"></script>
<!--script src="https://rawgit.com/markitup/1.x/master/markitup/sets/default/set.js"></script-->

<textarea id="markitup" cols="80" rows="20"></textarea>

I found out (by successive excluding) that 'bootstrap.min.css' (3.3.7) leads to the problems above. But I have no idea how to fix my problem.

Does anyone have a solution?

Solution

  • The problem was the css property 'box-sizing' - it was set to 'box-sizing: border-box;' by bootstrap. I fixed my problem by adding 'box-sizing: content-box;' to the class 'markItUp' in the corresponding css-file.