How to Align Tabs and Header in R Shiny Interface

I am currently working on centering both my tabs and header in my R Shiny page. I attempted to center them using div() with class=span7, but I encountered an error stating that an argument was missing.

shinyUI(fluidPage(
    headerPanel("Header"),
    mainPanel(
        # Output: Tabset w/ headers ---
        tabsetPanel(type = 'tabs',
                    tabPanel('Tab1'),
                    tabPanel('Tab2',
                        sidebarLayout(
                            sidebarPanel( # input
                                selectInput(id='tab2','Title',
                                    choices=c('A','B','C','D')),
                                submitButton("Submit"),
                                width=4
                            ),
                            mainPanel( # output
                                textOutput('text1')
                            )
                        )
                    )
                    )
    )
))

Attempting to wrap the tabsetPanel() inside a div() using

div(
    tabsetPanel(....),
    class='span7'
)
cssrshiny

Answer №1

To achieve the desired look, you can customize the CSS style by modifying an existing shiny class:

User Interface

fluidPage(theme='style.css',
    headerPanel(h1("Header", align='center')),
    mainPanel(
        # Output: Tabset w/ headers ---
        tabsetPanel(type = 'tabs',

                    tabPanel('Tab1'),
                    tabPanel('Tab2',
                             sidebarLayout(
                                 sidebarPanel( # input
                                     selectInput(inputId ='tab2','Title',
                                                 choices=c('A','B','C','D')),
                                     submitButton("Submit"),
                                     width=4
                                 ),
                                 mainPanel( # output
                                     textOutput('text1')
                                 )
                             )
                    )
                    ), class='flex-center'

        )
    )

Cascading Style Sheets (CSS)

To center the tabs using flex and remove the float:left property from a specific column class, you can use the following CSS:

.flex-center {
  display:flex;
  align-items: center;
  flex-direction:column;
  margin:auto;
}


.col-sm-8 {
  float:none;
}

Save the CSS file as 'style.css' in a sub-folder named 'www' within your shiny project directory.

Answer №2

Instead of creating new styles from scratch, consider modifying the existing styles applied to your app. To view the css selectors, you can use Chrome developer tools in your browser.

fluidPage(theme='style.css',
                title = 'my app',
    headerPanel(
        h1("Header", align='center')),
        # Output: Tabset w/ headers ---
        tabsetPanel(type = 'tabs',
                    tabPanel('Tab1'),
                    tabPanel('Tab2',
                             sidebarLayout(
                                 sidebarPanel( # input
                                     selectInput(inputId ='tab2','Title',
                                                 choices=c('A','B','C','D')),
                                     submitButton("Submit"),
                                     width=12
                                 ),
                                 mainPanel( # output
                                     textOutput('text1')
                                 )
                             )
                    ),
                    tabPanel('Tab3'),
                    tabPanel('Tab4'),
                    tabPanel('Tab5')

                    ), class='tab-panel'


    )

The css selector for the tabs is .nav-tabs, so I adjusted it to display flex and be centered.

I also created a tab-panel class and set all divs within it to have a width of 100% to potentially resolve the white space problem.

.nav-tabs {
  display: flex !important;
  justify-content: center !important;
  width: 100%;
}

.col-sm-8 {
  float:none;
}

.tab-panel > div {
  width: 100%;
}

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

Exploring the Vertical Metrics of Various Typeface Styles

I'm encountering a problem and struggling to find a solution. I'm in the process of creating a website and incorporating various fonts. My goal is to ensure that every font appears visually similar to the others and align perfectly at the base. ...

htmlcssfontswebfonts

Creating a responsive single webpage using HTML/CSS

How can I make some div or img responsive for mobile format? <meta name="viewport" content="width=device-width, initial-scale=1" /> <div class="container"> <h1 class="title"> ...

htmlcss

I am unable to determine the origin or background of my sidebar

I am having an issue with styling a sidebar using HTML and CSS. The problem I am facing is with setting the background-color property. Despite my efforts to customize the style, the background remains transparent and shows the color of the page beneath it. ...

cssbootstrap-4backgroundsidebar

Using R for organizing data into hierarchical clusters

Let's consider a few points: A = (1, 2.5), B = (5, 10), C = (23, 34), D = (45, 47), E = (4, 17), F = (18, 4) I'm interested in performing hierarchical clustering on these points using R. Although I've found an example in Cluster Analysis, ...

rcluster-analysishierarchical-clustering

The size of the elements inside a div should be proportional to its parent div

I am struggling with sizing elements within a div. I have set the max-width to 40% and max-height to 25%, and inside is an image that I want to be 80% of its parent div. Here is the code snippet for reference: <div className="inputbox-container&qu ...

htmlcsssass

Ensuring uniform height of columns in Bootstrap

I want all columns following the first row with col-md-6 to have equal height, regardless of dynamic content (go to full page). <html> <head> <title>Page Title</title> <meta charset="utf-8"> <meta name="viewport" ...

htmlcsstwitter-bootstrapbootstrap-5

Styling targeted to a particular div

Currently, I am attempting to showcase a docx file on my webpage by converting it to HTML and then displaying it. However, this method generates CSS with rules that end up impacting the entire document. For instance, it changes all links to blue which co ...

htmlcss

Ways to prevent an element from displaying a hover border or outline

I need help with styling a group of 50% width elements that are displayed next to each other. I want to add a 20px white border around each element to create a separation between them. This is necessary because I have a responsive layout and always require ...

htmlcss

Applying a classification label to data output in R

I'm currently in the process of computing the proportion of observed counts for a Pearson's chi-square test. Within my dataset, there is a column dedicated to categories ("x") and another column for frequencies ("freq"). My plan is to divide the ...

rchi-squared

PHP and mysqli combine to create a versatile image slider with changing images

I am looking to implement an image slider that can be updated by the admin using php and mysqli. The admin should have the ability to easily add or remove images as needed. ...

phpjqueryhtmlcss

What causes the Material-UI Grid element to shift upon clicking it?

I have encountered an issue while developing a React app with Material UI. The problem arises on a specific page of the application. This particular page consists of text and a button aligned vertically, along with a second set of text and another button ...

cssreactjsflexboxmaterial-uigrid-layout

What is the best way to condense repeated variable values in a time-sequenced dataset using R?

I am in possession of the data below: structure(list(station = c("61WOL2", "61WOL2", "61WOL2", "61WOL2", "61WOL2", "61WOL2", "61WOL2", "61WOL2", "61WOL2", "61WOL2", "61WOL2", "61WOL2", "61WOL2", "61WOL2", "61WOL2", "61WOL2", "61WOL2", "61WOL2", "61WOL2" ...

rdatetimeduplicates

The table does not move up or down when using the mousewheel over the rows, but only when

I'm encountering an issue with a table inside a div that has overflow-y: scroll applied to it. While the scrollbar appears when there is content overflow, I am unable to scroll using the scrollwheel. It only works when the cursor is directly on top o ...

htmlcssscroll

Tips for utilizing SeleniumRC within JUnit framework for elements with dynamically changing IDs

I'm currently in the process of automating a workflow and I need to click on a link within a table row. The challenge is that all links within the rows share the same element ID, and the source code has a JavaScript code snippet like this: ("Element I ...

cssseleniumelementxpath

Problem with holding a dropdown button

Having trouble maintaining the position of this button within the floating button holder above my website content. How can I incorporate a drop-down menu while ensuring it stays within the same button holder? .btn-holder { backgr ...

css

Angular is encountering a CORS issue with the "No Access-Control-Allow-Origin" error when trying to access a CSS file

Currently, in my Angular 5 application with a Web API back-end, my main goal is to reference a CSS file on a production server. I'm facing a cross-origin issue when trying to access the CSS file hosted on the IIS server website. Even though CORS is e ...

cssangularcross-domainaccess-control

an optimized method for generating a matrix in R

I'm looking to create a matrix with randomized values following a specific pattern. However, the current code I have slows down significantly when dealing with large matrices due to the double loop structure. tm <- 10 A <- matrix(0, 5, 23) for( ...

rmatrix

Ensuring Consistent Height for a Responsive HTML Document Across Devices

My html page is facing a problem when printing from different Android devices. The page height changes dynamically based on label updates through JavaScript, and I pass this height to adjust the printed page (approximately 856x3000 pixels). However, issu ...

androidhtmlcssprinting

Experiencing difficulties with positioning text beside an image

Hello everyone, I'm a first-time poster seeking some assistance. I'm currently tackling an assessment and am struggling with the final part. The task involves creating a picture card with an image at the top, a circular image to the side, and tex ...

htmlcssflexboxcss-grid

The changing perspective in relation to the current position of a background

I am currently working on implementing a parallax effect, which is mostly successful. However, I have encountered a minor issue. Instead of the parallax effect being relative to the element's current position, it abruptly jumps to position 0. How can ...

javascriptjqueryhtmlcss