why my output is overlapping with header in nav bar page

ROHIT JHA

screen shot of ouptut this is  the screen shot of ouptut

here is the code

//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 has been overlapping with nav bar in nav page is there is a way to get overide of it. i dont know why it is happening can you please let me know it is due to css
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"))

        ))

// this is the output which i am showing there
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)

  }) 

})
A. Denis

You can try to define css styles:

left

top

box-sizing

Also make this element and parent element as display: block; position: relative/fixed/absolute;

Make margin and padding to 0 - to be sure, that's there are no negative values.

It can help in most of problems like this.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Why is my Header Getting Covered by Nav Bar? BootStrap

From Dev

Why is Rails 5.0.1 injecting an iframe in my html that interferes with links in the header nav bar?

From Dev

Why won't my nav bar center?

From Dev

Why is my nav bar with 'position:fixed' displaying at bottom of web page not bottom of viewport on mobile?

From Dev

Header, Nav, Container Layout without vertical scroll bar on entire page

From Dev

Why my nav-bar hides my texts in a fixed position?

From Dev

Why is my text not vertically in the middle on my CSS nav bar?

From Dev

Why does my nav bar affect the centering of my image?

From Java

I need assistance in updating my footer to be bottom fixed without overlapping my left hand nav bar

From Dev

Why does adding a border change the position of my nav bar?

From Dev

Why isn't my UIButton in a UIBarButtonItem not showing in the Nav Bar?

From Dev

Why won't my background Nav bar change colour?

From Dev

Why does my nav bar disappear on small device?

From Dev

Why my views are overlapping status bar in Android Studio Layout Editor

From Dev

Aligning nav bar to header image

From Dev

bootstrap nav bar overlapping div label

From Dev

bootstrap nav bar overlapping div label

From Dev

Entire nav bar overlapping the content below

From Dev

Header bar and sherlock action bar overlapping

From Dev

Can't get my nav bar to stick to top after scrolling past header?

From Dev

How to center my Nav Bar?

From Dev

Why is nav not aligning in the center of the header?

From Dev

Why when I add my NAV bar does it move my H1 element?

From Dev

How to fix a glitchy header collapsing to nav bar

From Dev

My div is overlapping my header when scrolling

From Dev

How do i make the evenly spread elements in my nav bar not touch the edges of the page?

From Dev

Why is my text not in middle of the blocks on nav bar? What am I doing wrong?

From Dev

Why is it that the image I use for my nav_bar button has white edges?

From Dev

css pdf page - header overlapping with content

Related Related

  1. 1

    Why is my Header Getting Covered by Nav Bar? BootStrap

  2. 2

    Why is Rails 5.0.1 injecting an iframe in my html that interferes with links in the header nav bar?

  3. 3

    Why won't my nav bar center?

  4. 4

    Why is my nav bar with 'position:fixed' displaying at bottom of web page not bottom of viewport on mobile?

  5. 5

    Header, Nav, Container Layout without vertical scroll bar on entire page

  6. 6

    Why my nav-bar hides my texts in a fixed position?

  7. 7

    Why is my text not vertically in the middle on my CSS nav bar?

  8. 8

    Why does my nav bar affect the centering of my image?

  9. 9

    I need assistance in updating my footer to be bottom fixed without overlapping my left hand nav bar

  10. 10

    Why does adding a border change the position of my nav bar?

  11. 11

    Why isn't my UIButton in a UIBarButtonItem not showing in the Nav Bar?

  12. 12

    Why won't my background Nav bar change colour?

  13. 13

    Why does my nav bar disappear on small device?

  14. 14

    Why my views are overlapping status bar in Android Studio Layout Editor

  15. 15

    Aligning nav bar to header image

  16. 16

    bootstrap nav bar overlapping div label

  17. 17

    bootstrap nav bar overlapping div label

  18. 18

    Entire nav bar overlapping the content below

  19. 19

    Header bar and sherlock action bar overlapping

  20. 20

    Can't get my nav bar to stick to top after scrolling past header?

  21. 21

    How to center my Nav Bar?

  22. 22

    Why is nav not aligning in the center of the header?

  23. 23

    Why when I add my NAV bar does it move my H1 element?

  24. 24

    How to fix a glitchy header collapsing to nav bar

  25. 25

    My div is overlapping my header when scrolling

  26. 26

    How do i make the evenly spread elements in my nav bar not touch the edges of the page?

  27. 27

    Why is my text not in middle of the blocks on nav bar? What am I doing wrong?

  28. 28

    Why is it that the image I use for my nav_bar button has white edges?

  29. 29

    css pdf page - header overlapping with content

HotTag

Archive