How to add a custom composite trait inline?

[harsh201]

Hi,

We have a use case where we want to create a new trait which is composed of an input field and a select dropdown. We want this to be inline similar to what we have in StyleManager.

But whatever combinations of span/div I try, its always showing up in separate lines.

<div>
  <span>
    <input type="text"/>
  </span>
  <span>
    <select name="${traitName}">
      ${options.map((opt) => `<option value="${opt.value}">${opt.name}</option>`).join('')}
    </select>
  </span>
<div>

Am I missing something here?

[artf]

When you're defining a new custom trait, the UI is up to you. The best you could do is to reuse some CSS class as we don't have yet a reusable UI library.
Try to check also if the built-in number trait type might be useful in your case

[harsh201]

Thanks @artf. We decided to go with display:flex; and that did workout. Number trait type is exactly what we need but we needed units on that too.

Also, we are going with this approach of defining our own trait to store dimensions because we wanted the use @page rule and define style within it. But we noticed this weird behavior where all the CSS Rules were getting converted to @media .

Following is the sample:

const cssComposer = editor.CssComposer;
const rule = cssComposer.setRule(
  '.grapesjs-page',
  { size: 'Letter Landscape', margin: '1.6in 1in 1in 1in' },
  { atRuleType: 'page' }
);

Am I missing something here?