We help IT Professionals succeed at work.

Help refactor style of Angular Popup

Robb Hill
Robb Hill asked
on
High Priority
73 Views
Last Modified: 2020-02-11
popup that is currently renderedI have the following popup that needs to be changed to better align with UI standards.

This is the AngularJS that makes this page:

I need to put some padding , alighn the buttons properly.  Can someone help me refactor?




<script type="text/ng-template" id="ApproveArRequestTemplate.html">
    <form>
        @*<div class="modal-header">
            <h3 class="modal-title">Add attachment</h3>
        </div>*@
        <div class="modal-body">
            <div class="control-group">
                <label class="control-lable">Approval Comment</label>
                <div class="controls">
                    <textarea id="approvereason" name="approvereason" class="form-control" ng-model="ApproveReason"></textarea>
                </div>
            </div>
            <div class="checkbox" ng-show="item.IsRoleEvpCfoCoo">
                <label><input type="checkbox" id="IsRouteToCEO" ng-disabled="IsRouteToCEO" ng-model="IsRouteToCEO" />  Route to CEO for approval</label>
            </div>
            <div class="checkbox" ng-show="item.IsRoleCreditDeptFPnACommOp">
                <label><input type="checkbox" id="IsRouteToDirectorOfTax" ng-model="IsRouteToDirectorOfTax" />  Route to Corporate Tax</label>
            </div>
            <label class="control-label" ng-show="item.IsRoleLocalFinance">Are Pre-Approved Business Metrics Met</label>
            <div class="col-md-6">

                <div class="btn-group" ng-show="item.IsRoleLocalFinance">
                    <label class="btn btn-default" name="ArePreApprovedBusinessMetricsMet1" ng-model="ArePreApprovedBusinessMetricsMet" btn-radio="true">Yes</label>
                    <label class="btn btn-default" name="ArePreApprovedBusinessMetricsMet1" ng-model="ArePreApprovedBusinessMetricsMet" btn-radio="false">No</label>
                    <input required type="text" ng-show="false" name="ArePreApprovedBusinessMetricsMet" id="ArePreApprovedBusinessMetricsMet"
                           ng-model="ArePreApprovedBusinessMetricsMet">
                </div>
            </div>
        </div>
        <div class="col-md-12">
        </div>

        <div class="modal-footer">
            <input type="submit" class="btn btn-primary" ng-click="ok()" ng-disabled="ArePreApprovedBusinessMetricsMet ==null && item.IsRoleLocalFinance" value="Submit Approval" />
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>

    </form>
</script>

Open in new window

Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This is a CSS problem more than it is an AngularJS problem.

We would need to see a working copy and at least the CSS for the template to be able to assist.

We would also need to see a mockup of the final effect you are trying to achieve. I can see the box needs formatting but it can a number of ways so if you could clarify exactly the look you are wanting that will help.