<tbody>
<tr *ngFor="let detaile of itemlist">
<td>
<div class="d-flex align-items-center">
<div class=" d-inline-block">
{{detaile.SizeID}}
{{detaile.Size}}
{{detaile.Price}}
<select class="custom-select form-control" id="detaile.SizeID" [(ngModel)]="detaile.SizeID" (change)="selectedSizeHandler($event)" name="sizeItem1" >
{{detaile.SizeID}}
<option value="0">Choose Size</option>
<option *ngFor="let size of sizes" [value]="size.ID">{{size.Name}}</option>
</select>
<!-- <input type="text" [value]="detaile.SizeID"> -->
</div>
<div class=" d-inline-block">
<input type="number" id="detaile.SizeID" [(ngModel)]="detaile.Price" name="picee" class=" form-control" name="price11" min="0" placeholder="Price" />
</div>
</div>
</td>
</tr>
</tbody>
When trying to bind the itemList to set each dropdownlist item, it only set the last object in the ngModel to all dropdownlist
Related
I made flex-box because I need to have two elements side by side and one bellow.
But the flex-box is much bigger than the content in it, is this normal? What can I do for it?
Here is the code of the container:
<div style="display:flex;float:left;flex-wrap:wrap">
<div style="">
<div class="row-fluid big fixedWidth100">
<div class="span12">
<label for="id30ac3799c3efce50_Operator" title="OP">OP</label>
<select class="" data-init-classnames="" id="id30ac3799c3efce50_Operator" name="Operator" onchange="" title="OP" value="AND">
<option class="" selected="true" title="" value="AND">AND</option>
<option class="" title="" value="ANDNOT">AND NOT</option>
<option class="" title="" value="OR">OR</option>
<option class="" title="" value="ORNOT">OR NOT</option>
</select>
</div>
</div>
</div>
<div style="">
<div class="row-fluid big fixedWidth100">
<div class="span12">
<label for="id883418d93fa3ce50_OpenBrace" title=".(.">.(.</label><input id="id883418d93fa3ce50_OpenBrace" maxlength="10" name="OpenBrace" readonly="readonly" title=".(." type="text" value="">
<div class="span12" id="openBracePlusMinus">
<table>
<tbody>
<tr>
<td>
<input type="button" value="-" class="qtyminusopen" style="width: 43px;">
</td>
<td>
<input type="button" value="+" class="qtyplusopen" style="width: 43px;">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div style="flex-basis:100%;height:0" class="clear"></div>
<div id="InputRange">
<div class="row-fluid width100pct" style="width:100%">
<div class="span4"><label for="idd52f75e7a6d1a650_InputRange" title="Wertebereich">Wertebereich</label></div>
<div class="span8"><input id="idd52f75e7a6d1a650_InputRange" name="InputRange" onclick="" title="Wertebereich" type="checkbox" value="false"></div>
</div>
</div>
This is pretty standard behavior for flexboxes. That is just the width of the container and the children within. The purple resembles the container width. So if you set the container to 100% you would see the purple from your image run the whole width. Or if you justify-content: center; on your flexbox you will see that the purple is then spaced out evenly. Like here.
What can you do?
You can use flex: 1; on each of the children to the parent container that is flexed. This allows for those elements to fill that space. It depends on the extent of what you're trying to do but you can also set a fixed width which will elminate that spacing also.
.container {
display: flex;
float: left;
flex-wrap: wrap;
}
.example {
flex: 1;
}
#InputRange {
flex: 1;
}
<div class="container">
<div class="example">
<div class="row-fluid big fixedWidth100">
<div class="span12">
<label for="id30ac3799c3efce50_Operator" title="OP">OP</label>
<select class="" data-init-classnames="" id="id30ac3799c3efce50_Operator" name="Operator" onchange="" title="OP" value="AND">
<option class="" selected="true" title="" value="AND">AND</option>
<option class="" title="" value="ANDNOT">AND NOT</option>
<option class="" title="" value="OR">OR</option>
<option class="" title="" value="ORNOT">OR NOT</option>
</select>
</div>
</div>
</div>
<div style="">
<div class="row-fluid big fixedWidth100">
<div class="span12">
<label for="id883418d93fa3ce50_OpenBrace" title=".(.">.(.</label><input id="id883418d93fa3ce50_OpenBrace" maxlength="10" name="OpenBrace" readonly="readonly" title=".(." type="text" value="">
<div class="span12" id="openBracePlusMinus">
<table>
<tbody>
<tr>
<td>
<input type="button" value="-" class="qtyminusopen" style="width: 43px;">
</td>
<td>
<input type="button" value="+" class="qtyplusopen" style="width: 43px;">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div style="flex-basis:100%;height:0" class="clear"></div>
<div id="InputRange">
<div class="row-fluid width100pct" style="width:100%">
<div class="span4"><label for="idd52f75e7a6d1a650_InputRange" title="Wertebereich">Wertebereich</label></div>
<div class="span8"><input id="idd52f75e7a6d1a650_InputRange" name="InputRange" onclick="" title="Wertebereich" type="checkbox" value="false"></div>
</div>
</div>
EDIT: To achieve your initial spacing take flex: 1; off your example class. But doing this will make the purple (unoccupied space) resurface. But it does fill the #InputRange ID
while the screen size starts to get around the mobile area, my table(above footer)shrinks down to the size of the content that's inside of it. It stuck out of the form a little so I added overflow-x: scroll;
This however does not fix the main issue which is the table shrinking to fit the content. I do want it to shrink for tablets but I think this should happen all the way up to a min-width of 635px;
At which point I would like the overflow-x: scroll; to take effect and the table to stop shrinking. For some reason overflow-x: scroll only kicks in at a min-width of 388px;(Even though this property is in a media query at min-width 686px)
I tried using min-width on the table. While this keeps it from shrinking any further it pushes it out of the form. Any ideas?
https://jsfiddle.net/r4ptsohe/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Careers | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/careers.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="careers-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1" id="m1"></div>
<div class="m2" id="m2"></div>
<div class="m3" id="m3"></div>
</div>
<ul>
<li class="after">Home</li>
<li class="after">About</li>
<li class="after">Services</li>
<li class="after">Careers</li>
<li>Contact</li>
</ul>
</div>
</nav>
<h1>Join Our Team</h1>
</div>
</header>
<section class="form">
<h2>We're Hiring</h2>
<form action="" method="" id="form">
<h3>General Information</h3>
<div class="row row-1">
<input type="text" name="First" placeholder="First Name">
<input type="text" name="Last" placeholder="Last Name">
<input type="text" name="SSN" placeholder="SSN">
</div>
<div class="row row-2">
<input type="text" name="Address" placeholder="Address">
</div>
<div class="row row-3">
<input type="text" name="City" placeholder="City">
<input type="text" name="State" placeholder="State" class="middle">
<input type="text" name="Zipcode" placeholder="Zipcode">
</div>
<div class="row row-4">
<div class="label"><label for="Primary-Phone" class="row-4">Primary-Phone #</label></div>
<input type="text" name="Primary-Phone" placeholder="(xxx)-xxx-xxxx">
<div class="label"><label for="Cell-Phone" class="row-4">Cell-Phone #</label></div>
<input type="text" name="Cell-Phone" placeholder="(xxx)-xxx-xxxx">
</div>
<div class="row row-5">
<label>Are you 18 years old or older?</label>
<div class="radio">
<input type="radio" name="ageYears" value="Yes" id="ageYearsYes">
<label for="ageYearsYes">Yes</label>
<input type="radio" name="ageYears" value="No" required="" id="ageYearsNo">
<label for="ageYearsNo">No</label>
</div>
</div>
<div class="row row-6">
<div class="label"><label>Desired Wage:</label></div>
<input type="text" id="wage-desired">
<div class="label"><label>Available Start Date:</label></div>
<input type="text" id="start-date">
</div>
<div class="row row-7">
<div class="col">
<label>Are you legally authorized to work in the U.S?</label>
<div class="radio">
<input type="radio" name="legally" value="Yes" id="legally-yes">
<label for="legally-yes">Yes</label>
<input type="radio" name="legally" value="No" required="" id="legally-no">
<label for="legally-no">No</label>
</div>
</div>
<div class="col">
<label>Are you willing to submit to a drug test?</label>
<div class="radio">
<input type="radio" name="drug-test" value="Yes" id="drug-yes">
<label for="drug-yes">Yes</label>
<input type="radio" name="drug-test" value="No" required="" id="drug-no">
<label for="drug-no">No</label>
</div>
</div>
</div>
<div class="row row-8">
<div class="col">
<label>Have you ever been convicted of a crime? If yes, please explain.</label>
<div class="radio">
<input type="radio" name="crime-answer" value="Yes" id="crime-yes">
<label for="crime-yes" id="crime-yes">Yes</label>
<input type="radio" name="crime-answer" value="No" required="" id="crime-no">
<label for="crime-no">No</label>
<textarea name="crime-info" cols="70" rows="4" class="crime-textarea"></textarea>
</div>
</div>
<div class="col">
<label class="">How did you hear about this job?</label>
<div class="radio">
<input type="radio" name="friend" value="friend" id="friend">
<label for="friend">friend</label>
<input type="radio" name="friend" value="online" id="online">
<label for="friend">online</label>
<input type="radio" name="friend" value="other" id="other">
<label for="other">other</label>
</div>
</div>
</div>
<hr>
<h3>Employment History</h3>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<h3>Refrences</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>NAME</th>
<th>RELATIONSHIP</th>
<th>COMPANY</th>
<th>PHONE NUMBER</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
</tbody>
</table>
</div>
<input type="submit" value="Submit" id="submit">
</form>
</section>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1><span>Quick Links</span></h1>
Home
About
Services
Careers
Contact
Quote
</div>
</div>
<div class="social">
<div class="inner">
<h1><span>Social</span></h1>
<i class="fab fa-linkedin"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter-square"></i>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send us some feedback..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1><span>Contact</span></h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete#fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
<script src="../script.js"></script>
</body>
</html>
#media (max-width: 686px) {
.table-wrap {
overflow-x: auto;
}
.table-wrap table {
min-width: 685px;
}
}
... seems to do the job.
Updated fiddle: https://jsfiddle.net/websiter/wg8au46o/
I need your help guys, I've created a form for creating Pay Bulletin and a form for editing. What i need is this:
Once i select emplyee_id the other textfield related popup with old data from DB if they are already entered; if not, i give them values and submit.
I am wondering how this can be done in Laravel??
Here is the code create.blade.php:
<form method="post" action="{{url('employeBultinDetails')}}">
{{csrf_field()}}
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="paie_id">Mois du paie:</label>
<select id="paie_id" name="paie_id" class="form-control">
#foreach($paies as $p)
<option value="{{$p->id}}">{{$p->mois}} - {{$p->annee}}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="employe_id"> Employee:</label>
<select id="employe_id" name="employe_id" class="form-control">
<option value="">Selectionner l'employé...</option>
#foreach($employes as $emp)
<option value="{{$emp->id}}">{{$emp->nni}} : {{$emp->nomComplet}}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<table>
<tr>
<th >Rubrique:</th>
<th >Montant:</th>
</tr>
#foreach($rubriques as $rub)
<tr>
<td>{{$rub->libelle}}</td>
<td>
<input type="text" class="form-control" name="montant[{{$rub->id}}]">
</td>
</tr>
#endforeach
</table>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<button type="submit" class="btn btn-success" style="margin-left:38px">Enregistrer</button>
</div>
</div>
</form>
#endsection
Try this code:
<form method="post" action="{{url('employeBultinDetails')}}">
{{csrf_field()}}
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="paie_id">Mois du paie:</label>
<select id="paie_id" name="paie_id" class="form-control">
#foreach($paies as $p)
<option value="{{$p->id}}">{{$p->mois}} - {{$p->annee}}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="employe_id"> Employee:</label>
<select id="employe_id" name="employe_id" class="form-control">
<option value="">Selectionner l'employé...</option>
#foreach($employes as $emp)
<option value="{{$emp->id}}">{{$emp->nni}} : {{$emp->nomComplet}}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<table>
<tr>
<th >Rubrique:</th>
<th >Montant:</th>
</tr>
#foreach($rubriques as $field => $rub)
<tr>
<td>{{$rub->libelle}}</td>
<td>
<input type="text" class="form-control" name="montant[{{$rub->id}}]" value="montant[{{old($field)}}]">
</td>
</tr>
#endforeach
</table>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<button type="submit" class="btn btn-success" style="margin-left:38px">Enregistrer</button>
</div>
</div>
</form>
#endsection
I have updated meteor project to 0.8.0 and have installed iron-router package. Did everything that is required but routing not happening. It is showing the front page i.e I am able to login into the application. But after that not able to go to any of the pages. My homepage have so many buttons as can be seen in header.html file. When I clicked on grumble link, in url it is displaying that "localhost:3000/grumble". But nothing is getting displayed on that form.
--> My router.js page is:
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function() {
this.route('issues', {path:'/'});
this.route('issues', {path:'/issues'});
this.route('closedIssues', {path:'/closedIssues'});
this.route('subscribedKeywords', {path:'/subscribedKeywords'});
//this.route('grumble');
//this.route('grumble2');
this.route('grumble', {path:'grumble'});
this.route('grumble2', {path:'grumble2'});
this.route('issuePage', {
path:'/issues/:_id',
data: function() {Session.set('currentIssueId', this.params); }
});
this.route('closedIssuePage', {
path:'/closedIssues/:_id',
data: function() { Session.set('currentClosedIssueId', this.params); }
});
});
var requireLogin = function() {
if ( Meteor.user())
this.render(this.params);
else if (Meteor.loggingIn())
this.render('loading');
else
this.render('accessDenied');
this.stop();
}
var clearErrors = function() {
clearErrors();
this.render(this.params);
this.stop();
}
Router.onBeforeAction(requireLogin, {only: 'grumble'});
Router.onBeforeAction(clearErrors);
--> Header.html file is from where grumble.html has been called meas href is present in this page to transfer the control:
<template name="header">
<header class="navbar">
<p>inside header.html</p>
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-coll
apse">
</a>
<a class="details btn" href="{{pathFor 'grumble'}}">Grumble</a>
{{#if currentUser}}
<a class="details btn" href="{{issuesPath}}">See Issues</a>
<a class="details btn" href="{{closedIssuesPath}}">Closed Issues</a>
<a class="details btn" href="{{subscribedKeywordsPath}}">Watchlist</a>
{{> notifications}}
{{/if}}
<span class="nav pull-right">
<li>{{> loginButtons}}</li> <!--should be {{> }} here in order to display login functionality-->
</span>
</div>
</header>
</template>
--> Grumble.html, the file to which control should be transferred means routing has been done for this page to get the control
<template name="grumble">
<p>inside form i.e. grumble.html</p>
<form class="main">
<fieldset>
<legend>New Grumble</legend>
<table border="0">
<tr>
<td>
<label class="control-label" for="shortdesc"><span style="color:red;">*</span> Description</label>
<input name="shortdesc" type="text" value="" placeholder="Radiator not working"/>
</td>
<td>
<label class="control-label" for="urgency">Urgency</label>
<select name="urgency" >
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
</td>
</tr>
<tr>
<td>
<label class="control-label" for="date">Date</label>
<input name="date" type="date" value="{{date}}" />
</td>
<td>
<label class="control-label" for="time">Time</label>
<input name="time" type="time" value="{{time}}" />
</td>
</tr>
<tr>
<td>
<label class="control-label" for="dept">Department/Building</label>
<input name="dept" type="text" value="" placeholder="Physiotherapy"/>
</td>
<td>
<label class="control-label" for="unit">Unit</label>
<input name="unit" type="text" value="" placeholder="Occupational Therapy"/>
</td>
</tr>
<tr>
<td>
<label class="control-label" for="room">Room</label>
<input name="room" type="text" value="" placeholder="P2"/>
</td>
<td>
<label class="control-label" for="category">Category</label>
<input name="category" type="text" value="" placeholder="Utility"/>
</td>
</tr>
<tr>
<td>
<label class="control-label" for="details">Details</label>
<textarea name="details" value="" placeholder="Broken radiator next to vending machine."></textarea>
</td>
<td>
<label class="control-label" for="anonymous">Anonymity</label>
<select name="anonymous" >
<option value="anonymous">Anonymous</option>
<option value="identifiable">Identifiable</option>
</select>
</td>
</tr>
</table>
<div class="control-group">
<div class="controls">
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>
</fieldset>
</form>
</template>
<template name="grumble2">
<form class="main">
<fieldset>
<legend>New Grumble</legend>
<table border="0">
<tr>
<td>
<label class="control-label" for="details"><span style="color:red;">*</span> Description</label>
<textarea name="details" value="" placeholder="Broken radiator next to vending machine."></textarea>
</td>
</tr>
</table>
<div class="control-group">
<div class="controls">
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>
</fieldset>
</form>
</template>
Please help me where I am wrong as have read the article : http://www.manuel-schoebel.com/blog/iron-router-tutorial. And tried to make changes but not working. Any pointers please.
I think the route this.route('issues', {path:'/issues'}); overwrites the route this.route('issues', {path:'/'}); (they have the same name!), so you have no route for /. Try changing name on one of them, and see if that makes a different.
You're missing a "/" in front of your grumble route path. It should be this.route('grumble', {path:'/grumble'})
A have a form in a table, and all my field sizes are fitting well. But I have one datefield that has an .input-group-addon, an that is making the size control not work very well. Is there a way to fix it?
I tried some ways to make a smaller input, but the addon stopped being attached:
http://jsfiddle.net/93MpC/1/
The code from Fiddle:
<div class="table-responsive">
<table class="table table-bordered">
<tr class="form-group">
<td><label class="field-label required-field">Name:</label></td>
<td><div class="input-group">
<input type="text" name="name" required id="id_name" class="form-control">
</div></td>
</tr>
<tr class="form-group">
<td><label class="field-label">Birthdate:</label></td>
<td><div class="input-group">
<input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div></td>
</tr>
<tr class="form-group">
<td><label class="field-label">Birthdate:</label></td>
<td><div class="input-group"><div class="row">
<div class="col-lg-2"><input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"></div>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div>
</div></td>
</tr>
<tr class="form-group">
<td><label class="field-label">Birthdate:</label></td>
<td><div class="input-group">
<div class="row">
<div class="col-lg-3">
<div class="col-lg-2"><input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"></div>
<div class="col-lg-1"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div>
</div>
</div>
</div></td>
</tr>
</table>
</div>
Thanks in advance!
The proper HTML for this requires another level of nesting. More information can be found in the input groups documentation.
The <td> with your sized input and addon should look like this:
<td class="row">
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</td>
The .col-* classes add padding left and right, so if that's a problem you can remove it with a little bit of CSS.
Taken from your code, I added a class half to the parent div. Here's the css:
.half {
width: 50%;
}
And the HTML (almost the same):
<div class="input-group half"><!-- here is .half -->
<input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Edit Or if you want to use col here's a different option:
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-3">Birthdate:</div>
<div class="col-md-9">
<div class="input-group">
<input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Example