{"type":"rich","version":"1.0","provider_name":"phorkie","provider_url":"https:\/\/p.cweiske.de\/","title":"Drupal backend: Show form fields side by side","author_name":"Christian Weiske","cache_age":86400,"width":900,"height":900,"html":"<!-- embedding all files of https:\/\/p.cweiske.de\/797 -->\n<link rel=\"stylesheet\" href=\"https:\/\/p.cweiske.de\/css\/embed.css\"\/>\n<div class=\"phork\" id=\"797\">\n    <div class=\"phork-file\">\n <div class=\"phork-content\">\n  \n<div class=\"document\">\n\n\n<p>Displaying two form fields side by side in the drupal backend.<\/p>\n<p>Works for paragraphs, too.<\/p>\n<p>Form display configuration:<\/p>\n<pre class=\"literal-block\">\nField group: HTML element (Element: div, Extra CSS classes: form-fields-oneline)\n+ Field 1\n+ Field 2\n<\/pre>\n<p>Keywords: inline<\/p>\n<div class=\"section\" id=\"see-also\">\n<h1>See also<\/h1>\n<ul class=\"simple\">\n<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>\n<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>\n<\/ul>\n<\/div>\n<\/div>\n\n <\/div>\n <div class=\"phork-meta\">\n  <a href=\"https:\/\/p.cweiske.de\/797\/rev-raw\/710ca008454c44636371b3c229a59a9e367c3a97\/README.rst\" style=\"float: right\">view raw source<\/a>\n  <a href=\"https:\/\/p.cweiske.de\/797#README.rst\">README.rst<\/a>\n <\/div>\n<\/div>\n    <div class=\"phork-file\">\n <div class=\"phork-content\">\n  <style type=\"text\/css\">\/**\n * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2014 Benny Baumann\n * (http:\/\/qbnz.com\/highlighter\/ and http:\/\/geshi.org\/)\n *\/\n.css .de1, .css .de2 {font: normal normal 1em\/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;}\n.css  {font-family:monospace;}\n.css .imp {font-weight: bold; color: red;}\n.css li, .css .li1 {color: #DDD;}\n.css .ln {width:1px;text-align:right;margin:0;padding:0 2px;vertical-align:top;}\n.css .kw1 {color: #000000; font-weight: bold;}\n.css .kw2 {color: #993333;}\n.css .kw3 {color: #9932cc;}\n.css .kw4 {color: #dc143c;}\n.css .kw5 {color: #F5758F;}\n.css .co2 {color: #ff0000; font-style: italic;}\n.css .coMULTI {color: #808080; font-style: italic;}\n.css .es0 {color: #000099; font-weight: bold;}\n.css .es2 {color: #000099; font-weight: bold;}\n.css .br0 {color: #00AA00;}\n.css .sy0 {color: #00AA00;}\n.css .st0 {color: #ff0000;}\n.css .nu0 {color: #cc66cc;}\n.css .re0 {color: #cc00cc;}\n.css .re1 {color: #6666ff;}\n.css .re2 {color: #3F84D9; font-weight: bold;}\n.css .re3 {color: #933;}\n.css .re4 {color: #444;}\n.css span.xtra { display:block; }\n<\/style><div class=\"code\"><table class=\"css\"><tbody><tr class=\"li1\"><td class=\"ln\"><pre class=\"de1\">1\n2\n3\n4\n5\n6\n7\n8\n9\n<\/pre><\/td><td class=\"de1\"><pre class=\"de1\"><span class=\"re1\">.form-fields-oneline<\/span> <span class=\"br0\">&#123;<\/span>\n&#160; <span class=\"kw1\">display<\/span><span class=\"sy0\">:<\/span> flex<span class=\"sy0\">;<\/span>\n&#160; <span class=\"kw1\">flex-wrap<\/span><span class=\"sy0\">:<\/span> wrap<span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span>\n&#160;\n<span class=\"re1\">.form-fields-oneline<\/span> <span class=\"re1\">.form-item<\/span> <span class=\"br0\">&#123;<\/span>\n&#160; <span class=\"kw1\">margin-right<\/span><span class=\"sy0\">:<\/span> <span class=\"re3\">15px<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span>\n&#160;<\/pre><\/td><\/tr><\/tbody><\/table><\/div>\n <\/div>\n <div class=\"phork-meta\">\n  <a href=\"https:\/\/p.cweiske.de\/797\/rev-raw\/710ca008454c44636371b3c229a59a9e367c3a97\/admin-tweaks.css\" style=\"float: right\">view raw source<\/a>\n  <a href=\"https:\/\/p.cweiske.de\/797#admin-tweaks.css\">admin-tweaks.css<\/a>\n <\/div>\n<\/div>\n    <div class=\"phork-file\">\n <div class=\"phork-content\">\n  <div class=\"image\"><img src=\"797\/rev-raw\/710ca008454c44636371b3c229a59a9e367c3a97\/screenshot-config.png\" alt=\"screenshot-config.png\"\/><\/div>\n <\/div>\n <div class=\"phork-meta\">\n  <a href=\"https:\/\/p.cweiske.de\/797\/rev-raw\/710ca008454c44636371b3c229a59a9e367c3a97\/screenshot-config.png\" style=\"float: right\">view raw source<\/a>\n  <a href=\"https:\/\/p.cweiske.de\/797#screenshot-config.png\">screenshot-config.png<\/a>\n <\/div>\n<\/div>\n    <div class=\"phork-file\">\n <div class=\"phork-content\">\n  <div class=\"image\"><img src=\"797\/rev-raw\/710ca008454c44636371b3c229a59a9e367c3a97\/screenshot-result.png\" alt=\"screenshot-result.png\"\/><\/div>\n <\/div>\n <div class=\"phork-meta\">\n  <a href=\"https:\/\/p.cweiske.de\/797\/rev-raw\/710ca008454c44636371b3c229a59a9e367c3a97\/screenshot-result.png\" style=\"float: right\">view raw source<\/a>\n  <a href=\"https:\/\/p.cweiske.de\/797#screenshot-result.png\">screenshot-result.png<\/a>\n <\/div>\n<\/div>\n<\/div>\n"}