Sami Greenbury
Technology, Teaching & Travel

Full Width Inline x-editable Elements

I’ve been using x-editable inline components for a project and wanted them rather than being the default tiny width they normally are, to take the full wonderful responsive width of their Bootstrap parents.

The CSS

/* Make inline editables take the full width of their parents */
.editable-container.editable-inline,
.editable-container.editable-inline .control-group.form-group,
.editable-container.editable-inline .control-group.form-group .editable-input,
.editable-container.editable-inline .control-group.form-group .editable-input textarea,
.editable-container.editable-inline .control-group.form-group .editable-input select,
.editable-container.editable-inline .control-group.form-group .editable-input input:not([type=radio]):not([type=checkbox]):not([type=submit])
{
    width: 100%;
}

This just gives 100% width to most of the containers between the editable-container and the element itself, it also excludes radio and checkbox inputs since they don’t usually want their widths playing with.

Don’t forget to include this after your xeditable CSS files.

Before x-editable full-width inline CSS

Before applying the full-width CSS

After x-editable full-width inline CSS

After applying the full-width CSS

After applying the full-width CSS

Nice and tidy, eh?

If I’ve missed anything, or you find something that this breaks – let me know in the comments!

Tags:
Categories:

5 thoughts on “Full Width Inline x-editable Elements”

  1. It hides the tick and cross (save and cancel) buttons for inline editors which don’t have much space after 100% of the text area

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.