Grid styling in application

[rasoulabbasi20n]

How can I align two or more components in one line? is there any settings for the grid configuration in the applications?

[andersevenrud]

Can you share your code ? I need to see the layout to give an answer on this.

[rasoulabbasi20n]

return (

<div>
  <div className="row">

    <BoxContainer className="col-md-6 col-sm-6 col-xs-6" orientation="horizontal">
      <span>select metric:</span>
      <SelectField className="" width="30%" choices={metircList} onChange={selectMetric}>
      </SelectField>
      <span>select chart:</span>
      <SelectField className="" choices={chartList} onChange={selectChart}>
      </SelectField>
    </BoxContainer>

    <BoxContainer className="col-md-6" orientation="horizontal">
      <Button onClick={renderChart}>
        render
    </Button>
    </BoxContainer >
  </div>
  <div id="chart_div" className="chart-container" style={{ display: 'none' }}></div>
  <div id="icicle-container" className="chart-container" style={{ display: 'none' }}>
    <section>
      <label>
        Limit number of elements
      <RangeField id="limit_icicle_elements" min='1' max='400' value='400' />
      </label>
      <label>
        Limit min percentage
      <RangeField id="limit_icicle_min_percent" min="0.001" max="0.1" value="0.001" step="0.001" />
      </label>
      <br></br>
      <div id="icicle_example" style={{ width: '90%', marginLeft: '5%' }}></div>
    </section>
  </div>
  <div id="sunburst-container" className="chart-container" style={{ display: 'none' }}>
    <section>
      <form>
        <label>
          Limit number of elements
              <input id="limit_sunburst_elements" type="range" min="1" max="350" value="350" />
        </label><br /><br />
        <label>
          Limit angular percentage
              <input id="limit_sunburst_min_percent" type="range" min="0.001" max="0.1" value="0.001" step="0.001" />
        </label><br /><br />
      </form>
      <br /><br /><br />
      <div id="sunburst_example"></div>
    </section>
  </div>
</div>

);

[andersevenrud]

Out of curiosity, why are you using bootstrap styles here ? The "Box"es are flexboxes, so you can define your own columns for those.

Anyways, you can use this box system to create a two + one coloumn setup: https://codepen.io/andersevenrud/pen/dypJWqL (NB: Not using JSX here)

[rasoulabbasi20n]

Because it didn't work in normal way :D I removed bootstrap styles and used below code but I got this as a result: Note: I am using "osjs-gui-react" return (

  <Box grow="1" shrink="1">

    <BoxContainer  orientation="horizontal">
      <Box grow="1" shrink="1">
        {/* <span>select metric:</span> */}
        <SelectField className="" width="30%" choices={metircList} onChange={selectMetric}>
        </SelectField>
      </Box>
      <Box grow="1" shrink="1">

        {/* <span>select chart:</span> */}
        <SelectField className="" choices={chartList} onChange={selectChart}>
        </SelectField>
      </Box>
    </BoxContainer>

    <BoxContainer  orientation="horizontal">
      <Button onClick={renderChart}>
        render
    </Button>
    </BoxContainer >
  </Box>

);

[andersevenrud]

    <BoxContainer  orientation="horizontal">

remove orientation

[andersevenrud]

FYI: You don't need a Box inside your BoxContainer if you only have one child element.

All GUI elements are box based, so they should scale approproately.

[rasoulabbasi20n]

Im not familiar with hyper app. thanks a lot man ,problem fixed

[andersevenrud]

Glad to hear it worked! I suppose I can close this then since you didn't ? :)

Im not familiar with hyper app

If you remove the JSX syntax from React, it's pretty much the same thing in terms of writing the UIs :)

https://reactjs.org/docs/react-without-jsx.html

You can even use JSX syntax with hyperapp :D

https://manual.os-js.org/tutorial/gui/#jsx

[rasoulabbasi20n]

Yeah I forgot :D