Use table layout for orange bar + title
Change-Id: I4030555c74dabdf1646a73a58f380c9432f5b127
diff --git a/inst/rmarkdown/templates/posterdown_ids/resources/template.html b/inst/rmarkdown/templates/posterdown_ids/resources/template.html
index 4219c9b..f6a2036 100644
--- a/inst/rmarkdown/templates/posterdown_ids/resources/template.html
+++ b/inst/rmarkdown/templates/posterdown_ids/resources/template.html
@@ -67,11 +67,13 @@
padding: 0cm;
}
.title_container {
-width: $if(titlebox_borderwidth)$calc(100% - $titlebox_borderwidth$ - $titlebox_borderwidth$)$else$100%$endif$;
-height: $if(titlebox_borderwidth)$calc($if(titlebox_height)$$titlebox_height$$else$7.5%$endif$ - $titlebox_borderwidth$ - $titlebox_borderwidth$)$else$$if(titlebox_height)$$titlebox_height$$else$7.5%$endif$$endif$;
+display: table;
+min-height: 5%;
+margin-bottom: 0.75%;
overflow: hidden;
-border: $if(titlebox_borderwidth)$$titlebox_borderwidth$$else$0$endif$ solid $if(titlebox_bordercol)$$titlebox_bordercol$$else$$if(primary_colour)$$primary_colour$$else$#f57c14$endif$
-$endif$;
+}
+.title_row {
+ display: table-row;
}
.title_container0 {
margin-top: 7%;
@@ -82,11 +84,9 @@
$endif$;
}
.orange_bar {
-float: left;
width: 15%;
-height: 90%;
background-color: $if(primary_colour)$$primary_colour$$else$#f57c14$endif$;
-display: flex;
+display: table-cell;
align-items: left;
border-right: 5%;
justify-content: left;
@@ -111,16 +111,11 @@
}
.poster_title {
text-align: left;
-position: relative;
-float: left;
-margin-left: 2.5%;
+display: table-cell;
+padding-left: 2.0%;
margin-right: 0;
width: 80%;
-height: 100%;
color: $if(title_textcol)$$title_textcol$$else$#000000$endif$;
-top: 50%;
-transform: translateY(-50%);
--webkit-transform: translateY(-50%);
}
#title {
font-family: $if(titletext_fontfamily)$$titletext_fontfamily$$else$$if(font_family)$$font_family$$else$"Fira Sans Semibold"$endif$$endif$;
@@ -640,6 +635,7 @@
</div>
</div>
<div class="title_container">
+<div class="title_row"
<!-- Orange Bar -->
<div class="orange_bar">
</div>
@@ -651,7 +647,7 @@
$if(affiliation)$<h5 id="affiliation">$for(affiliation)$<sup>$affiliation.num$</sup> $affiliation.address$$sep$; $endfor$</h5>$endif$
</div>
</div>
-
+</div>
<div class='poster_body_wrap'>
<div class='poster_body'>