expanded modal to fit wider tables. Fixed modal transition error

chgibb · Nov 21, 2018 · b2f5247 · b2f5247
1 parent bb2cda6
commit b2f5247
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/src/circularGenomeBuilder.html b/src/circularGenomeBuilder.html
@@ -18,15 +18,15 @@
   	</head>
 	  <!-- Modal -->
 		<div class="modal" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true" style="width:100%;height:100%;">
-  			<div class="modal-dialog" role="document">
+  			<div class="modal-dialog modal-lg" role="document">
     			<div class="modal-content">
       				<div class="modal-header">
         				<h5 class="modal-title" id="modalTitle">Modal title</h5>
         					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
           						<span aria-hidden="true">&times;</span>
         					</button>
       				</div>
-      				<div id="modalBody" class="modal-body">
+      				<div id="modalBody" class="modal-body" style="width: 100%;">
 
       				</div>
       				<div id="modalFooter" class="modal-footer">

diff --git a/src/req/renderer/circularGenomeBuilderRenderer/masterView.ts b/src/req/renderer/circularGenomeBuilderRenderer/masterView.ts
@@ -111,7 +111,9 @@ export class View extends viewMgr.View
         modalContent.style.left = "0px";
         modalContent.style.top = "0px";
         (<any>$(".modal")).modal("show");
-        document.getElementsByClassName("modal-backdrop")[0].classList.remove("modal-backdrop");
+
+        if(document.getElementsByClassName("modal-backdrop")[0])
+            document.getElementsByClassName("modal-backdrop")[0].classList.remove("modal-backdrop");
     }
 
     /**

diff --git a/src/req/renderer/circularGenomeBuilderRenderer/writeAlignsModal.ts b/src/req/renderer/circularGenomeBuilderRenderer/writeAlignsModal.ts
@@ -39,7 +39,7 @@ export function writeAlignsModal() : void
         else
         {
             body = `
-                <table style="width:100;">
+                <table style="width:100%;">
                     <tr>
                         <th>Options</th>
                         <th>Name</th>

diff --git a/src/styles/circularGenomeBuilder.scss b/src/styles/circularGenomeBuilder.scss
@@ -49,6 +49,11 @@
       stroke-dashoffset: 200px;
   }
 }
+
+.modal-lg {
+  width: 80%;
+}
+
 .draggable {}
 
 /*