CODEWITHSUNDEEP
cssreactjs
Ridhwaan Shakeel
Ridhwaan Shakeel

Reputation: 1043

Horizontal align two react elements

import React from 'react'
import ReactDOM from 'react-dom'
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';

class ResultsBar extends React.Component {
...
render() {
    return (
    <div>
    <h3>
        99 results
    </h3>
    <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
    <DropdownToggle caret>
      Dropdown
    </DropdownToggle>
    <DropdownMenu>
      {dropdown}
    </DropdownMenu>
    </Dropdown>
    <hr/>
    </div>
    );
    }
}

enter image description here

From the picture above, the component is not horizontally aligned

I want the react-strap dropdown element to float right of the heading on the same line.

EDIT 1: Using flex <div className={style.resultsBarDiv}> 

.results-bar-div {
  display: flex;
  justify-content: space-between;
}

I'm trying to position h3 and dropdown at opposite ends of the window, justify-content isnt working

Upvotes: 4

Views: 22512

Answers (2)

Paul McLoughlin
Paul McLoughlin

Reputation: 2289

Just use flexbox, set the container CSS to have display: flex this will put everything on the same line.

Look into using styled components when it comes to applying css to components in ReactJs in general.

import React from "react";
import ReactDOM from "react-dom";
import { render } from "react-dom";


import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";


const divStyle = {
  display: 'flex',
  alignItems: 'center'
};

class App extends React.Component {
  state = {
    dropdownOpen: true
  }
  render() {
    return (
      <div style={divStyle}>
        <h3>99 results</h3>
        <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
          <DropdownToggle caret>
            Dropdown
    </DropdownToggle>
          <DropdownMenu>
          </DropdownMenu>
        </Dropdown>
      </div>
    );
  }
}

Upvotes: 6

Lukas Brodbeck
Lukas Brodbeck

Reputation: 11

I'd apply styling with css. You either directly style the dropdown, or give it a class via the className attribute. Stlye it either with float, or display flex

Upvotes: 1

Related Questions