0
Ich versuche dynamische Suchformular mit eckigen js.In diesem Formular, ich füge Felder basierend auf bestandenen JSON-Daten.bootstrap drodown menu inroducing fehlausrichtung in einer dynamischen form
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-init="names=['Jani','Hege','Kai']">
<head >
<title>ISS Core</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--angular grids based ependency -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<style>
.form-horizontal .control-label {
}
.form-horizontal .controls {
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color: #0a4e8f;
}
body {
background-color: #f2f2f2;
overflow: auto;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
.h2{
padding: 25px;
background-color: #0a4e8f;
}
.grid {
width: 100%;
height: 50vh;
}
.my-custom-menu {
position: absolute;
}
.my-custom-menu .ui-grid-menu {
padding: 0px;
}
.my-custom-menu .ui-grid-menu-inner {
-webkit-box-shadow: none;
box-shadow: none;
}
.rotated {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
body {
padding-top: 50px;
padding-bottom: 20px;
}
#search h3{background-color: #0a4e8f;color:white;padding-left:25px}
/* Set padding to keep content from hitting the edges */
.ui-grid-cell { display : table-cell; height: auto !important; overflow:visible; position: static; padding-top: 10px; }
.ui-grid-row { display : table-row; height: auto !important; position: static; }
.ui-grid-cell-contents{ height: auto !important; white-space: normal; overflow:visible; }
</style>
<script type="text/javascript">
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.exporter', 'ui.grid.selection']);
app.controller('MainCtrl', ['$scope', '$http', '$interval', '$q', function ($scope, $http, $interval, $q) {
var fakeI18n = function(title){
var deferred = $q.defer();
$interval(function() {
deferred.resolve('col: ' + title);
}, 1000, 1);
return deferred.promise;
};
$scope.gridOptions = {
exporterMenuCsv: false,
enableGridMenu: true,
gridMenuTitleFilter: fakeI18n,
columnDefs: [
{ name: 'name' },
{ name: 'gender', enableHiding: false },
{ name: 'company' }
],
gridMenuCustomItems: [
{
title: 'Rotate Grid',
action: function ($event) {
this.grid.element.toggleClass('rotated');
},
order: 210
}
],
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
// interval of zero just to allow the directive to have initialized
$interval(function() {
gridApi.core.addToGridMenu(gridApi.grid, [{ title: 'Dynamic item', order: 100}]);
}, 0, 1);
gridApi.core.on.columnVisibilityChanged($scope, function(changedColumn){
$scope.columnChanged = { name: changedColumn.colDef.name, visible: changedColumn.colDef.visible };
});
}
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);
</script>
</head>
<body>
<div class="container-fluid" >
<div class="row" id="formDetail" style="background-color: #0a4e8f;color:white;padding:5px;height:10%">
<div class="col-sm-6 col-xs-6 col-lg-6">
<h3 > Heading 1</h3>
</div>
<div class="col-sm-6 col-xs-6 col-lg-6">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</div>
<div class="row" id="search">
<h3 style="">Heading 2</h3>;
<form class="form-horizontal blockl">
<div class="form-group" ng-controller="myCtrl" id="test">
<div ng-repeat="value in items" ng-switch on="value.type" class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div ng-switch-when="dropdown" >
<label class="control-label col-lg-6 col-md-6 col-sm-6 col-xs-6" ng-bind="value.label"></label>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="dropdown" >
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
</div>
</div>
</div>
<div ng-switch-when="radio">
<label class="control-label checkbox-inline col-lg-6 col-md-6 col-sm-6 col-xs-6" ng-bind="value.label"></label>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="padding:5px">
<input type="checkbox" value="" />
</div>
</div>
<div ng-switch-when="text">
<label class="control-label col-lg-6 col-md-6 col-sm-6 col-xs-6">{{value.label}}</label>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="padding:5px">
<input type="{{value.type}}" class="form-control">
</div>
</div>
<div ng-switch-when="label">
<label class="control-label col-lg-6 col-md-6 col-sm-6 col-xs-6" >{{value.label}}</label>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="padding-left: 7px">
<label class="control-label col-sm-2" style="padding-left: 0px">{{value.value}}</label>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="row" id="grid" > <h3 style="background-color: #0a4e8f;color:white;padding-left:25px">heading 3</h3>
<div id="grid1" ui-grid="gridOptions" ui-grid-exporter ui-grid-selection class="grid"></div>
<div ng-if='columnChanged'>
Column Visibility Changed - name: {{ columnChanged.name }} visible: {{ columnChanged.visible }}
</div>
<div><p>nand</p></div>
</div>
</div>
</body>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller("myCtrl", function($scope) {
$scope.items = {
ll: {type: 'dropdown', label: 'myDropDown'},
one: {type: 'text', label: 'Mytext'},
two: {type: 'text', label: 'Mytext'},
three: {type: 'text', label: 'Mytext'},
five: {type: 'text', label: 'Mytext'},
six: {type: 'text', label: 'Mytext'},
seven: {type: 'text', label: 'Mytext'},
eight: {type: 'text', label: 'Mytext'},
nine: {type: 'text', label: 'Mytext'},
ten: {type: 'text', label: 'Mytext'},
e: {type: 'text', label: 'Mytext'},
b: {type: 'text', label: 'Mytext'},
a: {type: 'text', label: 'Mytext'},
q: {type: 'text', label: 'Mytext'},
w: {type: 'text', label: 'Mytext'},
i: {type: 'label', label: 'label',value:'labelValue'},
l: {type: 'dropdown', label: 'myDropDown'},
};
});
</script>
</html>
aber wenn jemals Bootstrap-Drop-down seine falsch ausgerichtet Bild kommt Form Alimentation (es in rot in der beigefügten Bildern hervorgehoben). Ich habe versucht mit verschiedenen Bootstrap-Klassen wie "form inline" etc, um dies zu beheben, aber es hat nicht funktioniert. irgendein Hinweis, was falsch ist, mache ich.
