i do this but not working for me
<div class="row form-group">
<div class="col-md-2">
<%='start_date'%><span class="necessary-field"> *</span>:
</div>
<div class="col-md-6 select">
<%= calendar_date_select_tag'start_date',#employee.job.start_date, :readonly=>true, :format=>:default, :popup=>"force", :class=>"form-control" %>
</div>
</div>
i used :readonly=>true but also not working
how for example to us (input )
Related
i have a form where i input restaurant details
#extends('layouts.app')
#section('content')
<html>
<head>
</head>
<body>
<h3 class="text-center"><u>Create Restaurant</u></h3>
<div class="container">
{!! Form::open(['action' => 'RestaurantsController#store','method'=>'POST','enctype'=>'multipart/form-data'])!!}
<div class="form-group">
{{Form::label('name','Name')}}
{{Form::text('name','',['class'=>'form-control','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('opening_time','Opening time')}}
{{Form::time('opening time','',['class'=>'form-control','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('closing_time','Closing time')}}
{{Form::time('closing time','',['class'=>'form-control','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('days_of_operation','Days of operation')}}
{{Form::text('days_of_operation','',['class'=>'form-control','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('website','Website')}}
{{Form::text('website','',['class'=>'form-control','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('email','Email')}}
{{Form::text('email',null,['class'=>'form-control','id'=>'menu','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('phone','Phone')}}
{{Form::text('phone',null,['class'=>'form-control','id'=>'phone','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('pysical_address','Physical address')}}
{{Form::textarea('physical_address','',['class'=>'form-control','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('lat','Latitude')}}
{{Form::number('lat',null,['class'=>'form-control','id'=>'lat','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('lon','Longitude')}}
{{Form::number('lon',null,['class'=>'form-control','id'=>'lon','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::file('cover_image')}}
</div>
{{-- {{Form::hidden('_method','POST')}} --}}
{{Form::submit('submit',['class'=>'btn btn-primary','type'=>'submit','id'=>'submit'])}}
{!! Form::close() !!}
</div>
</body>
</html>
#endsection
i need to save lattitude,longitude,restaurant id in coordinates table
i need to save the following details in restaurants table
$restaurant=new Restaurant;
$restaurant->name= $request->input('name');
$restaurant->opening_time=$request->input('opening_time');
$restaurant->physical_address=$request->input('physical_address');
$restaurant->closing_time=$request->input('closing_time');
$restaurant->days_of_operation=$request->input('days_of_operation');
$restaurant->website=$request->input('website');
$restaurant->email=$request->input('email');
$restaurant->phone=$request->input('phone');
$restaurant->cover_image=$fileNameToStore;
$restaurant->save();
how do i go about it?
How do i query restaurants that are near a user's location? I know how to get the current users longitude and lattitude and then?
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 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!
This question already has answers here:
How to create a printable Twitter-Bootstrap page
(9 answers)
Closed 7 years ago.
I'm trying to print a document, that is formed with bootstrap. Requirement is that print should look well/nice. (Because this document is archivised)
The problem is, I've done a table, that is made full of controls (input fields).
It's simple drug prescription formula, and the doctor can prescribe as many drugs as he wants.
In the web browser it looks good:print-browser
But, when I want to print it... it breaks: print-printer.
The code, looks like this:
<div class="row">
<div class="col-sm-3 text-center">
<label>Wpisz nazwę leku</label>
</div>
<div class="row col-sm-9">
<div class="col-sm-3 text-center">
<label>Dawka startowa</label>
</div>
<div class="col-sm-3 text-center">
<label>Dawka docelowa</label>
</div>
<div class="col-sm-3 text-center">
<label>Dawka docelowa od</label>
</div>
<div class="col-sm-2 text-center">
<label>Dawka max. (tolerowana)</label>
</div>
<div class="col-sm-1 text-center">
<label for="deleteDrug">Usuń</label>
</div>
</div>
</div>
<div class="row" ng-repeat="drug in visit.prescribedDrugs">
<div class="col-sm-3">
<select class="form-control" ng-options="drug.id as drug.name group by getDrugFullTypeName(drug) for drug in technical.drugs track by drug.id"
ng-model="drug.drugItemId"></select>
</div>
<div class="row col-sm-9">
<div class="col-sm-3">
<div class="input-group">
<input id="PrescribedTargetDose" class="form-control" type="text" ng-model="drug.initialDose">
<div class="input-group-addon input-sm">{{technical.drugs[drug.drugItemId].dosage}}</div>
</div>
</div>
<div class="col-sm-3">
<div class="input-group">
<input id="PrescribedTargetDose"
class="form-control"
type="text"
ng-model="drug.targetDose"
ng-disabled="!technical.drugs[drug.drugItemId].isAccelerated">
<div class="input-group-addon input-sm">{{technical.drugs[drug.drugItemId].dosage}}</div>
</div>
</div>
<div class="col-sm-3">
<p class="input-group ">
<input type="text"
name="PrescribedDrugCalendar"
id="newPrescribedDrugCalendar"
class="form-control"
datepicker-popup="yyyy-MM-dd"
ng-model="drug.targetDoseFrom[$index]"
is-open="isPrescribedTargetDoseFromCalendarOpened[$index]"
close-text="Zamknij"
placeholder="rrrr-mm-dd"
current-text="Dzisiaj"
clear-text="Wyczyść"
ng-disabled="!technical.drugs[drug.drugItemId].isAccelerated" />
<!--ng-required="true"-->
<span class="input-group-btn hidden-print">
<button class="btn btn-default"
ng-click="openPrescribedTargetDoseFromCalendar($event, $index)"
ng-disabled="!technical.drugs[drug.drugItemId].isAccelerated">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
<div class="col-sm-2 text-center">
<input type="checkbox" id="CBisEffectivelyMaximalForPrescription" ng-model="drug.isEffectivelyMaximal">
</div>
<div class="col-sm-1 text-center hidden-print">
<button type="button"
class="btn btn-default text-center"
ng-click="removePrescribedDrug($index)"
ng-disabled="visit.prescribedDrugs.length==1">
<span class="glyphicon glyphicon-minus text-center" aria-hidden="true"></span> Usuń
</button>
</div>
</div>
</div>
And description for it:
I have labelled row:
Wpisz nazwę leku
<div class="col-sm-3 text-center">
<label>Dawka startowa</label>
</div>
<div class="col-sm-3 text-center">
<label>Dawka docelowa</label>
</div>
<div class="col-sm-3 text-center">
<label>Dawka docelowa od</label>
</div>
<div class="col-sm-2 text-center">
<label>Dawka max. (tolerowana)</label>
</div>
<div class="col-sm-1 text-center">
<label for="deleteDrug">Usuń</label>
</div>
</div>
</div>
And control row: which goes like:
Input field (select)
Input field (integer)
Input field (integer - activity based on buisness logic)
Calendar
Checkbox
Remove item button - it's hidden print.
But, it won't print as rows - instead of it creates as many rows, as many controls.
Where I have made mistake? I'm quite new in bootstrap/angular but I've read topics about printing.
In the index page I have:
<link href="Content/bootstrap.min.css" rel="stylesheet" media="all"/>
And i also tried to make my custom.css file with media="print" - but I don't know how to fix this problem.
Edit: Also - how to delete this little cursor on input fields, fe. This -> http://imgur.com/dFMVKQY
did you tried adding a print stylesheet ?
<link rel="stylesheet" type="text/css" media="print" href="print.css">
More info.
When I view my project on a desktop all the dropdowns are aligned and flush which looks really nice, when I minimize the browser to view on a mobile this is what it looks like,
As you can see all the dropdowns are difference sizes, I'm not sure how this happened? I'm aware it takes into considering the content you have in each i.e how long each word is but is there a safe way within bootstrap I can achieve a fixed width for all dropdowns wether its being viewed on a mobile/tablet or desktop? this is my current markup for the above picture
<div class="row col-lg-12">
<div class="col-lg-5">
<div class="form-group">
<label class="col-lg-4 control-label">Country</label>
<div class="col-lg-8 input-group">
#Html.DropDownListFor(m => m.UserDetails.SelectedCountry, Model.UserDetails.ListCountries, "Please Select Country", new { #class = "form-control", onchange = "javascript:this.form.submit();" })
</div>
</div>
</div>
<div class="col-lg-1"></div>
<div class="col-lg-5">
<div class="form-group">
<label class="col-lg-4 control-label">State</label>
<div class="col-lg-8 input-group">
#Html.DropDownListFor(m => m.UserDetails.SelectedState, Model.UserDetails.ListStates, new { #class = "form-control", onchange = "javascript:this.form.submit();" })
</div>
</div>
</div>
<div class="col-lg-1"></div>
</div>
<div class="row col-lg-12">
<div class="col-lg-5">
<div class="form-group">
<label class="col-lg-4 control-label">City</label>
<div class="col-lg-8 input-group">
#Html.DropDownListFor(m => m.UserDetails.SelectedCity, Model.UserDetails.ListCities, new { #class = "form-control" })
</div>
</div>
</div>
<div class="col-lg-1"></div>
<div class="col-lg-5">
<div class="form-group">
<label class="col-lg-4 control-label">Postcode</label>
<div class="col-lg-8 input-group">
#Html.TextBoxFor(m => m.UserDetails.Postcode, new { #class = "form-control", Placeholder = "Your Postcode", maxlength = "12" })
</div>
</div>
</div>
<div class="col-lg-1"></div>
</div>
Should work since according to the Bootstrap example, any control with the .form-control class should have width:100% by default.
I noticed an issue with your class assignments for the rows though. It should look like so:
<div class="row">
...
</div>
and NOT:
<div class="row col-lg-12">
...
</div>
Let me know if that helps!