diff --git a/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.html b/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.html
index 9d4aae8abe22edc5eb2e13e9ee0246d7d060f023..8854c1da72b13adaddde0a2d6c6bcc5e47886938 100644
--- a/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.html
+++ b/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.html
@@ -5,57 +5,78 @@
</div>
​
<form class="sb-form my-16">
- <div class="sb-field">
- <label class="font-weight-normal">Name<span>*</span></label>
- <input class="sb-form-control" type="text" placeholder="Enter user name">
+ <div class="ui stackable grid m-0">
+
+ <div class="twelve wide column p-0">
+ <div class="fields-selection p-0">
+ <div class="sb-field field-focus mb-8">
+ <input class="sb-form-control selection fields-dropdown ui dropdown" type="text" placeholder="Enter user name">
+ <label class="font-weight-normal">Name<span>*</span></label>
+ </div>
+ </div>
</div>
- <div class="d-flex flex-jc-space-between">
- <div class="sb-field my-8 w-50">
- <label class="font-weight-normal">Board:</label>
-<!-- <sui-select class="selection" name="state" labelField="name" placeholder="Select State">
- <sui-select-option *ngFor="let state of states" [value]="state"></sui-select-option>
- </sui-select>-->
+
+ <div class="six wide column p-0">
+ <div class="fields-selection p-0">
+ <div class="sb-field field-focus my-8">
+ <!-- <sui-select class="selection fields-dropdown" name="state" labelField="name" placeholder="Select State">
+ <sui-select-option *ngFor="let state of states" [value]="state"></sui-select-option>
+ </sui-select> -->
+ <label class="font-weight-normal">Board</label>
+ </div>
+ </div>
</div>
- <div class="sb-field my-8 ml-16 w-50">
- <label class="font-weight-normal">Medium:</label>
- <div class="sb-field">
-<!-- <sui-multi-select class="selection" name="district" labelField="name" placeholder="Select district">
- <sui-select-option *ngFor="let district of districts" [value]="district"></sui-select-option>
- </sui-multi-select>-->
+ <div class="six wide column p-0">
+ <div class="fields-selection p-0">
+ <div class="sb-field field-focus my-8 onboard-content">
+ <!-- <sui-multi-select class="selection fields-dropdown" name="district" labelField="name"
+ placeholder="Select district">
+ <sui-select-option *ngFor="let district of districts" [value]="district"></sui-select-option>
+ </sui-multi-select> -->
+ <label class="font-weight-normal">Medium</label>
+ </div>
</div>
</div>
- </div>
- <div class="sb-field mb-16">
- <label class="font-weight-normal">Class:</label>
- <div class="sb-field">
-<!-- <sui-multi-select class="selection" name="district" labelField="name" placeholder="Select district">
- <sui-select-option *ngFor="let district of districts" [value]="district"></sui-select-option>
- </sui-multi-select>-->
+
+ <div class="twelve wide column p-0">
+ <div class="fields-selection p-0">
+ <div class="sb-field field-focus mt-8 mb-16">
+ <!-- <sui-multi-select class="selection fields-dropdown" name="district" labelField="name"
+ placeholder="Select district">
+ <sui-select-option *ngFor="let district of districts" [value]="district"></sui-select-option>
+ </sui-multi-select> -->
+ <label class="font-weight-normal">Class</label>
+ </div>
+ </div>
</div>
- </div>
- <div class="fields-selection d-flex flex-jc-space-between w-100">
- <div class="sb-field field-focus w-50">
-<!-- <select class="ui dropdown selection fields-dropdown" [(ngModel)]="selectState">
- <option [ngValue]="option" *ngFor="let option of selectStateOption" [value]="option">{{option?.name}}
- </option>
- </select>-->
- <label class="d-flex font-weight-normal">State</label>
+ <div class="six wide column p-0">
+ <div class="fields-selection p-0">
+ <div class="sb-field field-focus">
+ <!-- <select class="ui dropdown selection fields-dropdown" [(ngModel)]="selectState">
+ <option [ngValue]="option" *ngFor="let option of selectStateOption" [value]="option">{{option?.name}}
+ </option>
+ </select> -->
+ <label class="d-flex font-weight-normal">State</label>
+ </div>
+ </div>
</div>
- <div class="sb-field field-focus onboard-content w-50 ml-16">
-<!-- <select class="ui dropdown selection fields-dropdown" name="district" labelField="name"
- placeholder="Select district">
- <option [ngValue]="district" *ngFor="let district of districts" [value]="district">{{district?.name}}
- </option>
- </select>-->
- <label class="d-flex font-weight-normal">District</label>
+ <div class="six wide column p-0">
+ <div class="fields-selection p-0">
+ <div class="sb-field field-focus onboard-content">
+ <!-- <select class="ui dropdown selection fields-dropdown" name="district" labelField="name"
+ placeholder="Select district">
+ <option [ngValue]="district" *ngFor="let district of districts" [value]="district">{{district?.name}}
+ </option>
+ </select> -->
+ <label class="d-flex font-weight-normal">District</label>
+ </div>
+ </div>
</div>
</div>
-
</form>
- ​
<div class="required sb-checkbox sb-checkbox-primary sb-field">
<input type="checkbox" role="checkbox" name="checkbox">
<label class="fsmall mx-8 font-weight-normal">I understand and accept the
diff --git a/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.scss b/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.scss
index 6bcf14d1d5b4016d366cc95b31dc8749490ffd5c..b18eb0a9729886ba831eb443f112942971f40908 100644
--- a/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.scss
+++ b/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.scss
@@ -27,11 +27,6 @@
:host {
.fields-selection {
display: flex;
- flex-direction: column;
-
- @include respond-above(sm) {
- flex-direction: row;
- }
.sb-field .ui.selection.active.dropdown {
border-color: #96c8da;
@@ -45,23 +40,13 @@
margin-bottom: calculateRem(16px) 0px;
width: 100%;
+ @include respond-below(sm) {}
+
label {
font-size: 14px;
}
}
- .onboard-content {
- @include respond-above(sm) {
- margin-left: 2rem;
- html[dir="rtl"] & {
- margin-right: 2rem;
- }
- }
- }
-
- .textColorChange {
- color: #0076FE;
- }
}
}
@@ -71,26 +56,6 @@
align-items: flex-start;
}
-.ui.selection.dropdown.fields-dropdown {
- height: 2rem !important;
-
- &:focus {
- border: calculateRem(1px) solid #0076FE;
- color: #0076FE !important;
- }
-}
-
-.ui.selection.dropdown.fields-dropdown:focus ~ label {
- border: 0px;
- color: #0076FE;
- font-weight: normal;
-}
-
-.ui.selection.dropdown.fields-dropdown option {
- background: var(--white);
- color: var(--black);
-}
-
.sb-profile-btn {
border-radius: 40px;
}
diff --git a/src/app/client/src/assets/styles/components/_select.scss b/src/app/client/src/assets/styles/components/_select.scss
index 613e03373d7cec8ef3f6e12b14c3b05fd2b9c7af..a4a2e22f5485275bdf01086d023cfdb192e00837 100644
--- a/src/app/client/src/assets/styles/components/_select.scss
+++ b/src/app/client/src/assets/styles/components/_select.scss
@@ -96,3 +96,35 @@
float:right;
}
}
+
+ .sb-form{
+ .ui.selection.dropdown.fields-dropdown {
+ min-height: 2rem !important;
+ &:focus{
+ border: calculateRem(1px) solid #0076FE;
+ color:#0076FE !important;
+ }
+ }
+
+ .ui.selection.dropdown.fields-dropdown:focus~label {
+ border: 0px;
+ color: #0076FE;
+ font-weight: normal;
+ }
+
+ .ui.selection.dropdown.fields-dropdown option{
+ background: var(--white);
+ color:var(--black);
+ }
+
+ .onboard-content {
+ margin-left: 0;
+ @include respond-above(sm) {
+ margin-left:1rem ;
+ html[dir="rtl"] & {
+ margin-left:0 ;
+ margin-right:1rem ;
+ }
+ }
+ }
+}
\ No newline at end of file