field-sizing

Clase	Propiedades CSS
field-sizing-fixed	field-sizing: fixed;
field-sizing-content	field-sizing: content;

Examples#

Sizing based on content#

Use the field-sizing-content utility to allow a form control to adjust its size based on the content:

{ }</p> <div class="codehilite"><pre><span></span><code><span class="cm"><!-- [!code classes:field-sizing-content] --></span> <span class="p"><</span><span class="nt">textarea</span> <span class="na">class</span><span class="o">=</span><span class="s">"field-sizing-content ..."</span> <span class="na">rows</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span> Latex Salesman, Vanderlay Industries <span class="p"></</span><span class="nt">textarea</span><span class="p">></span> </code></pre></div> <h3 id="using-a-fixed-size">Using a fixed size<a class="headerlink" href="#using-a-fixed-size" title="Permanent link">#</a></h3> <p>Use the <code>field-sizing-fixed</code> utility to make a form control use a fixed size:</p> <p>{ <textarea rows="2" defaultValue="Latex Salesman, Vanderlay Industries" className="mx-auto block field-sizing-fixed w-80 rounded-md p-2 text-sm text-gray-950 outline-1 outline-gray-900/10 focus:outline-2 focus:outline-gray-900 dark:bg-gray-950/25 dark:text-white dark:outline-1 dark:outline-white/5 dark:focus:outline-white/20" /> }</p> <div class="codehilite"><pre><span></span><code><span class="cm"><!-- [!code classes:field-sizing-fixed] --></span> <span class="p"><</span><span class="nt">textarea</span> <span class="na">class</span><span class="o">=</span><span class="s">"field-sizing-fixed w-80 ..."</span> <span class="na">rows</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span> Latex Salesman, Vanderlay Industries <span class="p"></</span><span class="nt">textarea</span><span class="p">></span> </code></pre></div> <h3 id="responsive-design">Responsive design<a class="headerlink" href="#responsive-design" title="Permanent link">#</a></h3> </div> </article> <nav class="pager" aria-label="Navegación entre documentos"> <a class="pager-prev" href="./editor-setup.html"> <span class="muted">Anterior</span>Editor setup </a> <a class="pager-next" href="./fill.html"> <span class="muted">Siguiente</span>fill </a> </nav> </main> </div> <footer class="site-footer"> <p> Espejo <strong>no oficial</strong> e independiente de documentación técnica. La referencia canónica siempre es el sitio oficial de cada tecnología. </p> <p class="muted"> Desarrollado y gestionado por <a href="https://raupulus.dev" target="_blank" rel="noopener">Raúl Caro Pastorino</a> · Cada tecnología conserva el copyright y la licencia de su autor original </p> <p class="muted"> <a href="../licenses.html">Licencias y Atribución</a> · <a href="../legal.html">Aviso Legal y Privacidad</a> · <a href="https://gitlab.com/raupulus/offline-docs-backend-developer" target="_blank" rel="noopener">GitLab</a> · <a href="https://github.com/raupulus/offline-docs-backend-developer" target="_blank" rel="noopener">GitHub</a> · Descargar ZIP: <a href="https://gitlab.com/raupulus/offline-docs-backend-developer/-/archive/main/offline-docs-backend-developer-main.zip" target="_blank" rel="noopener">GitLab</a> · <a href="https://github.com/raupulus/offline-docs-backend-developer/archive/refs/heads/main.zip" target="_blank" rel="noopener">GitHub</a> · <a href="../feed.xml">RSS</a> </p> </footer> <script src="../_assets/app.js?v=2"></script> </body> </html>