diff --git a/src/client/components/ParticipantListPage/containers/GenericPropertyFilterContainer.jsx b/src/client/components/ParticipantListPage/containers/GenericPropertyFilterContainer.jsx
index 32c20995..c1fa6f5a 100644
--- a/src/client/components/ParticipantListPage/containers/GenericPropertyFilterContainer.jsx
+++ b/src/client/components/ParticipantListPage/containers/GenericPropertyFilterContainer.jsx
@@ -37,7 +37,7 @@ export function getGenericPropertyFilterContainer(searchFilterStore, searchFilte
render() {
return (
-
+
{ properties.map((property, index) =>
) }
diff --git a/src/client/components/ParticipantListPage/containers/PropertyFilterContainer.jsx b/src/client/components/ParticipantListPage/containers/PropertyFilterContainer.jsx
index 3b090c54..e83776fe 100644
--- a/src/client/components/ParticipantListPage/containers/PropertyFilterContainer.jsx
+++ b/src/client/components/ParticipantListPage/containers/PropertyFilterContainer.jsx
@@ -37,6 +37,7 @@ export function getPropertyFilterContainer(searchFilterStore, searchFilterAction
value={ this.props.currentSelection[this.props.property] }
onChange={ this.props.onChange }
options={ this.state.options }
+ className={ this.props.className }
/>
);
}
@@ -47,6 +48,7 @@ export function getPropertyFilterContainer(searchFilterStore, searchFilterAction
label: React.PropTypes.string,
currentSelection: React.PropTypes.object.isRequired,
onChange: React.PropTypes.func.isRequired,
+ className: React.PropTypes.string,
};
return PropertyFilterContainer;
diff --git a/src/client/components/ParticipantListPage/containers/QuickFilterContainer.jsx b/src/client/components/ParticipantListPage/containers/QuickFilterContainer.jsx
index f6479d4b..9b4565e4 100644
--- a/src/client/components/ParticipantListPage/containers/QuickFilterContainer.jsx
+++ b/src/client/components/ParticipantListPage/containers/QuickFilterContainer.jsx
@@ -65,30 +65,35 @@ export function getQuickFilterContainer(participantStore, participantActions, se
currentSelection={ currentSelection }
label="Ikäkausi"
property="ageGroup"
+ className="agegroup-filter"
/>
+
{ options.map(option => ) }
);
}
PropertySelect.propTypes = {
+ className: React.PropTypes.string,
value: React.PropTypes.any,
label: React.PropTypes.string.isRequired,
property: React.PropTypes.string.isRequired,
diff --git a/src/client/styles.scss b/src/client/styles.scss
index 0340d2ab..01f6bc33 100644
--- a/src/client/styles.scss
+++ b/src/client/styles.scss
@@ -275,6 +275,25 @@ table {
@media screen and (min-width: $screen-sm-min) {
.form-inline .form-group {
margin-right: 1em;
+
+ .agegroup-filter {
+ width: 200px;
+ }
+ .subcamp-filter {
+ width: 100px;
+ }
+ .village-filter {
+ width: 300px;
+ }
+ .local-group-filter {
+ width: 300px;
+ }
+ .camp-group-filter {
+ width: 300px;
+ }
+ .property-selector {
+ width: 200px;
+ }
}
}