Sizing textarea width

[ghost]

Is there a way for us to size a specific textarea width in a inline or popover edit mode? Yet allowing the textarea to stretch if needed?

[vitalets]

yes, via css:

.mytextarea {
  width: 200px;
}

and then

editable({
    inputclass: 'mytextarea'
});

[ghost]

How to make textarea 100% of parent ? Settings that you posted wont shrink textarea. So it breaks bootstrap responsive grid, because textarea is fixed with 200px width

[chall8908]

Just use relative sizes.

.mytextarea {
  width: 100%;
}

[ghost]

@chall8908 It doesen't work. Tried it already. X-editable is breaking default bootstrap sizing. Because if you will look in docs there is said:

Individual form controls automatically receive some global styling. All textual , , and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.</p> <p>And here is example: <a href="http://getbootstrap.com/css/#forms">http://getbootstrap.com/css/#forms</a></p> <p>I don't know why inline mode does not show textarea in 100% width. There are various custom css flags, that breaks that 100% funcionality. I will try to rewrite global template and see if it helps...</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ghost"><img src="https://avatars.githubusercontent.com/u/10137?v=4" />ghost</a> commented <strong> 10 years ago</strong> </div> <div class="markdown-body"> <p>So, after research, in inline mode, if i remove class "form-inline" in global template and also override styles</p> <pre><code> .editable-container.editable-inline { display: inline; } .editable-input { display: inline; } .editableform .form-control { width: 100%; }</code></pre> <p>Form expands 100% like it should. </p> <p><img src="https://f.cloud.github.com/assets/5021070/2001932/196fd9c2-85d9-11e3-96d2-685fccacb49b.jpg" alt="scr29 2014-01-25" /></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/chall8908"><img src="https://avatars.githubusercontent.com/u/315948?v=4" />chall8908</a> commented <strong> 10 years ago</strong> </div> <div class="markdown-body"> <p>@ddctd143 I'll have to keep this in mind. I use inline mode pretty exclusively and I imagine I'll run into this at some point.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Relequestual"><img src="https://avatars.githubusercontent.com/u/731158?v=4" />Relequestual</a> commented <strong> 10 years ago</strong> </div> <div class="markdown-body"> <p>If you want to avoid editing the global templates (as I do), you could add a few lines of javascript to remove the form-inline class from the from...</p> <pre><code>$('#task_description').on('shown', function(e, editable) { $('.editable_large').parents('form').removeClass('form-inline'); });</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/nsanden"><img src="https://avatars.githubusercontent.com/u/2072064?v=4" />nsanden</a> commented <strong> 10 years ago</strong> </div> <div class="markdown-body"> <p>using ddctd143's approach did get the textarea to be 100% but it broke the cancel button and when you press blue check button loading graphic would just hang and spin</p> <p>this is what worked for me:</p> <pre><code class="language-css">.editable-buttons { display: block; } .editable-container.editable-inline, .editableform > .control-group, .editable-input, .editableform .form-control { width:100%; }</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ghost"><img src="https://avatars.githubusercontent.com/u/10137?v=4" />ghost</a> commented <strong> 9 years ago</strong> </div> <div class="markdown-body"> <p>UPDATE: changing this in the css did it:</p> <p>.editable-wrap{display:inline-block;white-space:nowrap;margin:0;width:100%;}.editable-wrap .editable-controls,.editable-wrap .editable-error{margin-bottom:0;width:100%;}</p> <p>Hi all,</p> <p>After an embarrassing amount of hours trying to make 100% the width of a textarea, I need your help...</p> <p>I have tried all the options above and none works. My code is the following:</p> <pre><code><div class='container'> <div class="row"> <div class="col-md-8"> <a href="#" editable-textarea="obj.text" e-style="width: 100%">{{ obj.text || "empty" }}</a> </div> </div> </div></code></pre> <p>I use Bootstrap 3.</p> <p>Any hint on how to make this text area to be 100% width with respect the "col-md-8" where it is contained??</p> <p>Thanks a lot!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Toilal"><img src="https://avatars.githubusercontent.com/u/1165758?v=4" />Toilal</a> commented <strong> 9 years ago</strong> </div> <div class="markdown-body"> <p>This works for me</p> <pre><code class="language-css">.editable-wrap { display: block; } .editable-controls input { width: 100%; }</code></pre> <p>This make all xeditable inputs take available width.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/55"><img src="https://avatars.githubusercontent.com/u/7489044?v=4" />55</a> commented <strong> 9 years ago</strong> </div> <div class="markdown-body"> <p>Another solution: </p> <pre><code>.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%!important; } </code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lukaszbanasiak"><img src="https://avatars.githubusercontent.com/u/1453207?v=4" />lukaszbanasiak</a> commented <strong> 9 years ago</strong> </div> <div class="markdown-body"> <p>My solution:</p> <pre><code>.editable-wrap { display: inline-block; white-space: nowrap; margin: 0; width: 100%; // } .editable-wrap .editable-controls, .editable-wrap .editable-error { margin-bottom: 0; width: 100%; } .editable-wrap .editable-controls>select { margin-bottom: 0; } .editable-wrap .editable-controls>input, .editable-wrap .editable-controls>textarea { margin-bottom: 0; width: -moz-calc(100% - 76px); width: -webkit-calc(100% - 76px); width: calc(100% - 76px); }</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/GreenOn"><img src="https://avatars.githubusercontent.com/u/10933712?v=4" />GreenOn</a> commented <strong> 9 years ago</strong> </div> <div class="markdown-body"> <p>@lukaszbanasiak. Thank you for posting your solution. It worked great!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/JustinCheong"><img src="https://avatars.githubusercontent.com/u/12888999?v=4" />JustinCheong</a> commented <strong> 9 years ago</strong> </div> <div class="markdown-body"> <p>how do i make editable-wrap only apply to some input boxes?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/fdobrovolny"><img src="https://avatars.githubusercontent.com/u/1249759?v=4" />fdobrovolny</a> commented <strong> 8 years ago</strong> </div> <div class="markdown-body"> <p>I merged @Relequestual JS with @ddctd143 HTML and added class to put everything inside, thanks to which you can select to what fields will it be applied and also modernise the CSS classes. I also added padding for buttons. </p> <p>My complete solution if somebody would be interested: CSS:</p> <pre><code class="language-css">/* bootstrap-xeditable occupy 100% of space */ .textarea_modal_widget .editable-container.editable-inline { display: block; } .textarea_modal_widget .editable-input { display: inline; } .textarea_modal_widget .editable-buttons { padding-top: 10px; }</code></pre> <p>JS:</p> <pre><code class="language-js">$('#comment').on('shown', function(e, editable) { $('.textarea_modal_widget .input-large').parents('form').removeClass('form-inline'); });</code></pre> <p>HTML: </p> <pre><code class="language-html"><div class="textarea_modal_widget"><a href="#" id="comment" data-type="textarea" data-pk="1" ...> SOMETHING LITTLE LONGER</a></div></code></pre> <p><img src="https://cloud.githubusercontent.com/assets/1249759/18178333/3637408a-707e-11e6-9237-3959e53c785e.png" alt="x-editable" /></p> <p>UPDATE: there are really weird bugs with buttons e.g.:</p> <ul> <li>If you change display to inline the cancel button does not work. </li> <li>If you do the form-controll class the buttons does not work on mobile at all. But now it <strong>seems</strong> working.</li> <li>@JustinCheong - This is also solution for your problem.</li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/dpndra"><img src="https://avatars.githubusercontent.com/u/8010688?v=4" />dpndra</a> commented <strong> 8 years ago</strong> </div> <div class="markdown-body"> <p>Add these css: <code>.editable-container div,.editable-container form{min-width:100%!important;display:block!important;} .editable-container.editable-inline{display:block;}</code></p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>