I am using an Angular 2 template (which looks fine to me):
<div class="container gt-container-fluid gt-container-form">
<div class="row">
<div class="col-sm-6">
<fieldset class="gt-fieldset">
<legend class="gt-legend">Details</legend>
<div class="row gt-row">
<div class="col-6"><label for="title">Requirements Title:</label></div>
<div class="col-6"><input id="title" type="text" class="k-textbox" [(ngModel)]="Requirement.Title" /></div>
</div>
<div class="row gt-row">
<div class="col-12"><label for="details">Requirements Details:</label></div>
</div>
<div class="row gt-row">
<div class="col-12">
<textarea id="details" class="k-textbox gt-textbox" [(ngModel)]="Requirement.Details"></textarea>
</div>
</div>
<div class="row gt-row">
<div class="col-6"><label for="rating">Requirement Rating:</label></div>
<div class="col-6"><kendo-dropdownlist id="ratings" [data]="ratingsData" [textField]="'ProductName'" [valueField]="'ProductID'" [defaultItem]="ratingsPlaceHolder"></kendo-dropdownlist></div>
</div>
<div class="row gt-row">
<div class="col-6"><label for="status">Approval Status:</label></div>
<div class="col-6"><kendo-dropdownlist id="approvalStatus" [data]=""></kendo-dropdownlist></div>
</div>
</fieldset>
<fieldset class="gt-fieldset">
<legend class="gt-legend">Attachments</legend>
<div class="row gt-row">
<div class="col-12"><label for="attachments">Drag and drop files of click "Select" to browse:</label></div>
</div>
<div class="row gt-row">
<div class="col-12">
<kendo-upload id="Attachments"
[saveUrl]=""
[removeUrl]=""
[disabled]="">
</kendo-upload>
</div>
</div>
</fieldset>
</div>
<div class="col-sm-6">
<kendo-tabstrip>
<kendo-tabstrip-tab [title]="'Framework Items'" [selected]="true">
<template kendoTabContent>
<div class="row gt-row">
<div class="col-6"><label for="framework">Framework Items:</label></div>
<div class="col-6"><kendo-multiselect [data]="frameworkItems" [value]="" [placeholder]="'Framework Items'"></kendo-multiselect></div>
</div>
<div class="row gt-row">
<div class="col-12 gt-col-addremovebuttons">
<button kendoButton (click)="onButtonClick()" [primary]="true">+</button>
<button kendoButton (click)="onButtonClick()" [primary]="true">-</button>
</div>
</div>
<div class="row gt-row">
<div class="col-12">
<kendo-grid [data]="frameworkItemsData" [height]="200">
<kendo-grid-column field="FrameworkLocation" title="ID">
</kendo-grid-column>
<kendo-grid-column field="FrameworkTitle" title="Name">
</kendo-grid-column>
</kendo-grid>
</div>
</div>
</template>
</kendo-tabstrip-tab>
<kendo-tabstrip-tab [title]="'Related Actions'">
<template kendoTabContent>
<div class="row gt-row">
<div class="col-6"><label for="actions">Related Actions:</label></div>
<div class="col-6"><kendo-multiselect [data]="actionItems" [value]="" [placeholder]="'Actions'"></kendo-multiselect></div>
</div>
</template>
</kendo-tabstrip-tab>
</kendo-tabstrip>
</div>
</div>
<div class="row gt-row">
<div class="col-12 gt-col-buttons">
<button kendoButton (click)="saveChanges()" [primary]="true">Save</button>
<button kendoButton (click)="onButtonClick()" [primary]="false">Edit</button>
<button kendoButton (click)="deleteRecord()" [primary]="false">Delete</button>
<button kendoButton (click)="onButtonClick()" [primary]="false">Close</button>
</div>
</div>
</div>
However, it is throwing the following error (amongst others):
Unhandled Promise rejection: Template parse errors: Unexpected closing
tag "legend" (">\n \n
Details[ERROR ->]\n
\n \n Requirements Title:[ERROR ->]\n
\n
Interestingly the code highlighting in the code input in stack overflow shows me the same kind of errors but I can't for the life of me spot the error.
Any help much appreciated!
Related
I am not able to get value from radio buttons in reactive form. It always come empty string. How could I solve that? Below is the code for that:
<form (ngSubmit)="onSubmit(segment_abc)" [formGroup]="segment_abc">
<div class="container">
<div class="row product-chooser">
<div class="col-md-4 col-sm-6 selected product-chooser-item" id="div1" tabindex="-1">
<div class="pricingTable">
<i class="fa fa-rupee"> 400</i><span class="gst"> + GST</span>
<input type="radio" formControlName="segment123" [value]=1>
<!-- Subscribe Now -->
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 product-chooser-item" id="div2" tabindex="-1">
<div class="pricingTable">
<div class="bottom">
<div class="txt_400">
<i class="fa fa-rupee"> 1000</i><span class="gst"> + GST</span>
<input type="radio" formControlName="segment123" [value]=2>
<!-- Subscribe Now -->
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 product-chooser-item" id="div3" tabindex="-1">
<div class="pricingTable pricingTablepremium">
<input type="radio" formControlName="segment123" [value]=3 (click)="openValue()">
<!-- Subscribe Now -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <button type="submit" class="btn btn_form" (click)="open(content,'email')">Submit</button> -->
<button type="submit" class="btn btn_form" >Submit</button>
</div>
There is no output in when I am getting values in form control
I am trying to implement a single page application where I want divs to display one below the other. But on resizing the viewport to various screen sizes, the positioning is getting overlapped and leaving extra spaces in between. I have codepen example to explain the problem in a better way.
https://codepen.io/SaloniDesai/pen/zPBZJr
How to make the divs appear same for every screen size ?Do i need to shuffle the way I have created the layout of the page ?
<div id="headliner" class="jumbotron text-center">
<h1>SearchGIFY app</h1>
<p>search for any GIF you want!</p>
</div>
<div id="search">
<form>
<input type="search" ng-model="vm.search.gif" value="" placeholder="type what you're looking for" />
<button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button>
</form>
</div>
<div class="row">
<div class="card">
<img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}" height="{{g.images.fixed_height}}" title="{{g.title}}">
</div>
</div>
<div class="jumbotron text-center" id="trendingBar">
<h3>Trending gifs</h3>
<div class="row">
<div class="thumbnail">
<img ng-repeat="trending in vm.trendingGifs" ng-src="{{trending.images.original.url}}" height="{{trending.images.fixed_height.height}}" title="{{trending.title}}">
</div>
</div>
</div>
First, your bootstrap structure isn't good, there isn't container, neither rows or col.
Try this one:
<div class="container-fluid">
<div class="row">
<div id="headliner col-md-12" class="jumbotron text-center">
<h1>SearchGIFY app</h1>
<p>search for any GIF you want!</p>
</div>
</div>
<div class="row">
<div id="search">
<div class="col-md-12">
<form class="form-inline text-center col-md-6 col-md-offset-3">
<div class="form-group">
<input class="form-control" type="search" ng-model="vm.search.gif" value=""
placeholder="type what you're looking for"/>
</div>
<button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}" height="{{g.images.fixed_height}}"
title="{{g.title}}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center" id="trendingBar">
<h3>Trending gifs</h3>
<div class="thumbnail">
<img ng-repeat="trending in vm.trendingGifs" ng-src="{{trending.images.original.url}}"
height="{{trending.images.fixed_height.height}}" title="{{trending.title}}">
</div>
</div>
</div>
</div>
Second, you add a lot of absolute class with % height and width. You don't have to do that if you're using bootstrap, all the responsive stuff is handled by the bootstrap grid with col classes. Take a quick look at the grid bootstrap documentation : https://getbootstrap.com/docs/3.3/css/#grid
Here's the codepen working responsively with some modification : https://codepen.io/anon/pen/MOemgw ;)
I am trying to display content in two columns in HTML5. But, somehow, I am doing something wrong. Here's my HTML code
.column1 {
float: left;
width: 70%;
}
<div class="cd-admin-upper-container container-fluid">
<div class="row">
<div class="column1">
<h1>Device UnAssignment</h1>
<div>
<div class="alert alert-info" style="height : 50%; margin-bottom : 2vw;width: 40%">
<label class="cd-admin-create-modal-label">Patient Name: </label>
<label class="cd-admin-create-modal-label">Device Serial Number: </label>
</div>
<div>
<button type="submit" class="btn btn-primary" style="margin-left: 3%"
ng-click="unassignDevice(device.patientId);"><span title="UnAssign Device"></span> UnAssign
</button>
</div>
</div>
<div class="column2">
<h1>Device Assignment</h1>
<p>Hello this is column two</p>
</div>
</div>
</div>
</div>
Here's the JSFiddle link - http://jsfiddle.net/chandham/k39vpafd/
I somehow nested column1 and column2 in same div. Here's the updated code.
<div class="cd-admin-upper-container container-fluid">
<div class="row">
<div class="column1">
<h1>Device UnAssignment</h1>
<div class="alert alert-info" style="height : 50%; margin-bottom : 2vw;width: 40%">
<label class="cd-admin-create-modal-label">Patient Name: </label>
<label class="cd-admin-create-modal-label">Device Serial Number: </label>
</div>
<div>
<button type="submit" class="btn btn-primary" style="margin-left: 3%" ng-click="unassignDevice(device.patientId);"><span title="UnAssign Device"></span> UnAssign
</button>
</div>
</div>
<div class="column2">
<h1>Device Assignment</h1>
<p>Hello this is column two</p>
</div>
</div>
</div>
I am trying to write an "or" in between 2 ".col-md-1".
For example:
Green or Blue
This is my code:
<div class="row">
<div class="col-md-1">
<button class="btn">Green</button>
</div>
<div class="col-md-1">
<button class="btn">Blue</button>
</div>
</div>
What should I write inside the code or should I try another technique?
You could add another col-md-1 between the 2 elements (or whatever column size suits your needs):
<div class="row">
<div class="col-md-1">
<button class="btn">Green</button>
</div>
<div class="col-md-1">
<p>or</p>
</div>
<div class="col-md-1">
<button class="btn">Blue</button>
</div>
</div>
Depends on how the result should look like. You can do something like this for example:
<div class="col-md-3">
<button class="btn"> Green </button> or <button class="btn"> Blue </button>
</div>
Give them and ID.
<div class="row">
<div class="col-md-1" id="green">
<button class="btn">Green</button>
</div>
<div class="col-md-1" id="blue">
<button class="btn">Blue</button>
</div>
</div>
and then you can select the first one and append an element after it
$("$green").after('<div>OR</div>')
give them an ID & do the if else in Javaascript
<div class="row">
<div id="greenDiv" class="col-md-1">
<button class="btn">Green</button>
</div>
<div id= "redDiv" class="col-md-1">
<button class="btn">Blue</button>
</div>
</div>
in js
<script>
$(document).ready(function(){
if(someCondition == true){
$("#redDiv").show();
$("#greenDiv").hide();
}else{
$("#redDiv").hide();
$("#greenDiv").show();
}
});
</script>
I need a accordion list for the html code below. I just want it to be able to open (expand) when click on the 'Technical'. When click again, it will close(collapse).
This is my html code
<!-- Techincal -->
<div class="item">
<div class="row">
<div class="col boldText">Technical</div>
</div>
<!--List-->
<div class="item">
<div class="row centerized">
<div class="col col-40"></div>
<div class="col col-30">Min</div><div class="col col-30">Max</div>
</div>
<div class="row">
<div class="col col-40">Tech spec</div>
<div class="col col-30"><input type="number" placeholder="0" ng-model="searchQuery.techMin"></div>
<div class="col col-30"><input type="number" placeholder="5" ng-model="searchQuery.techMax"></div>
</div>
<div class="row">
<div class="col col-40">Radius</div>
<div class="col col-30"><input type="number" placeholder="-1000" ng-model="searchQuery.radiusMin"></div>
<div class="col col-30"><input type="number" placeholder="1000" ng-model="searchQuery.radiusMax"></div>
</div>
</div>
</div>
I have no javascript code just simple html. It is written in ionic/cordova. How make it a simple preset collapsable and expandable when click?
There are multiple methods to solve this, i find this method as per your requirement
Your HTML code
<!-- Techincal -->
<ul>
<li class="item-stable item-icon-right"
ng-click="toggleGroup(0)"
ng-class="{active: isGroupShown(0)}">
<button class="item-text-center item-text-wrap">Techincal </button>
</li>
<div class="item-accordion"
ng-show="isGroupShown(0)">
<div class="item">
<div class="row">
<!--List-->
<div class="item">
<div class="row centerized">
<div class="col col-40"></div>
<div class="col col-30">Min</div><div class="col col-30">Max</div>
</div>
<div class="row">
<div class="col col-40">Tech spec</div>
<div class="col col-30"><input type="number" placeholder="0" ng-model="searchQuery.techMin"></div>
<div class="col col-30"><input type="number" placeholder="5" ng-model="searchQuery.techMax"></div>
</div>
<div class="row">
<div class="col col-40">Radius</div>
<div class="col col-30"><input type="number" placeholder="-1000" ng-model="searchQuery.radiusMin"></div>
<div class="col col-30"><input type="number" placeholder="1000" ng-model="searchQuery.radiusMax"></div>
</div>
</div>
</div>
</div>
</div>
</ul>
Here is your js code
<script>
$scope.toggleGroup = function(group) {
if ($scope.isGroupShown(group)) {
$scope.shownGroup = null;
} else {
$scope.shownGroup = group;
}
};
$scope.isGroupShown = function(group) {
return $scope.shownGroup === group;
};
</script>
Something like this, without extra modules. Just a simple solution to toggle some content. Animation can be done using CSS if needed. This is just to get you started with your initial question.
VIEW
<!-- Techincal -->
<div class="item">
<div class="row">
<div style="padding:10px; background: gray;" class="col boldText" ng-click="vm.toggleContainer()">Technical</div>
</div>
<!--List-->
<div class="item" style="margin-top:25px;" ng-if='vm.showTechnicalDetails'>
<div class="row centerized">
<div class="col col-40"></div>
<div class="col col-30">Min</div>
<div class="col col-30">Max</div>
</div>
<div class="row">
<div class="col col-40">Tech spec</div>
<div class="col col-30">
<input type="number" placeholder="0" ng-model="searchQuery.techMin">
</div>
<div class="col col-30">
<input type="number" placeholder="5" ng-model="searchQuery.techMax">
</div>
</div>
<div class="row">
<div class="col col-40">Radius</div>
<div class="col col-30">
<input type="number" placeholder="-1000" ng-model="searchQuery.radiusMin">
</div>
<div class="col col-30">
<input type="number" placeholder="1000" ng-model="searchQuery.radiusMax">
</div>
</div>
</div>
</div>
</div>
JS Angular part (vm approach)
angular
.module('app', [])
.controller('MainController', MainController)
function MainController() {
var vm = this;
vm.toggleContainer = toggleContainer;
vm.showTechnicalDetails = false;
function toggleContainer() {
vm.showTechnicalDetails = !vm.showTechnicalDetails;
}
}
JSFiddle : https://jsfiddle.net/DaanDeSmedt/Ln2dgmer/
JS Angular part ($scopeapproach)
angular
.module('app', [])
.controller('MainController', MainController)
function MainController($scope) {
$scope.showTechnicalDetails = false;
$scope.toggleContainer = function(){
$scope.showTechnicalDetails = !$scope.showTechnicalDetails;
}
}
JSFIDDLE : https://jsfiddle.net/DaanDeSmedt/Ln2dgmer/3/