Why is my output getting mixed up with the header on the navigation bar page?

output capture image https://i.sstatic.net/BYJnk.jpg

here is the code snippet

//ui.r

library(shiny)


navbarPage(theme = "style.css",img(src="logo.jpeg", width="300px"),
           tabPanel("Dashboard"),
           tabPanel("Products"),
tags$head(
    tags$style(paste0(
      "body:before { ",
      "  content: ''; ",
      "  height: 100%; width: 100%; ",
      "  position: fixed; ",
      "  z-index: -1; ",
      #" opacity: 0.3;",
     # "filter: alpha(opacity=50);",
      "  background:linear-gradient(rgba(60, 118, 61, 0.65), rgba(51, 122, 183, 0.09)),  url(graph-data-technologies-graph-databases-for-beginners.png); "
      ))),

my fluid row overlaps with nav bar on the nav page, I'm struggling to find a way to fix it. Not sure if it's related to CSS, could use some advice.
fluidRow(

  uiOutput("tabbox")

)
)

//server.r

library(RJDBC)
library(dplyr)
library(shiny) 
library(ggplot2)
library(scales)
library(shinydashboard)
library(gridExtra)
library(DT)
library(ggthemes)
library(plotly)
library(data.table)
library(shinyjs)
library(shinycssloaders)
library(shinyBS)

dsn_driver = "com.ibm.db2.jcc.DB2Driver"
dsn_database = "BLUDB"            # e.g. "BLUDB"
dsn_hostname = ""
dsn_port = ""                # e.g. "50000"
dsn_protocol = ""            # i.e. "TCPIP"
dsn_uid = ""        # e.g. "dash104434"
dsn_pwd = ""
jcc = JDBC("com.ibm.db2.jcc.DB2Driver", "db2jcc4.jar");
jdbc_path = paste("jdbc:db2://",  dsn_hostname, ":", dsn_port, "/", dsn_database, sep="");
conn = dbConnect(jcc, jdbc_path, user=dsn_uid, password=dsn_pwd)

totalsales="select year(RETAIL_STR_SALES_DETAIL.SALE_DATE) as YEAR,
 monthname(RETAIL_STR_SALES_DETAIL.SALE_DATE) AS MONTHNAME
 ,round(sum(RETAIL_STR_SALES_DETAIL.total),2) as TOTAL

 from retail_str_sales_detail where year(RETAIL_STR_SALES_DETAIL.SALE_DATE)='2017'
 group by year(RETAIL_STR_SALES_DETAIL.SALE_DATE),
 monthname(RETAIL_STR_SALES_DETAIL.SALE_DATE)";


 totalsalesbyyear <- fetch(dbSendQuery(conn,totalsales), -1)

 lastyearsale=data.frame(

   MonthName=factor(totalsalesbyyear$MONTHNAME,levels = month.name),
   Year=totalsalesbyyear$YEAR,
   MonthTotal=as.numeric(as.character(totalsalesbyyear$TOTAL))
)

shinyServer(function(input, output, session) {

  output$tabbox=renderUI(

        fluidRow(

          box(width=6,
              title ="Total Sales Value By  Year:2017", collapsible = TRUE,
              withSpinner(plotlyOutput("monthlybar",width = "100%", height ="240")),actionButton("go","Go Large")
          ),




          bsModal("modalExample", "Total Sales Value By Current Month", "monthgo", size = "large",plotlyOutput("dailybar1")),
          bsModal("modalExample1", "Total Sales Value By  Year:2017", "go", size = "large",plotlyOutput("monthlybar1"))

        ))

// displaying the output here
output$monthlybar=renderPlotly({

    p <- ggplot(lastyearsale,aes(x=MonthName, y=MonthTotal, fill=MonthName)) +
      geom_bar(colour="black", stat="identity",
               position=position_dodge(),
               size=.3) +                        # Thinner lines
      xlab("MonthName") + ylab("MonthTotal") + # Set axis labels
      ggtitle("Sales By The Month In Year:-2017")+ scale_y_continuous(labels = scales::comma)+   # Set title
      theme_bw()

    p <- ggplotly(p)

  })
  output$monthlybar1=renderPlotly({

    p <- ggplot(lastyearsale,aes(x=MonthName, y=MonthTotal, fill=MonthName)) +
      geom_bar(colour="black", stat="identity",
               position=position_dodge(),
               size=.3) +                        # Thinner lines
      xlab("MonthName") + ylab("MonthTotal") + # Set axis labels
      ggtitle("Sales By The Month In Year:-2017")+ scale_y_continuous(labels = scales::comma)+   # Set title
      theme_bw()

    p <- ggplotly(p)

  }) 

})

Answer №1

If you're facing layout issues, consider defining css styles for the following properties:

- left

- top

- box-sizing

Ensure that both the element and its parent are set to display: block; and position: relative/fixed/absolute;

Set margin and padding to 0 to prevent any negative values.

Following these steps can often resolve common problems with layouts.

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

Trouble locating the ID selector within a nested Backbone view

Within this code snippet, I am utilizing the element controller pattern to display a collection of products. The main view template is rendering properly, showing all elements and the div selector "#cart-wrapper". However, when the main view calls the nest ...

"Enhancing User Experience: Combining Treeview and Table Features

I am looking to create a dynamic table with group by and ajax functionality. For instance: Table header (with sorting feature on each column) +/- (image to collapse or expand) Group by Element1 Display all elements of Element1 in table format +/- (im ...

Is there a way for me to utilize the imported data from one component in the context API using an arrow function?

I am trying to utilize placeInfo, reviews, detailsInfo, news from a data file. Instead of using value='hello', I am unsure if I can directly use it like this: value={placeInfo, reviews, detailsInfo, news}, as it is producing an error. Should I st ...

How to focus on an input element in Angular 2/4

Is there a way to focus on an input element using the (click) event? I'm attempting to achieve this with the following code, but it seems like there may be something missing. (I am new to Angular) sTbState: string = 'invisible'; private ele ...

Passing a leading zero function as an argument in JavaScript

Is there a method for JavaScript to interpret leading zeros as arguments (with the primitive value as number)? I currently have this code: let noLeadingZero = (number) => { return number } console.log('noLeadingZero(00):', noLeadin ...

I am facing an issue with installing bcrypt npm package. The error message is showing up as "Error: Cannot locate module node-pre-gyp

Currently using Windows 10 (version 10.0.17763 build 17763) and attempting to install Bcrypt with Nodejs Express server via NPM. Freshly updated to the latest version of Nodejs (v12.16.3). Regardless of whether I try installing the most recent edition of B ...

Getting started with imports in typescript package

Having trouble with imports in a TypeScript package. I have two classes, A and B, located in the models directory. Currently, I am importing class B into class A like this: import B from "models/B" interface A { b: B } export default A; H ...

I am curious about the significance of the "=>" symbol within the Ionic framework

I utilized the documentation provided on the Ionic website to incorporate Firebase into my mobile application. this.firebase.getToken() .then(token => console.log(`The token is ${token}`)) // store the token server-side and utilize it for sending not ...

Ways to pause JavaScript execution until a function completes its task

Is it possible to pause JavaScript execution until a specific function finishes in JavaScript/NodeJS? For instance: https://i.stack.imgur.com/Ta8pj.png Imagine the first line of code triggers an alert, and JavaScript stops executing until the user interac ...

Importing components in real-time to generate static sites

My website has a dynamic page structure with each page having its unique content using various components. During the build process, I am statically pre-rendering the pages using Next.js' static site generation. To manage component population, I have ...

Conceal information from view without hiding pseudo content visually

Here's a method I'm using to incorporate icons through the use of :before or :after pseudo content: <span class="icon icon__example is-content-visually-hidden">assistive text</span> Is there a way to hide the assistive text visually ...

Getting access to scope variables in an Angular controller written in ES6 style can be achieved by using

In my new Angular project, I decided to switch to using ES6 (Babel). However, I encountered an issue where ES6 classes cannot have variables. This led me to wonder how I could set my $scope variable now. Let's consider a simple controller: class Mai ...

Implementing Jquery Datatables in C# Codebase

I'm struggling to populate my jQuery Datatable with a List. Currently, I am writing the list to a file and accessing it in my view-model. Is this the correct approach? This is the snippet of my code: List<string> list = new List<string> ...

Expanding Gridview Width within a Container in ASP.Net: A Step-by-Step Guide

https://i.stack.imgur.com/ZaJE7.jpg After viewing the image above, I am facing a challenge with stretching and fixing a gridview to contain the entire div where it is placed. The issue arises when the gridview adjusts automatically based on the content&ap ...

Obtaining HTML data with ajax within a WordPress post

Greetings! I've been putting together a website and I'm eager to include a unique timeline in each of my posts. I'm utilizing WordPress for this project. However, since the timeline I want to insert will vary from post to post, I am unable t ...

TimePicker Component for ASP.Net MVC with Razor Syntax

I'm currently working on implementing a TimePicker using Razor and JQueryUI in my bootstrap website. While I have successfully created a DatePicker, I am facing difficulties in creating a separate TimePicker using two different TextBoxes instead of se ...

Delay with Vue.js v-bind causing form submission to occur before the value is updated

Trying to update a hidden input with a value from a SweetAlert modal, but encountering issues. The following code isn't working as expected - the form submits, but the hidden field's value remains null. HTML: <input type="hidden" name="inpu ...

Ways to display or conceal a component based on the current component being used

I am a newcomer in Angular, and I believe finding the solution to my problem will be a great learning experience. In my default component, the MainComponent is loaded in my <router-outlet>. At this stage, both the menu and the footer are displayed. H ...

Guide to retrieving the values of multiple variables depending on the smallest value within a particular category

Currently I am analyzing data from the titanic database. The columns are named as follows: Age Name (string) Survived (integer 0/1) I want to identify the youngest and oldest survivor passengers and display their Name along with their age. It's the ...

Using Jquery to extract URL parameters

Can anyone suggest a jQuery function I can use to fetch URL parameters? I've been utilizing the following function, which works well; however, it encounters issues when the URL doesn't have any parameters. I would like it to return an empty stri ...