Align Shimmering Elements to the Bottom

My app is currently functioning where, as the user selects multiple items from the Animals dropdown menu, the list of selections grows longer and pushes the elements below it further down the page.

I am looking to have these elements justified to the bottom of the page so that they remain in place even as more animals are selected.

library(tidyverse)
library(ggplot2)
library(dplyr)
library(shiny)

# Setting up UI for the app
ui <- 
  
  fillPage(
    
    fluidRow(
        # Selecting Animals
        column(2,
           selectInput(
               inputId = 'FilterFieldSelection',
               label = 'Animal Of Choice',
               choices = c('Dog','Cat','Inu','Neko','Giraffe','Kirin','Mouse','Nezumi'),
               selected = 'Dog',
               multiple = TRUE
           ), 
             
             
             htmlOutput('ActiveFiltersText')
             
        ),
        
      # Other Elements
      column(2),
      
      # Column with Color Selection
      column(2,
          selectInput(
            inputId = 'ColorChoice',
            label = 'Color Of Choice',
            choices = c('red','blue','green'),
            selected = 'red'
          ), 
        
          # Filtered Well Count Display
          htmlOutput('WellCountFilteredText')
       )
       
    ),

    column(10,
           
           plotOutput('myplot')
           
    )
  )

server <- function(input, output, session) {
  
  ## Active Filters Text Output ----
  output$ActiveFiltersText <- renderUI({
    
    full_text <- ""
    
      
        
        full_text <- paste0(full_text, '<b>','Selected Animal(s): ','</b><br/>',
                            paste(input$FilterFieldSelection,collapse="<br/>"),'<br/>'
        )
        
    full_text <- HTML(full_text)
  })
  
  
  ## Filtered Well Count Text Output ----
  output$WellCountFilteredText <- renderUI({
    HTML(paste0('<b>','Total Count: ','</b><br/>',150000))
  })

  ## Plot
  output$myplot <- renderPlot({
    m <- matrix(rnorm(50), ncol = 5)
    colnames(m) <- c("a", "b", "c", "d", "e")
    as_tibble(m) %>%
      ggplot(aes(x=a, y=b) ) +
      geom_point(color=input$ColorChoice)
  })
}

# Running the App
shinyApp(ui = ui, server = server)

I attempted to keep the elements from shifting by placing them in a different fluidRow, but unfortunately, they still remain top-justified on the page.

Answer №1

To organize the elements effectively, consider enclosing them in a div styled using CSS with properties such as position: fixed; bottom: 0;.

ui <- fluidPage(
  fluidRow(
    column(
      2, 
      
      selectInput(
        inputId = 'FilterFieldSelection',
        label = 'Animal Of Choice',
        choices = c('Dog','Cat','Inu','Neko','Giraffe','Kirin','Mouse','Nezumi'),
        selected = 'Dog',
        multiple = TRUE
      ), 
      
      tags$div(
        style = "position: fixed; bottom: 0;",
        
        # Presenting Active Filters
        htmlOutput('ActiveFiltersText'),
        
        tags$hr(),
        
        h4("Counts"),
        
        # Choosing color
        selectInput(
          inputId = 'ColorChoice',
          label = 'Color Of Choice',
          choices = c('red','blue','green'),
          selected = 'red'
        ), 
        
        # Displaying Filtered Well Count
        htmlOutput('WellCountFilteredText'),
      )
    ),
    
    column(
      10, 
      plotOutput("myplot")
    )
  )
)

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

How to customize the page background color in Next JS

I am currently working on a project using Next Js and have encountered an issue. I have a global.css file set up in the project, but I need to change the background color of a specific page without affecting the rest of the project. Although I have tried u ...

Creating a percentage histogram in R using ggplot and facet_wrap for detailed visualization

Presenting my current data frame: ID values Pop1 1 PDAC1 611648 Nafr 2 PDAC1 322513 Nafr 3 PDAC2 381089 Nafr 4 PDAC2 16941 Nafr 5 PDAC3 21454 Jud 6 PDAC3 658802 Jud I am aiming to create two histograms using facet_wrap based on the "Pop1" column: g ...

How to filter data using specific conditions in dplyr

I have a dataset with IDs, values, and dates. The dataset looks like this: ID = c('A','A','A','A','A','A','B','B','B','B') B = c(1,2,1,3,2,2,1,2,3,4) date = ...

Shifting image from center to corner as you scroll

Hello there, I'm new to this so please bear with me for any obvious mistakes, thank you :) My goal is to have an image move from the center of the screen to the corner of the screen as you start scrolling. I've made some progress on this, but I& ...

Which is more effective: HTML5 appcache, expires headers, or localstorage?

Imagine this scenario: Your site/app can only be used online and requires an active internet connection; All files are equipped with proper expire header settings; Refresh file can be triggered using something like myFile.css?v=2 and location.reload(true ...

What is the best way to comprehend IE comments in a given condition?

I recently came across some conditional comments in a theme I'm working on that dynamically add classes to the html tag depending on the version of Internet Explorer being used. <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" ...

Is has-danger feature no longer supported in the latest version of Bootstrap v4 beta?

The Bootstrap migration guide mentions: The .has-error class has been renamed to .has-danger. However, I have found that this change does not seem to take effect. The border and text are not colored as expected. For instance: <div class="form-grou ...

Display Data using ParamQuery

I am working on implementing ParamQuery, which is an Excel-like plugin in PHP. I have managed to fetch data from a PHP file that generates JSON output successfully. However, I am facing difficulties in displaying the data within the div:grid_array in the s ...

Fixed navbar stays at the top with body occupying 100% of the screen

In the process of developing a react app, I encountered an issue with a sticky top navbar from Bootstrap. After setting the body to height: 100%, the navbar no longer sticks as intended. I cannot use vh for one of my pages due to mobile content display i ...

Bug in Click Behavior of HTML5 Canvas on Webkit Browser Versions Below 535 for Android Native and iOS5 Safari

Recently, I encountered a peculiar bug in Android where positioning a canvas element on the Native Android Browser (WebKit 534.4) using css position:absolute; top:10px; left:100px; resulted in the duplicated Canvas being rendered to the browser while ignor ...

Issues with ASP.net rendering stylesheets

Here is the layout of my Index.cshtml page: <html> <head runat="server"> <link href="~/Content/index.css" rel="stylesheet" type="text/css" /> <asp:ContentPlaceHolder ID="HeadContent" runat="server" /> </head> < ...

How can I incorporate a transition into my modal with JavaScript in CSS?

I've recently started learning CSS and while I've come across similar topics, none have provided the solution to my specific problem. After spending 2 hours experimenting with various CSS properties like hidden, transition, and display, I am now ...

Tips for converting response text into HTML code

I am receiving a text response like this <span class='text-4xl'>description1</span> When I display it on the screen: import React,{useContext, useEffect} from 'react'; import blogsContext from '../context/blogsCon ...

Utilize ng-bootstrap in an Angular CLI project by integrating it with npm commands

I've been attempting to set up a project using Angular CLI with ng-bootstrap, but I'm having trouble getting the style to work properly. Here are the exact steps I followed (as outlined in the get-started page): Create a new project using `ng n ...

Anomalous Hover Glitch in Internet Explorer 7

Here is a snippet of my custom CSS styling: #languages_menu { background: url('/images/langs.png') repeat-y; bottom: 40px; font-size: 0.9em; right: 10px; position: absolute; width: 90px; } #languages_menu ul, #languages_menu ul li { ...

"Angular Ionic combination for displaying lists with customized headers and footers on cards

My issue is fairly straightforward - I am looking to create a list card with item array from my controller. However, I am struggling with how to structure my data in the HTML. The list card should have a header, content, and footer. I have attempted variou ...

Display a section of the picture at maximum width

Can anyone help with displaying only a portion of an image at full width (100%) without any overflow issues? The code I've tried is not working: .intro_sea { position: absolute; width: 101%; clip-path: inset(30% 50% 0 0); margin: 0; paddi ...

Ending a nohup parallel R simulation

I am currently stuck on how to stop a parallel processing simulation that was initiated on a Linux server using R. Yesterday evening, I accessed the server via ssh and commenced the simulation from the shell using the nohup command: nohup R CMD BATCH mysi ...

Is it possible to modify the CSS injected by an Angular Directive?

Is there a way to override the CSS generated by an Angular directive? Take, for instance, when we apply the sort directive to the material data table. This can result in issues like altering the layout of the column header. Attempting to override the CSS ...

Trigger a function in AngularJS when a div is scrolled to within a specific number of pixels from the bottom of the screen

I am experimenting with the AngularJS infinite-scroll directive. Below is the code snippet: angular.module('infiniteScroll', []) .directive('infiniteScroll', [ "$window", function ($window) { return { link:funct ...