Tips for modifying line spacing in R Shiny?

I want to adjust the line spacing in a specific actionButton() displayed in a Shiny App, as shown below and with the MWE code provided at the end. How can I change the line spacing between lines?

This adjustment should only affect this action button and not impact the entire App. While I am not proficient in HTML or CSS, I remember there is a way to apply these formats to all objects in an App or target specific ones: my goal is to apply this solely to certain objects.

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

MWE code:

library(shiny)

ui <- fluidPage(
  br(),
  actionButton(
    "add",
    HTML("Add <br/> column"), 
    width = '80px',
    style='padding:0px; font-size:100%')
  )

server <- function(input,output,session)({})

shinyApp(ui, server)
htmlcssrshiny

Answer №1

To customize the default line-height css rules provided by shiny, you can use the following code:

actionButton(
    "add",
    HTML("Add <br/> column"), 
    width = '80px',
    style='padding:0px; font-size:100%; line-height:1;') // note the addition of 'line-height:1;'
  )


/*default styling applied by shiny*/

button {
  color: #333;
  background-color: #fff;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  -webkit-appearance: button;
  text-transform: none;
}
<button width="80px" style='padding:0px; font-size:100%; line-height:1;'>
 Add <br/> column
</button>

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

Tips for adjusting the placement of the horizontal line in real-time?

I'm working on a new asp.net website. On the page, there is a link button called "Landline number" followed by three textboxes. Below the textboxes, there is a horizontal line. Initially, only the link button and horizontal line are visible, while th ...

asp.nethtml

Exploring ways to customize the selected text color within a jQuery mobile division using CSS

Is there a way to change the color of selected text to #3C3 for the div one only and not for div two? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link ...

jquerycssjquery-mobilemobiletextselection

Is it possible to have the navigation bar (bootstrap) appear on top of my slider as the default setting, without taking up additional space?

I'm encountering a rather simple issue that's giving me some trouble. I'm currently working on a website design using Bootstrap, and initially, there were no image sliders included by default. After integrating an image slider, I noticed th ...

htmlcssbootstrap-4

Animation for Images in Angular v1.2

After reviewing tutorials and previous questions, I have been trying to pinpoint where my code is going wrong in applying an animation to transition between the images I want to display. The ng-show function effectively displays the selected picture, but ...

javascripthtmlcssangularjscss-animations

Issue with header image failing to load in local Rails app at localhost:3000

I'm currently in the process of developing a website using rails. My goal is to design a header with a background image that stands out from the navigation bar. However, I've encountered an issue where the image fails to load when I visit the pag ...

htmlruby-on-railsbootstrap-4assetsruby-on-rails-6

The Jquery script is ineffective for newly added elements

After creating an Ajax Form that functions well, I noticed that when the result of the form is another form, my script does not work for the new form generated. Is there a way to make the new form function like the old one? $(document).ready(function() ...

javascriptjqueryhtmlajaxforms

What could be causing the overlap between the button and the div element?

My main wrapper div contains a content div and a button. However, I'm facing an issue where the button is overlapping with the content div instead of appearing below it. The content div is styled with the following CSS: #groupMembers { position: ...

htmlcss

Guide on aligning input and labels side by side in Bootstrap forms using CSS only

I've exhausted all the solutions provided here, including referencing this Bootstrap horizontal-form link. However, nothing seems to be effective. I am open to trying any method at this point, even if it involves just modifying the CSS. My main object ...

htmlcssbootstrap-4

Utilizing LocalStorage in an Ionic application to store data on a $scope

Having trouble saving the array named $scope.tasks to LocalStorage while building a To Do List app. Tried multiple times but can't figure it out. Here's the code, appreciate any help :^) index.html <!DOCTYPE html> <html> <head& ...

javascripthtmlangularjscordovaionic-framework

Stack the text on top of each other beside an image

Here is some HTML code that I am working with: <div class="row"> <div col-md-9> <div> <img class="img-valign" src="an image"> <span class="text1" Style="font-size: 8 ...

htmlcssbootstrap-4

What is the best way to set the exact pixel width for a sidebarPanel?

Is there a way to define the precise width of a sidebarPanel in pixels instead of using the width argument? I have found that the width option is not precise enough for my needs. library(shiny) ui <- fluidPage( sidebarLayout( sidebarPanel(widt ...

cssrshiny

What is causing the presence of a blank row in my GridView?

There always seems to be an extra empty row at the end of my GridView gv_remboursement.DataSource = listResult; gv_remboursement.VirtualItemCount = iTotal; gv_remboursement.DataBind(); listResultContent.Visible = isVisible; The listResult variable ho ...

c#htmlasp.net.net

The first div should be hidden when the toggle is activated

I am currently working on a CRUD project and incorporating some Javascript/JQuery into it. I have a button labeled "Add", which, when clicked, displays a specific div element. However, I'm facing an issue where the div is already visible before the us ...

javascriptjquerycss

Transforming the text to a new line

I have been attempting to format lengthy texts from a JSON file, but I haven't been successful. The text keeps displaying as multiple sections within a single response, which can be seen in the image below. I've tested solutions like word-break a ...

javascriptcssjson

Tips for displaying a loading message during an AJAX request?

My AJAX function is set up like this: function update_session(val) { var session_id_to_change=document.getElementById('select_path').value; $.ajax({ type: "GET", url: "/modify_path/", asy ...

javascripthtmlajax

Implementing PHP code to prevent the submission of forms with invalid inputs

When working on a form validation process in PHP, I encountered a challenge in preventing the form from being submitted to the database when there are errors in the input fields. While I was able to display error messages for invalid inputs upon submitti ...

phphtmlvalidation

Can someone provide guidance on creating a calculator using the Switch statement in Javascript?

Introduction to HTML: <div id="content"> <div id="calculator-container"> <form name="calc"> <!-- The form is named "calc" --> <label for="output">A Simple Calculator</label> & ...

javascripthtml

JS and its dynamic color changes

A game has been developed using JavaScript and HTML. The game features a table with cells that are assigned IDs for toggling colors using an onClick function. The objective is simple: when a cell is clicked, all neighboring cells, including the clicked one ...

javascripthtmlcss

You cannot assign type 'Node | null' to type 'Node' when attempting to loop through HTML elements in TypeScript

In my code, I am taking a raw Markdown string stored in 'markdownString' and using the marked.js library to convert it to HTML for display on a web browser. My goal is to extract all plain text values from the page and store them in an array of s ...

htmlnode.jstypescriptdomdomparser

The issue lies in the sequence being generated, as the starting value ('from') needs to be a valid number

Here is the code snippet I am using: uc_ts_plot <- ggplot(monthly_sales, aes(DATE,DAUTONSA)) + geom_line(na.rm=TRUE) + + xlab("Month") + ylab("Auto Sales in Thousands") + + scale_x_date(labels = date_format(format= "%b-%Y"),breaks = date_brea ...

r