Side by side controls in React DOM using api

Question

I'm fighting with this, wanted to show a row of controls above grid.

        const lblPG = React.createElement('h3', {}, 'Product Group');
        const cboPG = React.createElement(ComboBox, props);
        const elementPG = React.createElement(React.Fragment, null, lblPG, cboPG);

        const lblTT = React.createElement('h3', {}, 'Task Type');
        const cboTT = React.createElement(ComboBox, props);
        const elementTT = React.createElement(React.Fragment, null, lblTT, cboTT);

        const toprow = React.createElement('span', {},
            elementPG, elementTT);

        const list =
            React.createElement('div', {},
                toprow,
                React.createElement(DetailsListGrid, appProps)
            );

        ReactDOM.render(
            list,
            this._container
        );

The above code is resulting this in PCF harness:

I would like to have like this:

score 1 · Answer 1 · answered Nov 21 '20 at 21:24

1

Please use JSX instead of creating the elements above way. Also, use CSS block/inline property for adjusting elements as shown here: https://www.w3schools.com/Css/css_inline-block.asp

answered Nov 21 '20 at 21:24

bhavik4748

51
3

score 0 · Accepted Answer · answered Nov 23 '20 at 15:13

Ok, this is how I solved it using some CSS tricks.

Added some CSS class:

.flexdiv{
    display:inline-flex;
    text-align:left;
    margin-left: 5 px;
    clear:both;
}

.cleardiv{
    text-align:left;
    clear:both;
}

and manipulated the DOM like this:

        const toprow = React.createElement('div', { className: "flexdiv" },
            elementPG, spacer, elementTT);

        const list =
            React.createElement('div', { className: "cleardiv" },
                toprow,
                React.createElement(DetailsListGrid, appProps)
            );

Side by side controls in React DOM using api

2 Answers2