How to collapse a toolbar? I tried this, but doesn't work:
$("#MyIdeas_toolbars_textToolbar").igToolbar("option", "isExpanded", "false");
Hello,
You can recalculate and set the height of the igHtmlEditor when you hide/show the toolbars in the Toggle function.
Thanks Kolev, you fixed it! but I need to set height to my editor, if I am not able to set height in order to collapse and expand the toolbars, what can I do?
Hello Luis,
This is because static height is set, in order to be automatically calculated you should remove the height definition.
Modified sample:
http://jsfiddle.net/zdravko/qdfozjcL/2/show/
Thanks Kolev for your help. Your code solve part of the issue, now there is another one, when you collapse the toolbars there is an empty space at the bottom of the editor, look at the attached picture, how to fix that?
Currently there is no way to set the expand state of the igToolbar through Razor sintax (with the MVC wrapper), although my suggestion is to use the provided igToolbar widget. Below you will find a sample that is showing how on button click to toggle the state.
As you will see I am getting all toolbars and for each of them I set the isExpanded option.
Sample:
http://jsfiddle.net/zdravko/qdfozjcL/show/
Code snippet:
function Toggle(){ var expanded = false; var toolbars = $(".ui-igtoolbar"); if($(toolbars[0]).igToolbar("option", "isExpanded") != true) expanded=true; $.each(toolbars, function(key, value){ $(value).igToolbar("option", "isExpanded", expanded); if(!expanded){ $(value).css("overflow", "hidden") .css("width", "26.1999998092651px"); }else{ $(value).css("overflow", "hidden") .css("width", ""); } }); }