Adding text input to cell header


I have an issue with adding a text input to a cell header. Initially the cell header text is set using the cells().setText function method as shown below

editModuleURL='<span id="editModuleIcon" style="cursor:pointer" title="Edit Module" onclick="openModuleSettings('+ mID +','+ cellID +')"><i class="fas fa-cog"></i></span>&nbsp;';

fullScreenURL='&nbsp;&nbsp;&nbsp;&nbsp;<span id="IconFullScreen" style="cursor:pointer" title="Toggle Full Screen" onclick="fullScreen(\'' + mMode + '\',\'' + dCellID + '\')"><i class="fas fa-expand-wide"></i></span>';

dLayout.cells(dCellID).setText(editModuleURL + mName + fullScreenURL);

That works fine but then sometimes I want to add a text input to the header text. Below is the text input format

filterHTML ='<input type="text" id="aFilter" placeholder="Type to filter by name" size="50" style="width:100px;height:30px">';

That works fine if I add it by itself as in dLayout.cells(dCellID).setText(filterHTML);

I can see the text input element in the header. But when I try to append it as shown below it will not show the text input element at all. It only shows the other elements.

dLayout.cells(dCellID).setText(editModuleURL + mName + fullScreenURL + filterHTML);

Am I missing something?


I found the solution. The input element automatically creates a new line after the element which was not visible in the cell header. You use the style display:flex to force everything on one line.


Great, you’re doing great