rich1.0phorkiehttps://p.cweiske.de/Drupal backend: Show form fields side by sideChristian Weiske86400900900<!-- embedding all files of https://p.cweiske.de/797 -->
<link rel="stylesheet" href="https://p.cweiske.de/css/embed.css"/>
<div class="phork" id="797">
<div class="phork-file">
<div class="phork-content">
<div class="document">
<p>Displaying two form fields side by side in the drupal backend.</p>
<p>Works for paragraphs, too.</p>
<p>Form display configuration:</p>
<pre class="literal-block">
Field group: HTML element (Element: div, Extra CSS classes: form-fields-oneline)
+ Field 1
+ Field 2
</pre>
<p>Keywords: inline</p>
<div class="section" id="see-also">
<h1>See also</h1>
<ul class="simple">
<li><a class="reference external" href="https://drupal.stackexchange.com/questions/137281/display-field-inputs-side-by-side-in-node-edit-form">https://drupal.stackexchange.com/questions/137281/display-field-inputs-side-by-side-in-node-edit-form</a></li>
<li><a class="reference external" href="https://www.reddit.com/r/drupal/comments/iw4yll/display_paragraph_fields_inline_on_form_display/">https://www.reddit.com/r/drupal/comments/iw4yll/display_paragraph_fields_inline_on_form_display/</a></li>
</ul>
</div>
</div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/797/rev-raw/710ca008454c44636371b3c229a59a9e367c3a97/README.rst" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/797#README.rst">README.rst</a>
</div>
</div>
<div class="phork-file">
<div class="phork-content">
<style type="text/css">/**
* GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2014 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.css .de1, .css .de2 {font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;}
.css {font-family:monospace;}
.css .imp {font-weight: bold; color: red;}
.css li, .css .li1 {color: #DDD;}
.css .ln {width:1px;text-align:right;margin:0;padding:0 2px;vertical-align:top;}
.css .kw1 {color: #000000; font-weight: bold;}
.css .kw2 {color: #993333;}
.css .kw3 {color: #9932cc;}
.css .kw4 {color: #dc143c;}
.css .kw5 {color: #F5758F;}
.css .co2 {color: #ff0000; font-style: italic;}
.css .coMULTI {color: #808080; font-style: italic;}
.css .es0 {color: #000099; font-weight: bold;}
.css .es2 {color: #000099; font-weight: bold;}
.css .br0 {color: #00AA00;}
.css .sy0 {color: #00AA00;}
.css .st0 {color: #ff0000;}
.css .nu0 {color: #cc66cc;}
.css .re0 {color: #cc00cc;}
.css .re1 {color: #6666ff;}
.css .re2 {color: #3F84D9; font-weight: bold;}
.css .re3 {color: #933;}
.css .re4 {color: #444;}
.css span.xtra { display:block; }
</style><div class="code"><table class="css"><tbody><tr class="li1"><td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
</pre></td><td class="de1"><pre class="de1"><span class="re1">.form-fields-oneline</span> <span class="br0">{</span>
  <span class="kw1">display</span><span class="sy0">:</span> flex<span class="sy0">;</span>
  <span class="kw1">flex-wrap</span><span class="sy0">:</span> wrap<span class="sy0">;</span>
<span class="br0">}</span>
 
<span class="re1">.form-fields-oneline</span> <span class="re1">.form-item</span> <span class="br0">{</span>
  <span class="kw1">margin-right</span><span class="sy0">:</span> <span class="re3">15px</span><span class="sy0">;</span>
<span class="br0">}</span>
 </pre></td></tr></tbody></table></div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/797/rev-raw/710ca008454c44636371b3c229a59a9e367c3a97/admin-tweaks.css" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/797#admin-tweaks.css">admin-tweaks.css</a>
</div>
</div>
<div class="phork-file">
<div class="phork-content">
<div class="image"><img src="797/rev-raw/710ca008454c44636371b3c229a59a9e367c3a97/screenshot-config.png" alt="screenshot-config.png"/></div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/797/rev-raw/710ca008454c44636371b3c229a59a9e367c3a97/screenshot-config.png" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/797#screenshot-config.png">screenshot-config.png</a>
</div>
</div>
<div class="phork-file">
<div class="phork-content">
<div class="image"><img src="797/rev-raw/710ca008454c44636371b3c229a59a9e367c3a97/screenshot-result.png" alt="screenshot-result.png"/></div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/797/rev-raw/710ca008454c44636371b3c229a59a9e367c3a97/screenshot-result.png" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/797#screenshot-result.png">screenshot-result.png</a>
</div>
</div>
</div>