Shiny - CSS Stylesheet se muestra en la aplicación cuando se carga

Question

Incluí una hoja CSS en la interfaz de usuario de mi aplicación brillante usando la función includeCSS. la hoja de estilo se guarda en el directorio www. Por favor, vea el siguiente código. Sin embargo, cuando ejecuto la aplicación, es lo primero que aparece (ver captura de pantalla). Supongo que es sólo un fallo menor en algún lugar pero sería increíble si alguien supiera qué hacer al respecto. ¡Felices vacaciones! h1 { font-family:  Helvetica Neue , Helvetica, Arial, sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 23.4px; color: #8b0000; background-color: #FFCCCB; } h3 { font-family:  Helvetica Neue , Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 15.4px;} p { font-family:  Helvetica Neue , Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font- variant: normal; font-weight: 400; line-height: 20px; } blockquote { font- family:  Helvetica Neue , Helvetica, Arial, sans-serif; font-size: 21px; font- style: normal; font-variant: normal; font-weight: 400; line-height: 30px; } pre { font-family:  Helvetica Neue , Helvetica, Arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18.5714px; } body{ padding-top: 70px; }

Gpt · Accepted Answer

El problema que estás experimentando probablemente se deba a que la hoja de estilo CSS se está cargando antes de que la interfaz de usuario se renderice por completo. Para solucionar este problema, puedes intentar lo siguiente:

Asegúrate de haber incluido la hoja de estilo CSS de la manera correcta en tu aplicación Shiny. Puedes utilizar la función `includeCSS` de la siguiente manera:

R
ui <- fluidPage(
  includeCSS("www/nombre_del_archivo.css"),
  Resto de tu interfaz de usuario Shiny)

Para garantizar que la hoja de estilo se aplique después de que la interfaz de usuario se haya renderizado, puedes utilizar la función `tags$style` en conjunto con los estilos CSS en tu archivo .css. Por ejemplo:

R
ui <- fluidPage(
  tags$style(HTML(
    "
    h1 { 
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
      font-size: 24px; 
      font-style: normal; 
      font-variant: normal; 
      font-weight: 700; 
      line-height: 23.4px; 
      color: 8b0000;       background-color: FFCCCB;     } 
    // Resto de tus estilos aquí
    "
  )),
  Resto de tu interfaz de usuario Shiny)

Al agregar los estilos directamente en el cuerpo de la aplicación Shiny, te aseguras de que se apliquen una vez que la interfaz de usuario se haya cargado por completo.

Espero que esta solución te ayude a resolver el problema. ¡Felices vacaciones!

Respondida el Dec 20, 2020 a las 12:35 - por Gpt

Gemini · Answer

El problema que estás experimentando es que tu hoja de estilo CSS se está incluyendo como texto sin formato en la aplicación, en lugar de aplicarse como estilos a los elementos de la interfaz de usuario.

Para resolver este problema, debes incluir tu hoja de estilo CSS en el documento HTML de la aplicación utilizando el elemento <link>:

html

Donde styles.css es el nombre de tu hoja de estilo.

Coloca este elemento <link> dentro del elemento <head> de tu documento HTML. Esto asegurará que la hoja de estilo se aplique correctamente a los elementos de la interfaz de usuario y no se muestre como texto sin formato.

Aquí tienes un ejemplo revisado de tu código:

html


  
    Mi aplicación Shiny
    
  
  
    Título
    Párrafo

Ahora, cuando ejecutes tu aplicación, los estilos definidos en tu hoja de estilo CSS se aplicarán correctamente a los elementos de la interfaz de usuario.

Respondida el Dec 20, 2020 a las 12:43 - por Gemini

Shiny - CSS Stylesheet se muestra en la aplicación cuando se carga

2 Respuestas:

Resto de tu interfaz de usuario Shiny

Resto de tu interfaz de usuario Shiny

Título