Skip to content
This repository has been archived by the owner on Mar 27, 2023. It is now read-only.

Commit

Permalink
[UI] Remove position: relative from forms in grid
Browse files Browse the repository at this point in the history 
Signed-off-by: Aditya Bhandari <[email protected]>
  • Loading branch information
@adibwoy
Aditya Bhandari authored and adibwoy committed May 24, 2017
1 parent 6823bdc commit 4ec0e0e
Show file tree
Hide file tree
Showing 7 changed files with 168 additions and 1 deletion.
137 changes: 137 additions & 0 deletions src/app/forms/form-grid-validation/form-grid-validation.demo.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
<!--
~ Copyright (c) 2016 VMware, Inc. All Rights Reserved.
~ This software is released under MIT license.
~ The full license information can be found in LICENSE in the root directory of this project.
-->

<p>
Try it live:
<button class="btn btn-primary" (click)="basic = true">Show modal</button>
</p>
<clr-modal [(clrModalOpen)]="basic" [clrModalSize]="'lg'">
<h3 class="modal-title">Modal</h3>
<div class="modal-body">
<form>
<section class="form-block">
<label>Form Inside a Grid</label>
<div class="form-group row">
<div class="col-lg-2 col-md-12 col-sm-12 col-xs-12">
<label for="gForm_1">Input field</label>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<input class="form-control" type="text" id="gForm_1" placeholder="Enter value here" size="45">
</div>
<clr-tooltip
[clrTooltipDirection]="'top-right'"
[clrTooltipSize]="'lg'">
<clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
<clr-tooltip-content class="tooltip-content">
This should be a long text here.This should be a long text here.
This should be a long text here.This should be a long text here.
This should be a long text here.This should be a long text here.
</clr-tooltip-content>
</clr-tooltip>
</div>
<div class="form-group row">
<div class="col-lg-2 col-md-12 col-sm-12 col-xs-12">
<label for="gForm_3">Select box</label>
</div>
<div class="col-lg-4 col-md-8 col-sm-12 col-xs-12">
<div class="select form-control">
<select id="gForm_3">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-lg-2 col-md-12 col-sm-12 col-xs-12">
<label for="gForm_4">Text area</label>
</div>
<div class="col-lg-10 col-md-12 col-sm-12 col-xs-12">
<textarea id="gForm_4" rows="5" class="form-control"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-lg-2 col-md-12 col-sm-12 col-xs-12">
<label>This label has a lot of content in it. This tests that labels in forms wrap correctly.</label>
</div>
<div class="col-lg-4 col-md-5 col-sm-12 col-xs-12">
<div class="select form-control">
<select id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="col-lg-3 col-md-5 col-sm-12 col-xs-12">
<span>Sockets: 1</span>
</div>
</div>
<div class="form-group row">
<div class="col-lg-2 col-md-12 col-sm-12 col-xs-12">
<label>Multiple select box</label>
</div>
<div class="col-lg-10 col-md-12 col-sm-12 col-xs-12">
<div class="select multiple form-control">
<select multiple id="exampleSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-lg-2 col-md-12 col-sm-12 col-xs-12">
<label>Select box with a size of 5 rows</label>
</div>
<div class="col-lg-10 col-md-12 col-sm-12 col-xs-12">
<div class="select multiple form-control">
<select id="exampleSelect3" size="5">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-lg-2 col-md-12 col-sm-12 col-xs-12">
<label for="gForm_3">Other form fields</label>
</div>
<div class="col-lg-2 col-md-3 col-sm-12 col-xs-12">
<div class="toggle-switch">
<input type="checkbox" id="othertoggle">
<label for="othertoggle">Toggle</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="checkbox-inline">
<input type="checkbox" id="othercheckbox" checked>
<label for="othercheckbox">Inline Checkbox</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Button</button>
</section>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline" (click)="basic = false">Cancel</button>
<button type="button" class="btn btn-primary" (click)="basic = false">Ok</button>
</div>
</clr-modal>
5 changes: 5 additions & 0 deletions src/app/forms/form-grid-validation/form-grid-validation.demo.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
// Copyright (c) 2016 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

@import "../../_utils/code";
18 changes: 18 additions & 0 deletions src/app/forms/form-grid-validation/form-grid-validation.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/*
* Copyright (c) 2016 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
import {Component} from "@angular/core";

@Component({
moduleId: module.id,
selector: "clr-forms-demo-grid-validation",
// Note the .css extension here, not .scss. That's the best we can have at the moment.
styleUrls: ["./form-grid-validation.demo.css"],
templateUrl: "./form-grid-validation.demo.html"
})
export class FormGridValidationDemo {
// Booleans to open each example modal
public basic: boolean = false;
}
3 changes: 3 additions & 0 deletions src/app/forms/forms.demo.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {FormGridDemo} from "./form-grid/form-grid";
import {TemplateDrivenFormsDemo} from "./template-driven-forms/template-driven-forms";
import {ReactiveFormsDemo} from "./reactive-forms/reactive-forms";
import {Example} from "./utils/example";
import {FormGridValidationDemo} from "./form-grid-validation/form-grid-validation";

@NgModule({
imports: [
Expand All @@ -33,6 +34,7 @@ import {Example} from "./utils/example";
FormGridDemo,
FormTestDemo,
FormValidationDemo,
FormGridValidationDemo,
FormCompactDemo,
TemplateDrivenFormsDemo,
ReactiveFormsDemo,
Expand All @@ -44,6 +46,7 @@ import {Example} from "./utils/example";
FormGridDemo,
FormTestDemo,
FormValidationDemo,
FormGridValidationDemo,
FormCompactDemo,
TemplateDrivenFormsDemo,
ReactiveFormsDemo
Expand Down
2 changes: 2 additions & 0 deletions src/app/forms/forms.demo.routing.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {FormGridDemo} from "./form-grid/form-grid";

import {TemplateDrivenFormsDemo} from "./template-driven-forms/template-driven-forms";
import {ReactiveFormsDemo} from "./reactive-forms/reactive-forms";
import {FormGridValidationDemo} from "./form-grid-validation/form-grid-validation";

const ROUTES: Routes = [
{
Expand All @@ -26,6 +27,7 @@ const ROUTES: Routes = [
{ path: "form-validation", component: FormValidationDemo },
{ path: "form-compact", component: FormCompactDemo },
{ path: "form-grid", component: FormGridDemo },
{ path: "form-grid-validation", component: FormGridValidationDemo },
{ path: "form-template-driven", component: TemplateDrivenFormsDemo },
{ path: "form-reactive", component: ReactiveFormsDemo }
]
Expand Down
1 change: 1 addition & 0 deletions src/app/forms/forms.demo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {Component} from "@angular/core";
<li><a [routerLink]="['./form-validation']">Form Validation</a></li>
<li><a [routerLink]="['./form-compact']">Compact Form</a></li>
<li><a [routerLink]="['./form-grid']">Forms in a Grid</a></li>
<li><a [routerLink]="['./form-grid-validation']">Forms Validation in a Grid</a></li>
<li><a [routerLink]="['./form-template-driven']">Template-Driven Forms</a></li>
<li><a [routerLink]="['./form-reactive']">Reactive Forms</a></li>
</ul>
Expand Down
3 changes: 2 additions & 1 deletion src/clarity-angular/forms/_forms.clarity.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@

&.row {
padding-left: 0;
position: static;
}

//The first label in a form-group always appears on the left hand side for large screens
Expand All @@ -84,7 +85,7 @@

&.row > [class*='col-']:first-child > label,
&.row > [class*='col-']:first-child > span {
position: relative;
position: static;
}

& > label:first-child,
Expand Down

0 comments on commit 4ec0e0e

Please sign in to comment.