मैं TinyMCE में फ़्लोटिंग बटन के साथ तरल टूलबार कैसे बना सकता हूं?

Question

मुझे मूलभूत TinyMCE सेटअप मिला है, और मैं बटन के साथ एक "तरल पदार्थ" टूलबार बनाने की कोशिश कर रहा हूं जो टूलबार बहुत छोटा होने पर अगली पंक्ति में गिर जाए। मैं एक एकल तालिका पंक्ति में सभी बटन मिल गया है:

tinyMCE.init({ 
    mode : "textareas", 
    theme : "advanced", 
    plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager", 
    theme_advanced_buttons1 : "bold,italic,justifyleft,justifycenter,justifyright,justifyfull," 
     +"styleselect,formatselect,fontselect,fontsizeselect,bullist,numlist,link,unlink,image,pdw_toggle," 
     +"pastetext,pasteword,search,replace,outdent,indent,blockquote,undo,redo,code,forecolor,backcolor," 
     +"tablecontrols,hr,removeformat,visualaid,sub,sup,charmap,emotions,media,advhr,print,ltr,rtl,fullscreen," 
     +"cite,abbr,acronym,del,ins,attribs,visualchars,nonbreaking,template,blockquote,insertfile,insertimage,underline,strikethrough", 
    theme_advanced_buttons2 : "", 
    theme_advanced_buttons3 : "", 
    theme_advanced_buttons4 : "", 
    theme_advanced_toolbar_location : "top", 
    width: "100%", 
    height: "400" 
}); 

मैं सभी प्रकार सीएसएस के की कोशिश की है इस लक्ष्य को हासिल करने के लिए, मुझे यकीन है कि क्यों यह काम नहीं करेगा नहीं कर रहा हूँ:

.mceToolbar tr { 
    display:block !important; 
    width:100% !important; 
} 
.mceToolbar td { 
    clear:none !important; 
    display:block !important; 
    float:left !important; 
} 

http://fiddle.tinymce.com/aecaab/1

: http://jsfiddle.net/vKTcq/

तुम मेरे TinyMCE डेमो यहाँ के साथ प्रयोग कर सकते हैं:

क्या मैं के लिए देख रहा हूँ कुछ इस तरह (उत्पादन फलक का आकार परिवर्तन) है

मुझे पता है कि मैंने अकेले सीएसएस के साथ ऐसा किया है, इसलिए मुझे पूरा यकीन है कि यह संभव है - मैं इसे समझने के लिए प्रतीत नहीं कर सकता। कोई विचार?

Answer 1

आह, यह पाया गया, white-space संपत्ति टूलबार में सबकुछ पर nowrap पर सेट है, डिफ़ॉल्ट त्वचा के साथ-साथ अन्य स्किन्स में भी। ओवरराइड कर इस सीएसएस का उपयोग करें:

.mceToolbar * { 
    white-space: normal !important; 
} 
.mceToolbar tr, 
.mceToolbar td { 
    float:left !important; 
} 

मुझे यकीन है कि जो विशिष्ट तत्वों वास्तव में white-space ठीक की जरूरत नहीं कर रहा हूँ, लेकिन यह पूरी तरह से काम करता है।

डेमो: एक छोटे उपकरण पट्टी के साथ http://fiddle.tinymce.com/becaab

उदाहरण आउटपुट (बटन अब के बजाय ढेर स्क्रीन बंद हो जाएगा):

Answer 2

मैं आपके सवाल का अनुमान कम या ज्यादा यह तो सवाल के बराबर होती है : TinyMCE: How to display all toolbars on a single row? स्वीकृत उत्तर देखें।