What methods can be used to ensure all widgets are aligned in a single line using html or css?

The code located at the end is functioning properly except for widget alignment, as shown in the image below. Do you have any suggestions on how to align all widgets together in a straight line (excluding the necessary wrapping which is currently working well in the code) as demonstrated and described in the illustration? The red indicates what changes I would like to make, while the black represents some general observations.

https://i.sstatic.net/OqSPA.png

Code:

library(rhandsontable)
library(shiny)

rowNames1 <- c("A", "B", "C", "Sum")
data1 <- data.frame(row.names = rowNames1, "Col 1" = c(1, 1, 0, 2), check.names = FALSE)

ui <- fluidPage(
  actionButton("addTbl", "Add table"), 
  rHandsontableOutput("hottable1"),       
  tags$div(id = "placeholder")            
)

server <- function(input, output) {
  uiTbl1 <- reactiveValues(base = data1)  

  observeEvent(input$hottable1,{uiTbl1$base <- hot_to_r(input$hottable1)})
  
  output$hottable1 <- renderRHandsontable({
    rhandsontable(uiTbl1$base, rowHeaderWidth = 100, useTypes = TRUE)
  })
  
  observeEvent(input$addTbl, {
    divID <- gsub("\\.", "", format(Sys.time(), "%H%M%OS3"))
    dtID <- paste0(divID, "DT")
    uiTbl1[[paste0(divID,"tbl")]] <- data1 
    
    insertUI(
      selector = "#placeholder",
      ui = tags$div(
        id = divID,
        style = "display:inline-block;
                 margin-right: 10px;
                 margin-top: 10px;
                 vertical-align: top;",
        rHandsontableOutput(dtID),
        hr()
      )
    )
    output[[dtID]] <- renderRHandsontable({
      req(uiTbl1[[paste0(divID,"tbl")]])
      rhandsontable(uiTbl1[[paste0(divID,"tbl")]], rowHeaderWidth = 100, useTypes = TRUE)
    })
  })
}

shinyApp(ui, server)

Answer №1

After carefully considering S. Laurent's insightful comment, here is a comprehensive code snippet that includes alignment parameters for generating multiple dynamic tables with exceptionally clean output:

Sample Code:

library(rhandsontable)
library(shiny)

rowNames1 <- c("A", "B", "C", "Sum")
data1 <- data.frame(row.names = rowNames1, "Col 1" = c(1, 1, 0, 2), check.names = FALSE)

ui <- fluidPage(
  br(), actionButton("addTbl", "Add table"), 
  tags$div(id = "placeholder", 
    tags$div(
      style = "display: inline-block;
               margin-right: 6px;
               margin-top: 10px;
               vertical-align: top;", 
      rHandsontableOutput("hottable1")
      )
    )
)

server <- function(input, output) {
  uiTbl1 <- reactiveValues(base = data1)  

  observeEvent(input$hottable1,{uiTbl1$base <- hot_to_r(input$hottable1)})
  
  output$hottable1 <- renderRHandsontable({
    rhandsontable(uiTbl1$base,rowHeaderWidth = 100, useTypes = TRUE)
  })
  
  observeEvent(input$addTbl, {
    divID <- gsub("\\.", "", format(Sys.time(), "%H%M%OS3"))
    dtID <- paste0(divID, "DT")
    uiTbl1[[paste0(divID,"tbl")]] <- data1 
    
    insertUI(
      selector = "#placeholder",
      ui = tags$div(
        id = divID,
        style = "display:inline-block;
                 margin-right: 10px;
                 margin-top: 10px;
                 vertical-align: top;",
        rHandsontableOutput(dtID)
      )
    )
    output[[dtID]] <- renderRHandsontable({
      req(uiTbl1[[paste0(divID,"tbl")]])
      rhandsontable(uiTbl1[[paste0(divID,"tbl")]],rowHeaderWidth = 100, useTypes = TRUE)
    })
  })
}

shinyApp(ui, server)

Example showcasing the addition of 10 dynamic tables:

https://i.sstatic.net/LjS5U.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust column names to the right while maintaining the integrity of the values

I have a dataset that resembles the following: https://i.sstatic.net/Acun2.png My goal is to move the ENSG0000000223972.5 one position to the right without altering any of the values. This means that ENSG0000223972.5 should replace ENSGOOOO227232.5, and s ...

The text content of all drop-down menus simultaneously changes rather than being updated individually

I've implemented three drop-down menus using Bootstrap on my website. https://i.sstatic.net/M7sTF.png I want the selected menu item to update the content of that specific drop-down menu when clicked by a user. https://i.sstatic.net/sjHus.png However ...

Vanishing Submit Button with CSS

In my input submit button, I have included the following code: <input class="buttons" type="button" onclick="javascript:jQuery(xxxx)" style="font-size: 12px;" value="Invite to Bid"> Additionally, there is a CSS function that adds an elegant "Go" im ...

Seeking help with a Javascript regex inquiry

I am currently utilizing JavaScript regex for the following task: I have gathered the HTML content from a page and stored it within a string. Now, I aim to identify all URLs present on this page. For instance, if the document includes-- <script src = ...

What is the best way to showcase the contents of an array of objects from JavaScript on an HTML page in a dynamic

Looking for guidance in Javascript as a beginner. For an assignment, I need to create two separate JS files and use them to display data dynamically on an HTML page. One JS file, named data.js, contains an array of objects representing a product catalog. T ...

Increment counter when a key is pressed in Angular 4 and decrement when the backspace key is pressed

As a beginner in Angular, my goal is to create a feature where: The character count in a label increases as text is entered into a textarea. When the backspace key is pressed, the counter should decrease. If the user attempts to enter more characters tha ...

Encountering a problem during the conversion of HTML to JSON

I am facing an issue with the content of a specific div on my webpage. <div id="hidLocsJsonForAutoComplete" style="display:none;">[{"id":1,"desc":"Amazon","name":"amazon"},{"id":2,"desc":"Apple Bees","name":"applebees"},{"id":3,"desc":"Babys r Us"," ...

Does adding the async attribute to a script impact the timing of the onload event?

I am facing an issue with a webpage that contains a script tag in the HEAD section: <script src="somescript.js" type="text/javascript" async></script> Since it has the async attribute, this script loads asynchronously, allowing the browser to ...

Guide on incorporating a fixed effect into a four-parameter logistic model using nlmer

Utilizing nlmer with SSfpl to fitting some data with a four-parameter logistic function. I have successfully obtained a good fit for the overall data using: nm.fpl <- nlmer(meanFix ~ SSfpl(Time, A, B, xmid, scal) ~ (scal | Subject), data = d ...

What strategies can I implement to address challenges with MetaboAnalyst in R when attempting to conduct pathway analysis?

For my pathway analysis, I am utilizing the code provided at this link: https://drive.google.com/file/d/1CXluzyYqNoPqu1DI3HwvDAmRVGMe825m/view. This is in conjunction with MetaboAnalystR. However, when executing the following section of code: mSet<-C ...

Having trouble with innerHTML.value functionality?

Recently, I've been delving into creating a JavaScript program that fetches Wikipedia search results. Initially, everything seemed to be working fine as I was able to display the searched item using the alert() method. However, for some reason, it now ...

Issue with the position of the search dropdown in HTML

When we click on the Dropdown option, it appears above the text instead of below. I have been trying to fix the positioning issue where the Dropdown shows up separately after clicking, but I have not been successful so far. Maybe you can offer some assist ...

What is the best way to emphasize a row in an Angular Material table based on a

I am facing an issue with highlighting row colors conditionally in my code. Although there are no errors, the background color is not being applied to the rows as expected. I have a total of 5 rows with the 'riskIndex' value set to 'H'. ...

Discover the way to create an HTML button with a mesmerizing transparent effect

For my website creation using Dreamweaver, I came up with the idea of utilizing Photoshop to design backgrounds. The reasoning behind this choice was that if I needed to modify button names at any point, I could simply edit the code and make the necessary ...

The footer that constantly changes

I am looking to dynamically position my footer at the bottom of the page. The footer should be fixed at the bottom. If the page content exceeds the viewport, the footer should automatically adjust its position. html { position: relative; m ...

Using CSS or JavaScript to trigger events while scrolling with touch

Imagine a scenario where multiple boxes are stacked on top of each other: <div style="width: 100%; height: 100px; background-color: red"> stuff </div> By clicking or touching them, the background color can be easily changed using CSS (:hover, ...

What could be causing the side margins on my navbar in mobile view in Bootstrap?

After spending some time working on a simple navbar with CSS styling, I encountered an issue when viewing it in mobile mode. The navbar did not expand to 100% of the screen width and had a margin of about 20px on both sides. CSS .navbar .brand { wi ...

Ordering data in a dynamic table using JavaScript

After receiving an array of objects in the form of a JSON file and using AJAX to display specific key-value pairs in a table, I am now faced with the task of sorting the rendered table. However, I am uncertain about the steps to take next. <div id=" ...

Is there a way to bypass the initial result when using document.querySelectorAll?

this is my own unique html content <div class="content-body"> <table style="text-align:center;" class="table table-bordered"> <tbody> <tr> <th>Text Line</th> </tr> <tr> <td> ...

Converting Multiple XML Files into a Single CSV in R

While browsing, I stumbled upon this query and hrbrmstr's response: "In R, how to extract two values from XML file, loop over 5603 files, and write to a table" ... It worked well with the Crude dataset, but when I tried it with my own data, an error p ...