css for toggle button

ICRAR · Dec 19, 2024 · 6c9ea7e · 6c9ea7e
1 parent 3e9ddeb
commit 6c9ea7e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/static/tables.css b/static/tables.css
@@ -267,10 +267,27 @@ td:first-child input {
 
 #showOverwriteSeperately{
     background-color: transparent;
+    color: white;
+    border: none;
+    position: absolute;
+    right: 10px;
+    top: 5px;
+    height: 20px;
+    width: 20px;
+    padding: unset;
+}
+
+#showOverwriteSeperately div{
+    position: relative;
+    width: 100%;
+    height: 100%;
 }
 
 #showOverwriteSeperately i{
-    background: none;
+    position:  absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0px;
 }
 
 .eagleTableWrapper i{

diff --git a/templates/node_parameter_table.html b/templates/node_parameter_table.html
@@ -96,7 +96,11 @@ <h5 class="bottomWindowHeader">Fields Table: </h5>
                                     <!-- ko if: ParameterTable.getActiveColumnVisibility().value() -->
                                         <th class="parameter_table_value" data-bind="eagleTooltip:'The value of this parameter'" data-bs-placement="top">
                                             <span>Value</span>
-                                            <button id="showOverwriteSeperately"><i class="material-icons-outlined">check_box_outline_blank</i></button>
+                                            <button id="showOverwriteSeperately">
+                                                <div>
+                                                    <i class="material-icons-outlined">check_box_outline_blank</i>
+                                                </div>
+                                            </button>
                                             <div data-bind="css: {resizer: ParameterTable.setUpColumnResizer('parameter_table_value') === true}"></div>
                                         </th>
                                     <!-- /ko -->