bootstrap 3.0 formatting
I have the following html file. I would like to use this html file as an example of the best practices of boostrap 3.0.
Here is what I have so far. I want to make sure everything is fluid, responsive...but I also want the controls to look good using boostrap.
For example a state field would be different than a description.
Can someone please style this up with boostrap showing me how to touch this up. I will post my current code.
Here is what it looks like...This needs to be more form like...for example state would be state abbreviations, assignned woudl be first and last names, Partner would be a complany name, and policy number might be at max about 9 digits.
So other than this level of booostrapping ...anything else that boostrap does here or jquery/ jquery UI would be of great help. I want to apply what I learn here to the 15 other pages I need to format.
Thanks
This pic is in desktop mode...so it clearly needs to look better:)
Here is what I have so far. I want to make sure everything is fluid, responsive...but I also want the controls to look good using boostrap.
For example a state field would be different than a description.
Can someone please style this up with boostrap showing me how to touch this up. I will post my current code.
<style type="text/css">
.form-control {
display: inline-block;
width: auto;
font-weight: normal;
}
</style>
<h3>View Archived Records</h3>
<form class="form-horizontal" name="workQueueForm">
<fieldset>
<legend></legend>
<div class="form-group" ng-show="errorMessage">
<p class="bg-danger">{{ errorMessage }}</p>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Policy Number</label>
<div class="col-sm-10">
<label id="policyNumber" name="policyNumber" class="form-control">{{ workQueue.policyNumber }}</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Carrier</label>
<div class="col-sm-10">
<label name="partner" id="partner" class="form-control">{{ workQueue.partner }}</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Line of Business</label>
<div class="col-sm-10">
<label name="policyForm" id="policyForm" class="form-control">{{ workQueue.policyForm }}</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">State</label>
<div class="col-sm-10">
<label name="state" id="state" class="form-control">{{ workQueue.state }}</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Work Queue Error</label>
<div class="col-sm-10">
<label name="queueType" id="queueType" class="form-control">{{ workQueue.workQueueType }}</label>
</div>
</div>
<div class="form-group" ng-show="workQueue.giA_ACP">
<label class="col-sm-2 control-label">GIA ACP</label>
<div class="col-sm-10">
<label name="queueType" id="queueType" class="form-control">{{ workQueue.giA_ACP }}</label>
</div>
</div>
<div class="form-group" ng-show="workQueue.giA_ECP">
<label class="col-sm-2 control-label">GIA ECP</label>
<div class="col-sm-10">
<label name="queueType" id="queueType" class="form-control">{{ workQueue.giA_ECP }}</label>
</div>
</div>
<div class="form-group" ng-show="workQueue.gfR_ACP">
<label class="col-sm-2 control-label">GFR ACP</label>
<div class="col-sm-10">
<label name="queueType" id="queueType" class="form-control">{{ workQueue.gfR_ACP }}</label>
</div>
</div>
<div class="form-group" ng-show="workQueue.gfR_ECP">
<label class="col-sm-2 control-label">GFR ECP</label>
<div class="col-sm-10">
<label name="queueType" id="queueType" class="form-control">{{ workQueue.gfR_ECP }}</label>
</div>
</div>
<div class="form-group" ng-show="workQueue.giA_Cat_ACP">
<label class="col-sm-2 control-label">GIA Catastrophic ACP</label>
<div class="col-sm-10">
<label name="queueType" id="queueType" class="form-control">{{ workQueue.giA_Cat_ACP }}</label>
</div>
</div>
<div class="form-group" ng-show="workQueue.giA_Cat_ECP">
<label class="col-sm-2 control-label">GIA Catastrophic ECP</label>
<div class="col-sm-10">
<label name="queueType" id="queueType" class="form-control">{{ workQueue.giA_Cat_ECP }}</label>
</div>
</div>
<div class="form-group" ng-show="workQueue.gfR_Cat_ACP">
<label class="col-sm-2 control-label">GFR Catastrophic ACP</label>
<div class="col-sm-10">
<label name="queueType" id="queueType" class="form-control">{{ workQueue.gfR_Cat_ACP }}</label>
</div>
</div>
<div class="form-group" ng-show="workQueue.gfR_Cat_ECP">
<label class="col-sm-2 control-label">GFR Catastrophic ECP</label>
<div class="col-sm-10">
<label name="queueType" id="queueType" class="form-control">{{ workQueue.gfR_Cat_ECP }}</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Record Date</label>
<div class="col-sm-10">
<label type="text" id="createDate" name="createDate" class="form-control">{{ workQueue.createDate | dateFormat }}</label>
</div>
</div>
<div class="form-group" ng-show="workQueue.notes && workQueue.notes.length!=0">
<label class="col-sm-2 control-label">Notes</label>
<div class="col-sm-10">
<label ng-repeat="note in workQueue.notes" class="form-control" style="height:auto">{{ note }}</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<span><button class="btn btn-default" ng-click="back()">Close</button></span>
</div>
</div>
</fieldset>
</form>Here is what it looks like...This needs to be more form like...for example state would be state abbreviations, assignned woudl be first and last names, Partner would be a complany name, and policy number might be at max about 9 digits.
So other than this level of booostrapping ...anything else that boostrap does here or jquery/ jquery UI would be of great help. I want to apply what I learn here to the 15 other pages I need to format.
Thanks
This pic is in desktop mode...so it clearly needs to look better:)
ASKER
Well this is an angular spa....thats writting underneath MVC.
Either way....the approach for this layout is just boostrap, jquery, and normal html controls with angular directives.
I am only concerned about the best practice for bootstrapping a control..whether it be dropdown or label or text or whatever....on a page in a responsive manner.
Either way....the approach for this layout is just boostrap, jquery, and normal html controls with angular directives.
I am only concerned about the best practice for bootstrapping a control..whether it be dropdown or label or text or whatever....on a page in a responsive manner.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
1.) All ids for elements on a page must be unique. You have multiple id="queueType".
2.) You have no inputs on your form. For example, this:
<label name="state" id="state" class="form-control">{{ workQueue.state }}</label>
Should be:
<input name="state" id="state" class="form-control" value="{{ workQueue.state }}" />
So the user can fill in a value, right?
3.) "This needs to be more form like"
When I load your markup into a browser, it looks like a form. You mentioned a "pic" at the end of the question. Maybe that would clarify what you mean.