Fix some css problems

TitouanRobert · Jun 16, 2017 · cc3b284 · cc3b284
1 parent df01b67
commit cc3b284
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 11 deletions.
diff --git a/R/mwUI_controls.R b/R/mwUI_controls.R
@@ -32,7 +32,14 @@ mwControlsUI <- function(controlList) {
             style = "cursor: pointer;",
             "data-toggle"="collapse",
             "data-target"=paste0("#panel-body-", id),
-            label
+            tags$table(
+              tags$tbody(
+                tags$tr(
+                  tags$td(class = "arrow"),
+                  tags$td(label)
+                )
+              )
+            )
           ),
           tags$div(
             class="panel-body collapse",

diff --git a/inst/manipulate_widget/manipulate_widget.css b/inst/manipulate_widget/manipulate_widget.css
@@ -194,6 +194,7 @@ html, body {
   display:none;
   border-right:solid 1px #4e9cff;
   padding:10px;
+  overflow: auto;
 }
 
 .mw-chartarea {
@@ -230,7 +231,12 @@ html, body {
   background-color: #f0f0f0;
 }
 
-.panel-default>.panel-heading::before {
+.panel-heading .arrow {
+  width: 22px;
+  text-align: center;
+}
+
+.panel-heading .arrow::before {
   font-family: FontAwesome;
   font-size: 20px;
   content: "\f0d7";
@@ -239,10 +245,6 @@ html, body {
   vertical-align: middle;
 }
 
-.panel-default>.panel-heading.collapsed::before {
+.panel-heading.collapsed .arrow::before {
   content: "\f0da";
 }
-
-.panel-body {
-  padding: 5px;
-}
diff --git a/newUI/index.html b/newUI/index.html
@@ -79,7 +79,16 @@
           <div>
             <div data-display-if="input.group2_visible">
               <div class="panel panel-default">
-                <div class="panel-heading collapsed" style="cursor: pointer;" data-toggle="collapse" data-target="#panel-body-group2">group</div>
+                <div class="panel-heading collapsed" style="cursor: pointer;" data-toggle="collapse" data-target="#panel-body-group2">
+                  <table>
+                    <tbody>
+                      <tr>
+                        <td class="arrow"></td>
+                        <td>Group bla bla bla bla bal</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
                 <div class="panel-body collapse" id="panel-body-group2">
                   <div>
                     <div data-display-if="input.x12_visible">

diff --git a/newUI/manipulate_widget.css b/newUI/manipulate_widget.css
@@ -222,15 +222,20 @@ html, body {
   background-color: #f0f0f0;
 }
 
-.panel-default>.panel-heading.collapsed::before {
-  content: "\f0da";
+.panel-heading .arrow {
+  width: 22px;
+  text-align: center;
 }
 
-.panel-default>.panel-heading::before {
+.panel-heading .arrow::before {
   font-family: FontAwesome;
   font-size: 20px;
   content: "\f0d7";
   display: inline-block;
   padding-right: 10px;
   vertical-align: middle;
 }
+
+.panel-heading.collapsed .arrow::before {
+  content: "\f0da";
+}