[tav2119]

I am currently working with a mysql table with a field of type enum. The field has two values, 'Yes' and 'No'.  When using the bootstrap theme the width of this field is much to small and only the 'x' and the dropdown arrow are displayed. When i set the theme to flexgrid or datatable the element is displayed enough width.

 

Could there be an issue with the way the containing <div> size is calculated in the bootstrap theme?

 

Below is an example of the html for the bootstrap theme and the flexgrid theme.

 

With the bootstap theme  the width of the <div> is 50px.

 

<div id="field_multi_plays_chzn" class="chzn-container chzn-container-single" style="width: 50px;"><a href="javascript:void(0)" class="chzn-single" tabindex="-1"><span>Yes</span><abbr class="search-choice-close"></abbr><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 48px; top: 23px;"><div class="chzn-search"><input type="text" autocomplete="off" style="width: 13px;"></div><ul class="chzn-results"><li id="field_multi_plays_chzn_o_1" class="active-result result-selected" style="">Yes</li><li id="field_multi_plays_chzn_o_2" class="active-result" style="">No</li></ul></div></div>

 

Whereas with the flexgrid theme the width of the <div> is 200

 

<div id="field_multi_plays_chzn" class="chzn-container chzn-container-single chzn-container-active" style="width: 200px;"><a href="javascript:void(0)" class="chzn-single" tabindex="-1"><span>Yes</span><abbr class="search-choice-close"></abbr><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 198px; top: 24px;"><div class="chzn-search"><input type="text" autocomplete="off" style="width: 178px;"></div><ul class="chzn-results"><li id="field_multi_plays_chzn_o_1" class="active-result result-selected" style="">Yes</li><li id="field_multi_plays_chzn_o_2" class="active-result" style="">No</li></ul></div></div>

 

My current work around is to use jquery to change the width of the <div id="field_multi_plays_chzn"> element.

 

[James Cornman]

I've updated my libraries/Grocery_CRUD.php file, around line #2387, in function get_enum_input to add style="width: 100px;"

$input = "<select id='field-{$field_info->name}' name='{$field_info->name}' style='width:100px;' class='chosen-select' data-placeholder='".$select_title."'>";

[tav2119]

Hi James,

 

Thanks for the response.  Changing line #2387 of Grocery_CRUD.php does produce a usable display of the select box,

 

I still think there is an issue, perhaps with jquery getting the width of a parent container when the bootstrap theme is used,

 

At the end of the day I decided for the time being just to override Grocery CRUD's default select box with the callback_field method.  Doing this gives me the look I want since I don't want the clear button ('x') the default select box was giving me. However, studing the function in the Grocery_CRUD.php you pointed me to was a major help in understanding how to write my own custom field display override callback. Thanks again.