2012-08-25 15 views
10

मैं वेब-विकास में नौसिखिया हूं और संभवतः एक प्राथमिक प्रश्न है। मैंने अपनी साइट पर जूमला 2.5 सीएमएस स्थापित किया है, डाउनलोड किया है, स्थापित किया है और SyntaxHighlighter प्लगइन चालू कर दिया है। तब bash वाक्य रचना सक्षम है और मेरे पेजवर्टिकल स्क्रॉलबार सिंटैक्स हाइलाइटर ब्लॉक को कैसे हटाएं?

<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> 

लिए ज्यादा कुछ नहीं निम्नलिखित कोड जोड़ा मैं इस परिणाम

vertical scrollbar in SyntaxHighlighter's block

यह ठीक है मिल गया है, लेकिन मैं क्यों प्रकाश डाला खड़ी स्क्रॉलबार प्रकट होता है पता नहीं है। यह केवल एक या दो पिक्सेल के लिए स्क्रॉल करता है। तो, क्या मैं कोशिश की है मेरे टेम्पलेट के CSS फ़ाइल

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

की शुरुआत यह मुझे मदद नहीं करता है के लिए एक निम्नलिखित कोड जोड़ने के लिए है और मुझे लगता है कि समस्या गहरा है। क्या आपके पास इस लंबवत स्क्रॉलबार को हटाने के बारे में कोई विचार है?

अद्यतन अगर मैं टेम्पलेट के CSS स्क्रॉलबार गायब लेकिन हाइलाइट किए गए कोड के साथ ब्लॉक पेज स्केलिंग पर बहुत ही अजीब बर्ताव में !important घोषणा का उपयोग करें।

उत्तर

0

मैंने उदाहरण देखा और पाया कि इसमें एक लंबवत स्क्रॉल भी है। जब मैंने "syntaxhighlighter javascript" का निरीक्षण किया तो स्वयं का ओवरफ़्लो था। पता लगाएं कि आपको कोड को शामिल किया है के बाद या इससे पहले कि आप सीएसएस

22

शामिल आप ऊर्ध्वाधर स्क्रॉल पट्टी को हटाने और क्षैतिज एक ही जब जरूरत को जोड़ने के लिए निम्नलिखित शैली जोड़ सकते हैं:

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

यदि आप एक अलग सीएसएस फ़ाइल का उपयोग करते हैं, तो आपको सबसे पहले सभी * ओवरफ्लो * गुणों को 'स्ककोर' में हटा देना होगा।काम करने के लिए यह जवाब पाने के लिए सीएस' – nixda

0

SyntaxHighlighter overflow: auto डिफ़ॉल्ट के रूप में है शैली (shCoreDefault.css में निम्नलिखित सीएसएस स्निपेट देखें)। यही कारण है कि हमें overflow-y:hidden !important सेट करना होगा जब हमें लंबवत स्क्रॉलबार पसंद नहीं है। लेकिन हमें अब overflow-x: auto सेट करने की आवश्यकता नहीं है। यह पहले से ही है।

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

आप देख सकते हैं SyntaxHighlighter पहले से ही इस्तेमाल किया गया है '! महत्वपूर्ण', यही कारण है कि आप अन्य ब्राउज़रों मिलेगा अलग परिणाम है है। मेरे अनुभव पर, फ़ायरफ़ॉक्स में, मुझे इच्छित परिणाम मिला: वर्टिकल स्क्रॉलबार छुपाया जा रहा है। लेकिन क्रोम में, स्क्रॉलबार अभी भी वहां पर है।

मेरे परिभाषित वर्ग की उच्च प्राथमिकता के क्रम में, मैं कंटेनर आईडी या कक्षा की तरह कुछ अन्य स्कोप चयनकर्ता को उपसर्ग करता हूं।

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

अपनी वेबसाइट में SyntaxHighlighter के लिए अपने खड़ी स्क्रॉलबार को निकालने के लिए आप अपने पृष्ठ के अपने <head>...</head> अनुभाग में नीचे कोड का उपयोग कर सकते हैं।

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

आशा है कि यह कोड स्निपेट आपकी मदद करेगा! :)

0

क्षैतिज स्क्रॉल बार को हटाने की कोशिश कर रहा है, अंततः जॉन यिन के पोस्ट से प्रेरणा लेने के लिए यह मेरे लिए काम किया गया था। नीचे का कोई उप-सेट स्वयं में काम नहीं करता है।

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