html - R Shiny Image without padding/ stretched across page using css -
i'm building shiny dashboard , want image stretch across top of dashboard body no padding. i'm new customizing apps , css, , i'd prefer keep css inline if possible.
this have right now: 
i'd extend image indicated blue arrows/ red outline below.
here's code have far:
library('shiny') library('shinyjs') library('shinydashboard') ########## header<-dashboardheader(titlewidth = 325) header$children[[2]]$children <- #tags$a(tags$img(src='image.png',height='45',width='184')) ###### body<-dashboardbody( tags$style(".content {background-color: black;}"), useshinyjs(), tags$style(type='text/css', ".skin-blue .main-header .logo {background-color: #000000}" ), tags$style(type='text/css', ".skin-blue .main-header .logo:hover {background-color: #000000}"), tags$style(type='text/css', ".skin-blue .main-header .navbar {background-color: #000000}"), tags$style(type="text/css",".shiny-output-error { visibility: hidden; }",".shiny-output-error:before { visibility: hidden; }"), fluidpage( img(src="img2.png",height="100%", width="100%"), tabbox("menu surf database", width = 12, tabpanel("menu surf database", tabsetpanel( tabpanel("lto survey results", h2(strong(textoutput("t"))), h4(textoutput("description")), h2(strong("lto results"),align='center'), h4(strong(textoutput("price"))), br(), plotoutput("q4plot",height = 200), br(),br(), plotoutput("seasonplot",height=200), br(),br(), plotoutput("q1plot"), br(),br()), tabpanel("demographics", h2(strong(textoutput("t2"))), h4(textoutput("description2")), h2(strong("demographics of top 2 box:"),align='center'), h3(strong("by purchase intent"),align= "center"), br(), plotoutput("demoplot1"), plotoutput("demoplot2") ))), tabpanel("exploratory comparison", tabsetpanel( tabpanel("visuals", h2(strong("proprietary menu surf results:")), selectinput("index",label = "index by:",choices = c("meal part","day part"),selected = "meal part",multiple = false), checkboxinput("additem", label="include sidebar item comparision?", value = false, width = null), h4(strong("purchase intent indices:")), plotoutput("prop1"), h4(strong("uniqueness indices:")), plotoutput("prop2"), h4(strong("draw indices:")), plotoutput("prop3"), h4(strong("cravebility indices:")), plotoutput("prop4"), h4(strong("brand fit indices")), plotoutput("prop5") ), tabpanel("tables", h2(strong("menu surf results, tables:")), h3("purchase intent"), br(), datatableoutput("proptable1") ))) ))) sidebar<-dashboardsidebar(width = 325, conditionalpanel( condition = "$('li.active a').first().html()==='menu surf database'", h4("filters:"), br(), selectinput('month',label='month:',choices= month.name,multiple = true,selected = "march"), selectinput("year",label= "year:",choices= c("2017"),multiple = false,selected = "2017"), selectinput("daypart",label = "day part:",choices=c("breakfast","lunch/dinner"),selected = c("breakfast","lunch/dinner"),multiple = true), selectinput("mealpart",label="meal part:",choices =c("adult beverage","app/starter","dessert","ent/main dish","non-alcohol beverage","side/extra","snack"),selected = c("adult beverage","app/starter","dessert","ent/main dish","non-alcohol beverage","side/extra","snack"),multiple = true), selectinput("coursecategory",label = "course category:",choices = c('all','asian bowl','baked goods','beef dish','beverage','breaded other', 'breaded protein','breaded vegetables','breads','breakfast starch', 'burgers','chicken dish','combo plates','egg dish','fish dish','fried dessert', 'fries','frozen beverage','ice cream','mexican','mixed grill','nachos','pasta/noodles', 'pizza','pork dish','salad main dish','sandwich','shellfish dish','soup','specialty drinks' ),selected= 'all',multiple = false), #textoutput('test'), uioutput('restchoices'), uioutput('itemchoices'), br(), h5("edit data demographic features below:"), selectinput('gender',label = "gender:",choices = c("female","male"),multiple = true,selected = c("female","male")), selectinput('generation',label = "generation:",choices = c("generation z","millennials","generation x","baby boomers","matures"),selected = c("generation z","millennials","generation x","baby boomers","matures"),multiple = true), selectinput('ethnicity',label ='ethnicity:',choices = c("asian","black/african american (non-hispanic)","caucasian (non-hispanic)","hispanic","mixed ethnic background","other"),selected = c("asian","black/african american (non-hispanic)","caucasian (non-hispanic)","hispanic","mixed ethnic background","other"),multiple = true), selectinput('ea',label = 'eater archetype:', choices = c("affluent socializers","bargain hunters","busy balancers","fs hobbyist","fs hobbyists","functional eater","functional eaters","habitual matures","health enthusiast","health enthusiasts"),selected = c("affluent socializers","bargain hunters","busy balancers","fs hobbyist","fs hobbyists","functional eater","functional eaters","habitual matures","health enthusiast","health enthusiasts"),multiple = true) ), conditionalpanel( condition = "$('li.active a').first().html()==='exploratory comparison'", #h5("the exploratory comparison tab allows view results many items. please filter results below."), h4("filters:"), br(), selectinput('month2',label='month:',choices= month.name,multiple = true,selected = "march"), selectinput("year2",label= "year:",choices= c("2017"),multiple = false,selected = "2017"), selectinput("daypart2",label = "day part:",choices=c("breakfast","lunch/dinner"),selected = c("breakfast","lunch/dinner"),multiple = true), selectinput("mealpart2",label="meal part:",choices =c("adult beverage","app/starter","dessert","ent/main dish","non-alcohol beverage","side/extra","snack"),selected = c("adult beverage","app/starter","dessert","ent/main dish","non-alcohol beverage","side/extra","snack"),multiple = true), selectinput("coursecategory2",label = "course category:",choices = c('all','asian bowl','baked goods','beef dish','beverage','breaded other', 'breaded protein','breaded vegetables','breads','breakfast starch', 'burgers','chicken dish','combo plates','egg dish','fish dish','fried dessert', 'fries','frozen beverage','ice cream','mexican','mixed grill','nachos','pasta/noodles', 'pizza','pork dish','salad main dish','sandwich','shellfish dish','soup','specialty drinks' ),selected= 'all',multiple = false), uioutput('restchoices2'), br(), h5("edit data demographic features below:"), selectinput('gender2',label = "gender:",choices = c("female","male"),multiple = true,selected = c("female","male")), selectinput('generation2',label = "generation:",choices = c("generation z","millennials","generation x","baby boomers","matures"),selected = c("generation z","millennials","generation x","baby boomers","matures"),multiple = true), selectinput('ethnicity2',label ='ethnicity:',choices = c("asian","black/african american (non-hispanic)","caucasian (non-hispanic)","hispanic","mixed ethnic background","other"),selected = c("asian","black/african american (non-hispanic)","caucasian (non-hispanic)","hispanic","mixed ethnic background","other"),multiple = true), selectinput('ea2',label = 'eater archetype:', choices = c("affluent socializers","bargain hunters","busy balancers","fs hobbyist","fs hobbyists","functional eater","functional eaters","habitual matures","health enthusiast","health enthusiasts"),selected = c("affluent socializers","bargain hunters","busy balancers","fs hobbyist","fs hobbyists","functional eater","functional eaters","habitual matures","health enthusiast","health enthusiasts"),multiple = true) )) ######## ui <- dashboardpage( header, sidebar, body ) ########### server<-function(input, output, session){ } ##### shinyapp(ui = ui, server = server) thanks in advance ! :)
i no means css expert, how able achieve looking for:
tags$style(".topimg { margin-left:-30px; margin-right:-30px; margin-top:-15px; }"), div(class="topimg",img(src="https://dotunroy.files.wordpress.com/2015/05/happy-people.jpg",height="100%", width="100%")), i had choose image, because did not have image used. luckily found volunteers. @ happy people!
Comments
Post a Comment