2013-04-06 7 views
12

मैं एक जेएसएफ घटक आधार लागू कर रहा हूं जहां आपको इस्तेमाल होने वाले सीएसएस को ओवरराइड करना होगा या यह इसके डिफ़ॉल्ट सीएसएस का उपयोग करेगा। मैं div को छिपाने की कोशिश करने से छिपाने की कोशिश कर रहा हूं और मैंने समृद्ध-पैनलबार-हेडर-एक्ट क्लास शैली = "डिस्प्ले: कोई नहीं" सेट करने का प्रयास किया है, लेकिन फिर यह अपने डिफ़ॉल्ट सीएसएस में खींचता है। क्या समृद्ध-पैनलबार-हेडर-एक्ट में स्टाइल एट्रिब्यूट जोड़ने का कोई तरीका है (क्योंकि मुझे कक्षा को कार्यान्वित करना है) जो div को छुपाता है? मैं बेलोसीएसएस विकल्प शैली = "प्रदर्शन: कोई नहीं"

सीएसएस मेरी सीएसएस और एचटीएमएल शामिल किया है:

element.style { 
} 
Matched CSS Rules 
.rich-panelbar-header-act { 
background-image: url(/spot-main-web/a4j/g/3_3_3.Finalorg.richfaces.renderkit.html.GradientA/DATB/eAGLj48PDQ1lBAAJswIe.html); 
background-position: top left; 
background-repeat: repeat-x; 
vertical-align: middle; 
color: #FFF; 
background-color: #555; 
font-size: 11px; 
font-weight: bold; 
font-family: Arial,Verdana,sans-serif; 
} 
.rich-panelbar-header-act { 
border: 0 solid red; 
padding: 0 1px 1px 5px; 
cursor: pointer; 
} 
user agent stylesheetdiv { 
display: block; 
} 
Inherited from body.browserChrome.browserChrome2 
body { 
font: 12px/17px Helvetica, Arial, Verdana; 
} 

HTML:

<html version="XHTML 2.0" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head></head> 
<body> 
<div class="rich-panelbar rich-panelbar-b " id="j_id95" style="padding: 0px; height: 400px; width: 500px; none"> 
<div class="rich-panelbar rich-panelbar-interior " id="j_id96" style="none"><div class="rich-panelbar-header " style=";">Leverage the whole set of JSF benefits while working with AJAX</div><div class="rich-panelbar-header-act " style=";;;;display: none;">Leverage the whole set of JSF benefits while working with AJAX</div><div class="rich-panelbar-content-exterior" style="display: none; width: 100%;"><table cellpadding="0" cellspacing="0" style="height: 100%;" width="100%"><tbody><tr><td class="rich-panelbar-content " style=";"> 

Ajax4jsf is fully integrated into the JSF lifecycle. While other frameworks only 

give you access to the managed bean facility, Ajax4jsf advantages the action and value 

change listeners as well as invokes server-side validators and converters during the 

AJAX request-response cycle.</td></tr></tbody></table></div></div> 
</div> 
</body> 
</html> 
+1

कृपया सीएसएस कोड पोस्ट करें। मुझे समझ में नहीं आता क्यों प्रदर्शन: कोई भी काम नहीं करता है। एक और विशिष्ट चयनकर्ता का प्रयोग करें? –

+0

@ExplosionPills पोस्ट सीएसएस/एचटीएमएल – c12

उत्तर

26
width: 0; height: 0; 

या

visibility: hidden; 

या

opacity: 0; 

या

position: absolute; top: -9999px; left: -9999px; 

या सिर्फ

!
+4

अभिगम्यता के बारे में नोट: स्क्रीन पाठक 'डिस्प्ले: कोई नहीं' और 'दृश्यता: छुपा' (यह इरादा इतना अच्छा है) से छिपा तत्वों को अनदेखा कर देगा, लेकिन फिर भी व्यूपोर्ट से बाहर निकलने वाले लोगों को पढ़ा जाएगा (नकारात्मक के माध्यम से टेक्स्ट इंडेंट या बाएं/दाएं अनुवाद)। मुझे लगता है कि एक स्क्रीन रीडर (क्या यह वॉयसओवर है?) 'ऊंचाई: 0' वाले तत्वों को अनदेखा कर देगा लेकिन अन्य नहीं करेंगे। इसलिए सावधान रहें कि कुछ उपयोगकर्ता अभी भी आपकी (ऐसी नहीं) छुपी सामग्री को समझेंगे जबकि आप सोच सकते हैं। * व्यूपोर्ट से बाहर स्थित * को अक्सर व्यक्त करने के लिए सीएसएस ढांचे और सीएमएस टेम्पलेट्स में 'विज़ुअल-छुपा' कहा जाता है। – FelipeAls

+2

संबंधित: 'top: -9999px' का उपयोग न करें क्योंकि यह पृष्ठ की शीर्ष पर दृश्य कूदता है और आपकी सामग्री में नेविगेट करने के लिए कीबोर्ड का उपयोग करने वाले लोगों के लिए पिछली स्थिति पर वापस जा सकता है। 'बाएं: -99 99 पीएक्स' (या आरटीएल भाषाओं में दाएं) ठीक है क्योंकि यह स्क्रॉल स्थिति को लंबवत नहीं ले जाएगा और यह पर्याप्त है। यह फोकस करने योग्य तत्वों (लिंक, अनिवार्य रूप से फॉर्म तत्व) से संबंधित है, लेकिन बाएं पॉपर्टी पर्याप्त है, बेहतर शीर्ष – FelipeAls

+1

से बेहतर से बचें कुछ सालों बाद यह भी एक दिलचस्प विकल्प प्रतीत होता है: 'रेखा-ऊंचाई: 0; छिपा हुआ सैलाब; गद्दी: 0; मार्जिन: 0' –

4

मुझे लगता है visibility:hidden; आप में मदद मिलेगी। :)

1

उपयोग को रोकने के लिए महत्वपूर्ण यह अधिरोहित हो रही -

function hidediv() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('DIVIDNAME').style.display = 'none'; 
}else { 
if (document.layers) { // Netscape 4 
document.DIVIDNAME.display = 'hidden'; 
}else { // IE 4 
document.all.DIVIDNAME.style.display = 'none'; 
}}} 
</script> 
1

यह मेरे लिए काम करता ..

!important कर सकते हैं '-

.rich-panelbar-header-act { 
    display:none !important; 
} 

इसके अलावा, आप के रूप में एक वापस ऊपर जावास्क्रिप्ट का उपयोग कर सकते टी संस्करण में इस्तेमाल नहीं किया जा सकता है इसलिए display:none; के बजाय इसका उपयोग करें:

position: absolute; top: -9999px; left: -9999px; 
संबंधित मुद्दे