Shiny — CSS работает локально, но некорректно при развертывании

Я столкнулся с проблемой с CSS, используя блестящую библиотеку приложений R. Я включаю HTML и файл CSS, и локально он работает отлично (также в браузере), но при развертывании (как на блестящем сервере, так и на моем собственном сервере) некоторые структуры разрушаются, хотя некоторые части CSS все еще работают правильно .

Вот так это выглядит при развертывании.

Shiny — CSS работает локально, но некорректно при развертывании

Вот так это выглядит локально.

Shiny — CSS работает локально, но некорректно при развертывании

Это мой код:

ui <- fluidPage(

  navbarPage("Peter Dieter",position = c("fixed-top"),
             tabPanel("Welcome!",
                      includeHTML("Welcomepage.html"),
                      HTML(paste0('<script type = "text/javascript" src = "https://platform.linkedin.com/badges/js/profile.js" async defer></script>
                                  <div class = "LI-profile-badge"  data-version = "v1" data-size = "medium" data-locale = "de_DE" data-type = "vertical" data-theme = "dark" data-vanity = "peter-dieter"><a class = "LI-simple-link" href = "https://de.linkedin.com/in/peter-dieter?trk=profile-badge">Peter Dieter</a></div>'))
                      ),
             tabPanel("My CV", 
                      includeHTML("srt-resume2.html")
             ),
             tabPanel("Projects",
                      includeHTML("Projects.html")
             ),
             tabPanel("Stats Game",
                      includeHTML("statsgamehtml.html"),
                      absolutePanel(actionButton("new","New Game"),top = "210px",left = "200px"),
                      absolutePanel(sliderInput("inp","Pearson Correlation",min=-1,max=1,value = 0,step=0.01),top = "280px",left = "100px"),
                      absolutePanel(plotOutput("dataplot"),top = "170px",left = "520px",width = "500px"),
                      absolutePanel(actionButton("answer","Check Answer"),top = "460px",left = "200px"),
                      useShinyalert()
             )
             ),

  includeCSS("resume.css"),
  setBackgroundColor(color=c("#2980B9","#6DD5FA"),gradient = c("radial"),direction = "right")
  )#

Мотыга точно вы развертываете его? Есть ли какие-либо ошибки в веб-браузере, которые могут дать понять, что может быть не так (например, файлы, которые он не может найти)? Может быть, он не может найти файл css?

MrFlick 04.02.2019 17:30

Сначала я развернул его на блестящем сервере, затем на своем собственном сервере, оба раза я загрузил все соответствующие файлы. Я даже пытался добавить код CSS прямо в файл (что возможно в shining), и у меня была та же проблема. Кроме того, удаление файла CSS приводит к ошибке, поэтому он должен был его найти.

Peter Dieter 04.02.2019 17:36

Загрузите развернутую страницу и проверьте консоль разработчика на наличие ошибок при поиске файлов JS и CSS и других ссылок.

DriveItLikeYouStoleIt 04.02.2019 17:47

@DriveItLikeYouStoleIt Да, спасибо, найдены некоторые ошибки, сначала попробую их решить сам. Но это должно быть так

Peter Dieter 04.02.2019 17:51
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
4
376
0

Другие вопросы по теме