10

I have two buttons in my U.i file

div(style="display:inline-block",submitButton("Analysis")),
  div(style="display:inline-block",downloadButton('downloadData', 'Download Data'))

Which gives the following output in the app

enter image description here

However I am trying to align these buttons so that the download data is on the right in the grey box and the analysis button is on the left in the grey box, instead of how it looks now. How do i go about this? The intended use is to become more advanced and create another button which is in the middle of the grey box. Im assuming you do something similar to 

style="display:center-align"
style="display:right-align"
style="display:left-align"

but I'm not sure how to go about this process.

Vik
  • 469
  • 2
  • 6
  • 18

3 Answers3

13

This works:

div(style="display:inline-block",submitButton("Analysis"), style="float:right"),
div(style="display:inline-block",downloadButton('downloadData', 'Download Data'), style="float:right")

But you should consider using a stylesheet, like explained in this answer: https://stackoverflow.com/a/25390164/1117932

Community
  • 1
  • 1
Verena Haunschmid
  • 1,252
  • 15
  • 40
  • 2
    This didn't fully work for me - no matter what I did, I couldn't get both `style` arguments to take effect. The button either wouldn't float right, or it wouldn't reserve layout space for itself (for me, it would run below the sidebar background). However, I got the exact desired effect using the `div()` for the float but using a full-width `fluidRow` column: `fluidRow(column(12, div(submitButton(), style = "float: right")))` – DHW Mar 13 '20 at 00:53
  • need ';' after block, but still does not work for me. Floats the button right, not centered – kraggle Jun 13 '22 at 15:15
3

I tried with the @Verena Haunschmid answer but it didn't work. This worked for me (it's pretty similar):

div(style = "display:inline-block; float:right", actionButton("hideshow", "Hide/Show"))
Abraham JA
  • 51
  • 3
1

element being part of a sidebarMenu

div(style="position:relative; left:calc(25%);", downloadButton("dd", "Download .zip"))
kraggle
  • 196
  • 2
  • 9