2013-11-22 9 views
8

मैं कई अलग एक फेसबुक टिप्पणी बॉक्स के लिए मजबूर करने के तरीके पर शोध किया गया है प्लग में जा तरल पदार्थ/उत्तरदायी/तरल/जो कुछ-हम-कॉल-यह (बस की मूर्खता दिखाने के लिए नाम), और वे सभी ठीक काम करते हैं। लेकिन, Google Chrome से एक्सेस करते समय, वे सभी प्लग-इन गायब हो जाते हैं।उत्तरदायी फेसबुक टिप्पणी बॉक्स

मैं इस का उपयोग कर रहा:

.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe { 
width: 100% !important; 
} 

ही परिणाम है कौन सा (जाहिरा तौर पर) के रूप में:

#fbcomments, .fb-comments, .fb-comments iframe[style], .fb-comments span{ 
width: 100% !important; 
} 

प्रश्न: मैं इस अजीब व्यवहार कैसे तय कर सकते हैं? (ऐसा क्यों होता है?)

आपके समय के लिए धन्यवाद। गीलेर आप मेरी मदद करते हैं या नहीं, आज के लिए एक अच्छा है! :)

उत्तर

23

यह मेरे लिए काम किया bellow इस सीएसएस जोड़ें: FB-टिप्पणी div में जोड़े डेटा-चौड़ाई = "100%"

<div class="fb-comments" data-href="http://example.com/comments" data-width="100%" data-numposts="5" data-colorscheme="light"></div> 

और जब आप ब्राउज़र का आकार बदलते हैं तो यह उत्तरदायी होगा।

आप एफबी-टिप्पणियां div को किसी अन्य div के अंदर डाल सकते हैं और वह div जो चौड़ाई चाहते हैं उसे दे सकते हैं।

+0

है कि एक का इलाज काम इस्तेमाल कर सकते हैं में! – MJCoder

+1

यह निश्चित रूप से फेसबुक में बताए गए अनुसार काम करेगा: 'डेटा-चौड़ाई': प्लगइन की चौड़ाई। तरल चौड़ाई के लिए या तो एक पिक्सेल मान या शाब्दिक 100%। टिप्पणियाँ प्लगइन का मोबाइल संस्करण चौड़ाई पैरामीटर को अनदेखा करता है, और इसके बजाय 100% की द्रव चौड़ाई है। https://developers.facebook.com/docs/plugins/comments#settings –

+2

यह उत्तर स्वीकार किया जाना चाहिए !! – Ja8zyjits

1

यह फेसबुक टिप्पणी है भाग

<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-colorscheme="light"></div> 

बस div-

<style>.fb_iframe_widget span[style]{width:100% !important;}</style> 
1

बस सम्मिलित डेटा-चौड़ाई = "100%" div

<div class="fb-comments" data-width="100%"></div>

0

आप डेटा-मोबाइल गुण

<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-mobile="true"></div> 
संबंधित मुद्दे