rbootstrap-4r-markdownhtmltools

Boostrap Buttons Wrapping when they shouldn't be


I can't see why the Search and Clear Buttons wrap onto the following line after Postcode.

enter image description here

I've used the last example from the Button Addons code from here.

https://getbootstrap.com/docs/4.0/components/input-group/.

Whilst I have not included aria-label="Recipient's username" aria-describedby="basic-addon2" as R htmltools doesn't seem to like it, I don't think it's that (as I've tried adding it in the console with no effect).

Although the Bootstrap example doesn't explicitly add the -fluid to container and flex-xl-nowrap to row, I can see their code has it in Console so tried adding it.

I've added background colours to the columns to make it clear where they are.

---
title: "Stack Overflow Bootstrap "
output: html_document
---

## Purpose
Show buttons wrapping when I don't want them to
```{r cars, echo=FALSE}

# Load packages
pacman::p_load(tidyverse, htmltools)

  tagList(
    htmltools::withTags(
      div(class="container-fluid",
        h2("Heading 2"),
        div(class="row flex-xl-nowrap",
          div(class="col-sm-6", 
              style="background-color:powderblue;",
            h3("1st Column Heading 3")),
          div(class="col-sm-6", 
              style="background-color:Cornsilk;",
            h3("2nd Column Heading 3"),
            div(class="input-group", 
              input(
                type = "text",
                class="form-control",
                placeholder = "Postcode...",
                style = "width: 80px;"
              ),
              div(class="input-group-append",
                button(
                  type = "submit",
                  class="btn btn-success",
                  "Search"
                ),
                button(
                  type = "reset",
                  class="btn btn-primary",
                  "Clear"
                )
              )
            )
          )
        )
      )
    )
  )
```

Solution

  • As @RadovanMiletić pointed out, the answer is to add "display: block", i.e. change

    div(class="input-group",

    to

    div(class="input-group", style = "display: block",