7
Próbuję uzyskać menu karty pionowej za pomocą funkcji ładowania początkowego. Chciałbym uzyskać tło dla kart, aby odróżnić je od zawartości karty po prawej stronie. Kiedy próbuję użyć koloru tła dla nav wypustki wyglądać niespójne z kolorem nav tleProblemy z układem dla karty pionowej podczas korzystania z funkcji ładowania początkowego
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="TABBEDLOCATEPANEL" ng-show="locate.toggleCheck()" class="container">
<div id=locatePanel class="row">
<div class="col-md-4 col-sm-3">
<div class="tabs-left">
<ul id=locateTabs class="nav form-tabs nav-pills nav-stacked">
\t \t <li class="active" title="Locate By Address"><a data-toggle="pill" href="#locateTab1" target='_self'><img src="images/Address.png" height="30" width="30"></img></a></li>
\t \t <li title="Locate By Existing Record"><a data-toggle="pill" href="#locateTab2" target='_self'><img src="images/entity.png" height="30" width="30"></img></a></li>
\t \t <li title="Locate By Coordinate"><a data-toggle="pill" href="#locateTab3" target='_self'><img src="images/coordinator.png" height="30" width="30"></img></a></li>
\t \t <li title="Geography" ng-show="locate.getJSON().geographyTab" ng-click="locate.showGeographyData();"><a data-toggle="pill" href="#locateTab4" target='_self'><img src="images/geography.png" height="30" width="30"></img></a></li>
\t \t <li title="Results" id="ltab5" ng-show="locate.resultsTab"><a data-toggle="pill" href="#locateTab5" target='_self'><img src="images/Result.png" height="30" width="30"></img></a></li>
\t \t </ul>
<div class="tab-content">
\t <div id="locateTab1" class="tab-pane active">
\t \t \t \t <table id=locateAddress style="border-collapse: separate; border-spacing: 5px;">
\t \t \t \t <div class="field-container">
\t <input type='text' class="field" name=locatebyaddress_address ng-model="locate.locatebyaddress_address" required placeholder="Address" init-from-form>
\t \t \t \t \t <label class="floating-label">Address:</label>
\t \t \t <div class="field-underline"></div>
\t \t \t \t </div>
\t \t \t \t <div class="field-container">
\t <input type='text' class="field" name=locatebyaddress_city ng-model="locate.locatebyaddress_city" required placeholder="City" init-from-form>
\t \t \t \t \t <label class="floating-label">City:</label>
\t \t \t <div class="field-underline"></div>
\t \t \t \t </div>
\t \t \t \t <div class="field-container">
\t <input type='text' class="field" name=locatebyaddress_state ng-model="locate.locatebyaddress_state" required placeholder="State" init-from-form>
\t \t \t \t \t <label class="floating-label">State:</label>
\t \t \t <div class="field-underline"></div>
\t \t \t \t </div>
\t \t \t \t <div class="field-container">
\t <input type='text' class="field" name=locatebyaddress_zip ng-model="locate.locatebyaddress_zip" required placeholder="Zip" init-from-form>
\t \t \t \t \t <label class="floating-label">Zip:</label>
\t \t \t <div class="field-underline"></div>
\t \t \t \t </div>
\t \t \t \t <div class="field-container">
\t <input type='text' class="field" name=locatebyaddress_longitude disabled=disabled ng-model="locate.locatebyaddress_longitude" required placeholder="Longitude" init-from-form>
\t \t \t \t \t <label class="floating-label">Longitude:</label>
\t \t \t <div class="field-underline"></div>
\t \t \t \t </div>
\t \t \t \t <div class="field-container">
\t <input type='text' class="field" name=locatebyaddress_latitude disabled=disabled ng-model="locate.locatebyaddress_latitude" required placeholder="Latitude" init-from-form>
\t \t \t \t \t <label class="floating-label">Latitude:</label>
\t \t \t <div class="field-underline"></div>
\t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t </table>
\t \t \t \t <br>
\t \t \t \t <input type=submit value=Find id=locateByAddress ng-click="locate.locateByAddress();"></input>
\t \t \t \t <input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation></input>
\t \t \t \t <input type=reset value=Cancel ng-click="locate.destroyLocatePanel();" id=cancelLocate></input>
\t \t \t </div>
\t \t \t <div id="locateTab2" class="tab-pane">
\t \t \t \t <table id=locateRecord style="border-collapse: separate; border-spacing: 5px;">
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>Entity Type</td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t <select id=locateEntityType ng-change="locate.entityChanged();" ng-model="locate.entityType">
\t \t \t \t \t \t \t \t <option></option>
\t \t \t \t \t \t \t \t <option ng-repeat="(key, value) in locate.getJSON().dropdown" value="{{key}}">{{ value }}</option>
\t \t \t \t \t \t \t </select> \t
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr><td>Record Number</td><td><input id=recordNumberExistingRecord ng-model="locate.recordNumber" type=text name=recordNumber></td></tr>
\t \t \t \t </table>
\t \t \t \t <br>
\t \t \t \t <input type=submit value=Find id=locateByExistingRecord ng-click="locate.getLocationByEntity();"></input>
\t \t \t \t <input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation></input>
\t \t \t \t <input type=reset value=Cancel ng-click="locate.destroyLocatePanel();" id=cancelLocate></input>
\t \t \t </div>
\t \t \t <div id="locateTab3" class="tab-pane">
\t \t \t \t <table id=locateCoordinates style="border-collapse: separate; border-spacing: 5px;">
\t \t \t \t \t <tr><td>Longitude</td><td><input type=text ng-model=locate.locateByCoordinatelongitude></td></tr>
\t \t \t \t \t <tr><td>Latitude</td><td><input type=text ng-model=locate.locateByCoordinatelatitude></td></tr>
\t \t \t \t \t <tr><td></td><td><input type=button ng-click="locate.pickCoordinate();" id=coordinatePick name=locatePick value=PICK></td></tr>
\t \t \t \t </table>
\t \t \t \t <br>
\t \t \t \t <input type=submit value=Find id=locateByCoordinate ng-click="locate.locateByCoordinate();"></input>
\t \t \t \t <input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation></input>
\t \t \t \t <input type=reset value=Cancel ng-click="locate.destroyLocatePanel();" id=cancelLocate></input>
\t \t \t \t <input type=button ng-click="locate.streetView();" ng-show="locate.streetViewCheck" value="Street View" id=streetView></input>
\t \t \t </div>
\t \t \t <div id="locateTab4" class="tab-pane" ng-show="locate.getJSON().geographyTab">
\t \t \t \t <div ng-html-compile="locate.getGeographyHTML()" | trust></div>
\t \t \t </div>
\t \t \t <div id="locateTab5" class="tab-pane" ng-show="locate.resultsTab">
\t \t \t \t <ul class="listAddress">
\t \t \t \t \t <li ng-repeat="list in locate.addressList" ng-click="locate.addressListClick($index);">
\t \t \t \t \t \t {{ list.formatted_address }}
\t \t \t \t \t </li>
\t \t \t \t </ul>
\t \t \t </div> <!-- /result tab -->
\t \t </div><!-- /tab-content -->
</div><!-- /tabbable -->
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->Gdy chcę pola tekstowego, aby być po stronie tych kart, ale dla niektórych powód idzie dalej pod zakładkami. Jak mogę to naprawić.