如何自定义angular-ui引导选项卡

时间:2014-10-07 01:59:10

标签: css angularjs angular-ui-bootstrap

我有一些问题造型我的模态。标签底部边框的长度超过模态的一侧。我还希望标签的每一面都有边框,这样它看起来就像是在一个机箱中。我做了一个plunker但是我不能让模态正确的高度并且标签没有出现?currentmodal plunkr

 <!--Cover Content-->
    <tabset>
        <tab heading="Contract">
            <div class="col-xs-12" style="margin-top:30px">
                <div class="inline-fields">
                    <label style="margin-left:13px">Original&nbsp;Contract:</label>
                    <input style="width:115px;text-align:right" ng-model="items.JobOriginalContract" type="text" format="number">
                    <label style="margin-left:57px">Geo&nbsp;Area:</label>
                    <select ng-controller="JobMiscCtrl" style="width:148px" ng-model="items.GeoAreaName" ng-options="job.id as job.GeoAreaName for job in geoAreaArray">
                        <option value="0"></option>
                    </select>
                </div>
                <div class="inline-fields">
                    <label style="margin-left:69px">Total&nbsp;CO:</label>
                    <input style="width:115px;text-align:right" ng-model="items.JobTotalCO" type="text" format="number">
                    <label style="margin-left:82px">Class:</label>
                    <select ng-controller="JobMiscCtrl" style="width:148px" ng-model="items.JobClassName" ng-options="job.id as job.JobClassName for job in jobClassArray">
                        <option value="0"></option>
                    </select>
                </div>
                <div class="inline-fields">
                    <label style="margin-left:12px">Revised&nbsp;Contract:</label>
                    <input disabled style="width:115px;text-align:right" ng-model="items.JobRevisedContract" type="text" format="number">
                    <label style="margin-left:55px">Min&nbsp;Wage:</label>
                    <input style="width:90px" ng-model="items.JobMinWage" type="text" format="number">

                    <label style="margin-left:0px">Type:</label>
                    <select ng-controller ="JobMiscCtrl" style="width:148px" ng-model="items.JobTypeName" ng-options="job.id as job.JobTypeName for job in jobTypeArray">
                        <option value="0"></option>
                    </select>
                </div>
                <div class="inline-fields">
                    <label style="margin-left:60px">Retainage:</label>
                    <select style="width:115px;text-align:right" ng-model="items.JobRetainage">
                        <option value="0">0%</option>
                        <option value="5">5%</option>
                        <option value="10">10%</option>
                    </select>
                    <label style="margin-left:42px">Tax&nbsp;Exempt:</label>
                    <input type="checkbox" ng-model="items.JobTaxExempt" />
                </div>
                <div class="inline-fields">
                    <label style="margin-left:22px">Original&nbsp;Budget:</label>
                    <input style="width:115px;text-align:right" ng-model="items.JobOriginalBudget" type="text" format="number">
                    <label style="margin-left:39px">Ins&nbsp;Program:</label>
                    <select style="width: 145px" ng-model="items.JobInsProgram">
                        <option value="CCIP">CCIP</option>
                        <option value="OCIP">OCIP</option>
                        <option value="RCIP">RCIP</option>
                        <option value="TSIB">TSIB</option>
                    </select>
                </div>
            </div><!--End col-xs-12-->
        </tab><!--End Contract Tab-->

        <!--<tab disabled heading="Contacts"></tab>
        <tab disabled heading="Document Distribution"></tab>-->
    </tabset><!--End Tab Content-->

 .large-Modal .modal-dialog{
 width:800px; height: 500px;
 position: absolute;
 top:0; bottom: 0; left: 0; right: 0;
 margin: auto
 }
.tab-pane {

border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-radius: 0px 0px 5px 5px;
padding: 10px;
 }

.nav-tabs {
margin-bottom: 0;
}

0 个答案:

没有答案