Fixed #280: Some CSS issues when used in combination with bootstrap

HISTORY.md

@@ -7,6 +7,7 @@ https://github.com/josdejong/jsoneditor
 
 - Implemented method `editor.destroy()` to properly cleanup the editor (#278).
 - Fixed #268: JSONEditor now trims text in fields and values.
+- Fixed #280: Some CSS issues when used in combination with bootstrap.
 
 
 ## 2016-02-15, version 5.1.5

src/css/contextmenu.css

@@ -37,6 +37,11 @@ div.jsoneditor-contextmenu ul li button {
   color: #4d4d4d;
   background: transparent;
 
+  font-size: 10pt;
+  font-family: arial, sans-serif;
+
+  box-sizing: border-box;
+
   line-height: 26px;
   text-align: left;
 }

src/css/jsoneditor.css

@@ -47,11 +47,18 @@ div.jsoneditor-value.jsoneditor-empty::after {
   content: "value";
 }
 
-div.jsoneditor-value.jsoneditor-url {
+div.jsoneditor-value.jsoneditor-url,
+a.jsoneditor-value.jsoneditor-url {
   color: green;
   text-decoration: underline;
 }
 
+a.jsoneditor-value.jsoneditor-url {
+  display: inline-block;
+  padding: 2px;
+  margin: 2px;
+}
+
 a.jsoneditor-value.jsoneditor-url:hover,
 a.jsoneditor-value.jsoneditor-url:focus {
   color: #ee422e;

src/css/searchbox.css

@@ -7,10 +7,18 @@ table.jsoneditor-search div.jsoneditor-results {
   background: transparent; /* For Firefox */
 }
 
+table.jsoneditor-search div.jsoneditor-results {
+  color: white;
+  padding-right: 5px;
+  line-height: 24px;
+}
+
 table.jsoneditor-search {
   position: absolute;
-  right: 2px;
-  top: 2px;
+  right: 4px;
+  top: 4px;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
 
 table.jsoneditor-search div.jsoneditor-frame {
@@ -32,12 +40,6 @@ table.jsoneditor-search input {
   line-height: 20px;
 }
 
-table.jsoneditor-search .jsoneditor-results {
-  color: #4d4d4d;
-  padding-right: 5px;
-  line-height: 24px;
-}
-
 table.jsoneditor-search button {
   width: 16px;
   height: 24px;