Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

styling select dropdown

Browse Source
This commit is contained in:
Alex Windett 2017-01-31 14:15:59 +00:00
parent cb410b58f7
commit 1503459695
1 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/components/people-list/invite.js
View File

@ -1,13 +1,30 @@
const React = require('react'); const React = require('react');
const styled = require('styled-components');
const Row = require('@ui/components/row'); const Row = require('@ui/components/row');
const Column = require('@ui/components/column'); const Column = require('@ui/components/column');
const Button = require('@ui/components/button'); const Button = require('@ui/components/button');
const {
default: Styled
} = styled;
// TOOD: Require from UI Components - causes issue ATM. // TOOD: Require from UI Components - causes issue ATM.
const Select = require('react-select'); const Select = require('react-select');
require('react-select/dist/react-select.css'); require('react-select/dist/react-select.css');
const SelectWrapper = Styled.div`
.Select-menu-outer {
margin-top: 48px;
}
.Select-arrow {
position: relative;
top: -4px;
}
`;
const Invite = React.createClass({ const Invite = React.createClass({
propTypes: { propTypes: {
@ -66,6 +83,7 @@ const Invite = React.createClass({
width: '75%', width: '75%',
minHeight: '50px', minHeight: '50px',
marginBottom: '20px', marginBottom: '20px',
paddingTop: '10px'
}; };
const AddButtonStyle = { const AddButtonStyle = {
@ -94,15 +112,17 @@ const Invite = React.createClass({
<Row> <Row>
<Column xs={12}> <Column xs={12}>
<form onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit}>
<Select.Creatable <SelectWrapper>
aria-label="member select" <Select.Creatable
onChange={handleSelectChange} aria-label="member select"
onNewOptionClick={handleSelectChange} onChange={handleSelectChange}
options={selectData} onNewOptionClick={handleSelectChange}
placeholder="Enter an email address or password" options={selectData}
style={InputStyle} placeholder="Enter an email address or password"
value={this.state.selectValue} style={InputStyle}
/> value={this.state.selectValue}
/>
</SelectWrapper>
<Button <Button
secondary secondary
style={AddButtonStyle} style={AddButtonStyle}