javascript - 为什么我的输出与导航栏页面中的标题重叠

Question

输出的屏幕截图

这是代码

//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); "
      ))),

我的流体行已经与导航页面中的导航栏重叠，有没有办法克服它。我不知道为什么会这样，你能告诉我这是由于 css
流体行(

  uiOutput("tabbox")

)
)

//服务器.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"))

        ))

//这是我在那里展示的输出
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

你可以尝试定义css样式:

左

顶

盒子大小

同样把这个元素和父元素做成display: block;position:relative/固定/绝对；

使边距和填充为 0 - 可以肯定的是，没有负值。

它可以帮助解决大多数此类问题。