html - MarkItUp rendering problems in combination with bootstrap -


within webinterface integrated markitup editor. have rendering problems:

on 1 hand inner (thick blue) frame doesn't fit outer 1 (see right side of picture below).

on other hand thick blue frame extends iconbar. resulting problem have make very, smooth mouse moves use drop down menus - if don't so, they'll dispear quickly.

wrong frame

for clarification 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 {  	background-image:url(https://rawgit.com/markitup/1.x/master/markitup/sets/default/images/bold.png);  }    .markitup .markitupbutton2 {  	background-image:url(https://rawgit.com/markitup/1.x/master/markitup/sets/default/images/italic.png);  }  .markitup .markitupbutton3 {  	background-image:url(https://rawgit.com/markitup/1.x/master/markitup/sets/default/images/stroke.png);  }    .markitup .markitupbutton4 {  	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) 'bootstrap.min.css' (3.3.7) leads problems above. have no idea how fix problem.

does have solution?


Comments

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

javascript - Z-index in d3.js -