Displaying text and input without line breaks using R Shiny DT

I am attempting to display various R Shiny inputs within a Shiny DT without any unwanted line breaks. When I use the shinyInput function to concatenate text and HTML tags, both the text and inputs are displayed but line breaks occur before and after the input.

I suspect that the issue lies with the div tag causing this, however, adding the style="display:inline;" CSS code as suggested online does not resolve it; in fact, it disrupts the width definition.

Do you have any suggestions on how to keep the text before, the div, and the text after all within the same cell?

Below is some code provided for experimentation:

library(DT)

ui <- basicPage(
  h2("The mtcars data"),
  DT::dataTableOutput("mytable")
)

server <- function(input, output) {
  
  shinyInput <- function(FUN, len, id, ...) {
    inputs <- character(len)
    for (i in seq_len(len)) {
      inputs[i] <- as.character(FUN(paste0(id, i), ...))
    }
    inputs
  }
  
  mtcarsx <- data.frame(mtcars, newvar=
                         paste0(
                           "text before "
                           ,shinyInput(checkboxInput,nrow(mtcars),"mychbx",label="",value=FALSE,width=NULL),
                           " text after"))

  
  output$mytable = DT::renderDataTable({
    DT::datatable(mtcarsx, 
                  escape = FALSE, 
                  selection = 'none', 
                  rownames = FALSE, 
                  extensions = 'RowGroup', 
                  options = list(searching = FALSE, 
                                 ordering  = FALSE,
                                 rowGroup = list(dataSrc=c(1)),
                                 columnDefs = list(list(visible=FALSE, targets=c(1)))
                                 ))
  })
  
}

shinyApp(ui, server)

Answer №1

Indeed, it is crucial to modify the div containers enclosing the checkbox element by setting display:inline. You suggest that this action does not rectify the issue as it disrupts the width specification. Am I overlooking something? I do not detect any alterations in the widths section.

tags$style("
             #mytable tr td div.form-group {
               display: inline;
             }
             #mytable tr td div.checkbox {
               display: inline; 
             }
             #mytable tr td div.checkbox label {
               padding: 0;
             }
             #mytable tr td div.checkbox input {
               position: relative;
               margin: 0;
             }")

If the surrounding text remains consistent, you could leverage the css pseudo classes after and before to incorporate that content dynamically.

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

What methods are available to stop Internet Explorer from caching HTML content without resorting to utilizing arbitrary query parameters?

To avoid caching HTML on postbacks in Internet Explorer, we are currently utilizing random query strings, but our goal is to transition to URL re-writing. Removing these random parameters would be ideal. What is the recommended approach for resolving this ...

The Comment view in the news.views module did not provide an HttpResponse object, but instead returned None

Currently, I am working on enabling comments on the article feature, but I encountered an issue. The error message "The view news.views.Comment didn't return an HttpResponse object. It returned None instead." keeps popping up even after trying to add ...

Python Selenium: Troubleshooting the get_elements method not retrieving li items within ul tags

I am facing an issue while trying to retrieve li items within a ul element using the following code: driver.get('https://migroskurumsal.com/magazalarimiz/') try: select = WebDriverWait(driver, 10).until( EC.presence_of_element_locate ...

When touch-triggered on IOS, HTML5 Web SQL Transactions were smoothly bypassed without any errors

I'm encountering issues with database transactions on IOS devices. When the user does not interact with the phone, everything functions as expected. However, if the user taps, scrolls, or touches the screen, some transactions bypass the actual transac ...

Expanding the width of the hovered item to accommodate all its content

I'm currently working on a drop-down navigation bar, and I've encountered an issue. Check out the code here My goal is to have the navigation container's height adjust dynamically when a user hovers over a menu item with children items. Whi ...

Is there a way to extract the selected values from a drop-down menu and convert them into a numerical

Within this section, there are three dropdown lists containing numbers from 0 to 9. These dropdowns are used for inputting costs. For example, if I choose 4 in the first dropdown, 5 in the second dropdown, and 0 in the third dropdown, the total cost should ...

Having trouble setting up a twitter widget?

I have developed a custom jQuery plugin that displays a sidebar on the left for social media content. The variable below contains the source of the content. I am currently facing an issue while trying to integrate a Twitter feed using the widget, as it kee ...

Is there a way to position the input directly above the div in the center?

In my HTML code, I have a div container with an input and another nested div element that contains various other elements. My goal is to center the input element in relation to the parent div, where error messages are displayed. Currently, both elements s ...

Web browsers are displaying code rather than the page itself

I recently hosted a .Net application on my Local IIS Server. Unfortunately, I neglected to handle error cases in MVC, opting instead to utilize the IIS .NET Error for page redirection to a specific page. When errors occur, the ASP.Net error page shows up ...

Original code

I have a database containing HTML code for a table. I would like to display this code in its original form within a textarea so that I can edit it. However, when I try to echo the code, it appears in compiled form as a table rather than the original HTML ...

The functionality of JQuery's SlideUp/SlideDown feature can be unreliable as it often resets itself unexpectedly

Hey everyone, I'm encountering an issue with my animation menu. I want to be able to toggle the visibility of my categories within the menu by clicking a button. I've tried using SlideUp/SlideDown for this, but the animations keep reverting back ...

Calculating the number of words within a specific group in a dataframe using R

In one column, I have text reviews, and in another column I have ratings: Content Rating "bluetooth isn't great" 1 "head unit keeps crashing" 2 "remote works like a charm" 5 I want to enter a list of keywords, ...

The navigation menu refuses to close even after pressing the button

I have been following a tutorial on creating a scroll reveal website, but I've encountered an issue where my navigation menu won't close. Even though I copied the exact same code from the video/documentation. The idea is that when I click a JavaS ...

Displaying Edit and Delete options upon hovering over the data row

I'm working on a table that uses ng-repeat on the <tr> element. In the last column of each row, I have edit/delete links that should only be visible when the user hovers over the <tr> element. <tr ng-repeat="form in allData | filter:se ...

Ember.js - Dynamic updates for the navigation bar with each route change

Just dipping my toes into the world of Ember.js and trying to make sense of it all. Lately, I've been experimenting with changing the buttons on a navigation bar depending on which route I'm on. My application has a dual-level navigation setup. ...

What is the best way to modify the legend title for a ggplot in R?

I am struggling to update the title of the legend in this plot, which should be a simple task. . . The code is as follows: p2<-lf_data |> subset(grepl("^.+(gfp)$",media)) |> # filter(row_number() %% 3 == 1) %>% ggplot(aes(time, ...

Incorporating an unique identification code within the input field

I have a HTML code that displays geolocation information: <span id="currentLat"></span>, <span id="currentLon"></span> When combined with JavaScript, it works perfectly. However, I am trying to display the above value in a text fi ...

Only in Firefox, there seems to be an issue with how the CSS

Using JavaScript, I have added two buttons to the left of the filter box: https://i.sstatic.net/yp8mg.png This is the HTML code for the buttons: https://i.sstatic.net/DgT27.png Here is the CSS style for the buttonfile: .buttonfile { text-indent: 0; ...

Achieving one-directional movement in Line by utilizing scale manipulation in CSS

hr:hover { transform:scaleX(50.0); } CSS when Hover hr { position: absolute; transition: transform 1.5s ease-out; width: 3%; height: 3px; background-color: white; margin-left: 20%; margin-top: 10%; } CSS of Line Is there a way to scale t ...

Keeping the header fixed on a sticky div (tocbot)

While working on my website, I decided to implement a Table of Contents section using tocbot. However, I encountered an issue where the Title I added above the table doesn't stay fixed when scrolling. https://i.stack.imgur.com/vCm1K.gif Here's ...