Cómo eliminar la barra de desplazamiento vertical Sintaxis Bloque iluminador?

Soy novato en desarrollo web y posiblemente tenga una pregunta principal. He instalado Joomla 2.5 CMS en mi sitio, descargué, instalé y encendí el complemento SyntaxHighlighter. Entonces habilitada la sintaxis bash y ha añadido nada más el siguiente código a mi páginaCómo eliminar la barra de desplazamiento vertical Sintaxis Bloque iluminador?

<pre class="brush: bash">$ uname -a 
Linux laptop 2.6.32-41-generiC#89-Ubuntu SMP Fri Apr 27 22:22:09 UTC 2012 i686 GNU/Linux 
$</pre>

Me dieron este resultado

vertical scrollbar in SyntaxHighlighter's block

Está bien pero no tengo ni idea de por qué aparece la barra de desplazamiento vertical resaltado. Se desplaza solo por uno o dos píxeles. Por lo tanto, lo que he tratado es añadir un código siguiente al principio del archivo de mi plantilla CSS

.syntaxhighlighter, 
.syntaxhighlighter div, 
.syntaxhighlighter code, 
.syntaxhighlighter table, 
.syntaxhighlighter table td, 
.syntaxhighlighter table tr, 
.syntaxhighlighter table tbody { 
    overflow-y: hidden; 
}

No me ayudó y creo que el problema es más profundo. ¿Tiene alguna idea sobre cómo eliminar esta barra de desplazamiento vertical?

actualización si uso la declaración !important en la plantilla de CSS la barra de desplazamiento dissappear pero el bloque con el código resaltado se comporta muy extraño en la página de escala.

Fuente

2012-08-25 Anonymous

Miré el ejemplo y encontré que también hay un desplazamiento vertical. Cuando inspeccioné "syntaxhighlighter javascript" sí tenía un desbordamiento. Compruebe si ha incluido el código antes o después de que haya incluido el css

Fuente

2012-08-25 19:43:03 nandu

Puede añadir el siguiente estilo para quitar la barra de desplazamiento vertical y añadir una horizontal sólo cuando sea necesario:

<style type="text/css"> 
  .syntaxhighlighter { 
     overflow-y: hidden !important; 
     overflow-x: auto !important; 
  } 
</style>

Fuente

2012-11-08 19:21:00

Si utiliza un archivo CSS separado, primero tiene que eliminar todas las partes "! Importantes" para todas las propiedades * overflow * en 'scCore.cs' para hacer que esta respuesta funcione – nixda

SyntaxHighlighter tiene overflow: auto por defecto estilo (consulte el siguiente fragmento de css en shCoreDefault.css). Es por eso que tenemos que establecer overflow-y:hidden !important cuando no nos gusta la barra de desplazamiento vertical. Pero ya no necesitamos el conjunto overflow-x: auto. Ya está allí.

.syntaxhighlighter { 
    font-size: 1em !important; 
    margin: 1em 0 !important; 
    overflow: auto !important; 
    position: relative !important; 
    width: 100% !important; 
}

Se puede ver SyntaxHighlighter ya ha utilizado '! Importante', por eso, se encontraría diferentes navegadores tiene resultado diferente. En mi experiencia, en Firefox obtuve el resultado deseado: la barra de desplazamiento vertical está oculta. Pero en Chrome, la barra de desplazamiento todavía está por allí.

Para tener una prioridad más alta de mi clase definida, prefijo algún otro selector de ámbito, como la identificación o clase del contenedor.

ContainerId .syntaxhighlighter { 
    overflow-y: hidden !important; 
}

Fuente

2014-02-01 04:01:00

Para eliminar su barra de desplazamiento vertical para SyntaxHighlighter en su página web se puede utilizar el siguiente fragmento de código en su sección <head>...</head> de su página.

<style type="text/css"> 
.syntaxhighlighter table td.code .container { 
    position: relative !important; 
    padding-bottom: 5px !important; 
} 
</style>

Espero que este fragmento de código te ayude! :)

Fuente

2015-08-13 14:24:17 Mdhar9e

Al tratar de eliminar una barra de desplazamiento horizontal, esto fue lo que finalmente funcionó para mí, inspirándose en la publicación de John Yin anterior. Ningún subconjunto del siguiente trabajó en sí mismo.

/* .post class is on high-level div */ 
.post .syntaxhighlighter { 
    position: relative !important; 
    width: 100% !important; 
    overflow-y: visible !important; 
    overflow-x: visible !important; 
}

Fuente

2015-10-24 19:45:57 Jameson

Cómo eliminar la barra de desplazamiento vertical Sintaxis Bloque iluminador?

Respuesta

Cuestiones relacionadas