I am writing a spring MVC application and I want to use Vue for my front end. I am trying to use the x-templates to render my components but for some reason it doesn't work and the Vue devtools are not detecting any Vue.js on the page. I managed to get Vue.js working on my index.jsp file but it doesnt work for my hotels,jsp file.
main.js:
let getJsonData = (url)=>{
let result = [];
$.getJSON(url, (data)=>{
data.forEach((x)=>{
result.push(x);
});
})
return result;
};
Vue.component('hotel', {
template: '#hotel-template',
data:function(){
return {
msg:'Yoshi'
}
}
})
let app = new Vue({
el:'#app',
data:{
navLinks:[
{
name:'login',
path:'/login'
},
{
name:'sign up',
path:''
}
],
countries:[],
allHotels:getJsonData('./hotels'),
}
})
header.jsp:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="/css/main.css" rel="stylesheet"/>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul class="nav">
<li class="nav-item" v-for="link in navLinks">
<a class="nav-link" v-bind:href="link.path">{{link.name}}</a>
</li>
</ul>
<div class="container">
footer.jsp:
</div>
</div>
</body>
<script src="/js/main.js"></script>
</html>
index.jsp:
<%#include file = "header.jsp" %>
<header class="jumbotron">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h1 class="display-1">Bon voyage!</h1>
<p> Dear <strong>${user}</strong>, Welcome to ${user} Page.
Logout</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<select id="country_select">
<option>Choose country</option>
</select>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</header> <!--end of jumbotron -->
<main>
<div class="row">
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<h4>Hotel name</h4>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<h4>Hotel Country</h4>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<h4>Hotel City</h4>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<h4>Hotel address</h4>
</div>
</div>
<hr>
<div v-for="hotel in allHotels" class="row">
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<a v-bind:href='"./hotel/" + hotel.id'>{{ hotel.name }}</a>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
{{ hotel.country }}
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
{{ hotel.city }}
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
{{ hotel.address }}
</div>
</div>
</main>
<!-- reviews
hotel requests
hotels-->
<%#include file = "footer.jsp" %>
hotels.jsp:
<%#include file = "header.jsp" %>
<script type="text/x-template" id="#hotel-template">
<header>
<h1>{{ msg }}</h1>
</header>
</script>
<%#include file = "footer.jsp" %>
I didnt manage to fins a solution to my problem, However I found an alternative that worked. Vue.js also has inline templates that has the same functionality as x-templates. A solution was to to put the following tag:
<hotel></hotel>
with the inline-template attribute with it. The end result would look like this
<hotel inline-template></hotel>
You should load vue.js just before the tag, not in the head area.
This will allow you to use the template: with your template in backticks (``) - that way you can have a multi-line template without having to build it as a string.
Related
I want to use a push, pull in Bootstrap v5.0.0-beta2, but how?
In Bootstrap 3, I'm using it like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
I tried. But I can't. Here is my JSFiddle
In Bootstrap V5, how can I use push and pull?
Please help.
Thanks in advance.
Push/pull is a grid technique. That's now deprecated in favour of flex.
For flex the helper classes are .order-. See BS5 Columns documentation.
You can use global ordering:
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
Or screen size specific ... i.e. .order-sm-*, .order-lg-*, and so on.
If you just want to shift, then use Offsetting Columns
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
EDIT:
In your case you can use:
<div class="row">
<div class="col-md-9 order-last">.col-md-9 <del>.col-md-push-3</del><ins>order-last</ins></div>
<div class="col-md-3 order-first">.col-md-3 <del>.col-md-pull-9</del><ins>order-first</ins></div>
</div>
or:
<div class="row">
<div class="col-md-9 order-2">.col-md-9 <del>.col-md-push-3</del><ins>order-2</ins></div>
<div class="col-md-3 order-1">.col-md-3 <del>.col-md-pull-9</del><ins>order-1</ins></div>
</div>
This is HTML-code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<header>
<div id="menu" class="row no-gutter menu">
<div class="col-md-3 offset-md-1">
<img src="img/logo.png">
</div>
<div class="col-md-8">
<nav class="d-flex flex-row-reverse">
<ul class="p-2">
<li>
Improves
</li>
<li>
Projects
</li>
<li>
<a id="about" href="">About</a>
</li>
<li>
Home
</li>
</ul>
</nav>
</div>
</div>
<div class="row no-gutter">
<div class="hellopage">
<div class="col-md-10 offset-md-1 hello">
<font>
Hello.
</font>
<br>
<div class="mynameis">
My name is
<div class="name">
DENIS,
</div>
</div>
<div class="whoami">
I am a web-desihner, and front-end developer, and a person, who interested in IT.
</div>
<div class="quality">
Quality is a main parametr for me.
</div>
<div class="classcol-md-5 offset-md-4">
<button class="bnative1" id="button">
FOLLOW ME
</button>
</div>
</div>
</div>
</div>
</header>
<!-- Второй блок -->
<div class="container-fluid">
<div id="sb" class="row no-gutter sb">
<div class="col-md-6 offset-md-3 text-center whatcani">
What can I offer for you?
</div>
<div class="col-md-3 offset-md-1 pic1 ">
<img src="img/adopt.png">
<div class="txt1">
<div class="top1">Adaptive Web-Design</div>
<div>I always use adaptive</div>
<div>design.Usually,web-site</div>
<div>is an advertisment</div>
<div>for big set of companies.</div>
<div>It have to be focused on</div>
<div>client and must be</div>
<div>correctly displayed in all</div>
<div>devices</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic2">
<img src="img/hands.png">
<div class="txt2">
<div class="top2">Indivigual aproach</div>
<div>I always interact with</div>
<div>the customer and ready</div>
<div>to give some advice,</div>
<div>based on my experience</div>
<div>to make web-site better</div>
<div>and user-friendly</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic3">
<img src="img/calendar.png">
<div class="txt3">
<div class="top3">Completion on time</div>
<div>The project will be</div>
<div>compleated on time,</div>
<div>and a work plan will be</div>
<div>provided for the</div>
<div>customer</div>
</div>
</div>
<div class="col-md-8 offset-md-2 line">
<hr>
</div>
</div>
</div>
<!-- Третий блок -->
<div id="me" class="row no-gutter tb">
<div class="col-md-3 offset-md-4 text-center aboutme">
About me
</div>
<div class="col-md-10 offset-md-1 txtab">
<div>I started my career as a system administrator(2016). At work I</div>
<div>recieved a lot of skills, that helps me to deal every issue. Because</div>
<div>there are exist an issues, that you can't solve by using internet. For</div>
<div>example I worked with special software for MRI.</div>
</div>
<div class="col-md-4 offset-md-1 whiteone">
<img src="img/white.png">
</div>
<div class="col-md-6 nowi">
Now I am <span class="wd">WEB DESIGNER</span>
</div>
<div class="col-md-9 offset-md-1 person">
And a person, who ready to make <span class="cool">COOL</span> web-site for you.
</div>
<div class="col-md-4 offset-md-7 d-flex flex-row-reverse">
<img class="whitetwo" src="img/white.png">
</div>
</div>
<!-- Четвертый блок -->
<div class="row no-gutter fob">
<div class="col-md-5 offset-md-3 text-center inmy">
In my projects I use
</div>
<div class="col-md-4 offset-md-1 desone">
<img src="img/gapps.png">
<div class="tech1">
<div>I use graphical applications to</div>
<div>make a template for your website.</div>
<div>This is the first step. Here we can</div>
<div>coose a colors, that will be used</div>
<div>in web-site</div>
</div>
</div>
<div class="col-md-6 destwo">
<img src="img/site.png">
<div class="tech1">
<div>To make web-page, I use HTML,CSS, JS, Less. Here I</div>
<div>can make animation, that can make your website</div>
<div>alive.</div>
</div>
</div>
<div class="col-md-10 offset-md-1 technologies">
<div>I always <span class="devmy">DEVELOPE</span> myself, learn new technologies and</div>
</div>
<div class="col-md-4 offset-md-7 inmy"><span class="use">USE</span> it in my projects</div>
</div>
<!-- Футер -->
<div class="row no-gutter foot">
<div class="col-md-4 offset-md-1 social">
<img src="img/email.png">
den_lupanov#mail.ru
<div class="fb">
<img src="img/facebook.png">
https://www.facebook.com/den.necris
</div>
</div>
<div class="col-md-1 offset-md-5 gototop">
<img id="up" src="img/up.png">
</div>
</div>
</div>
</div>
</body>
</html>
'''
I have a code:
window.onload = function(){
// Изменение цвета при наведении на кнопку
var button = document.getElementById("button");
button.addEventListener("mouseenter", function(){
button.classList.remove("bnative1");
button.classList.add("buttonclass1");
});
button.addEventListener("mouseleave", function(){
button.classList.remove("buttonclass1");
button.classList.add("bnative1");
})
// Scroll to the first element(Works ok)
document.getElementById("button").addEventListener("click", scrollToElement);
function scrollToElement(e){
element = document.getElementById("sb");
element.scrollIntoView({behavior: 'smooth', block: "start",});
}
//Scroll to another element(ERROR)
document.getElementById("up").addEventListener("click", scrollToTop);
function scrollToTop(e){
top = document.getElementById("menu");
top.scrollIntoView({behavior: 'smooth', block: "start"});
}
}
'''
Finally, when I click on the second element for scrolling, in debugger I recieve an error:"Uncaught TypeError: top.scrollIntoView is not a function
at HTMLImageElement.scrollToTop (script.js:22)". It should works properly, but I don't understand why it doen not working
you just needed to define "top". add var and your code works!
window.onload = function(){
}
// Изменение цвета при наведении на кнопку
var button = document.getElementById("button");
button.addEventListener("mouseenter", function(){
button.classList.remove("bnative1");
button.classList.add("buttonclass1");
});
button.addEventListener("mouseleave", function(){
button.classList.remove("buttonclass1");
button.classList.add("bnative1");
})
// Scroll to the first element(Works ok)
document.getElementById("button").addEventListener("click", scrollToElement);
function scrollToElement(e){
element = document.getElementById("sb");
element.scrollIntoView({behavior: 'smooth', block: "start",});
}
//Scroll to another element(ERROR)
document.getElementById("up").addEventListener("click", scrollToTop);
function scrollToTop(e){
var top = document.getElementById("menu");
top.scrollIntoView({behavior: 'smooth', block: "start"});
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<header>
<div id="menu" class="row no-gutter menu">
<div class="col-md-3 offset-md-1">
<img src="img/logo.png">
</div>
<div class="col-md-8">
<nav class="d-flex flex-row-reverse">
<ul class="p-2">
<li>
Improves
</li>
<li>
Projects
</li>
<li>
<a id="about" href="">About</a>
</li>
<li>
Home
</li>
</ul>
</nav>
</div>
</div>
<div class="row no-gutter">
<div class="hellopage">
<div class="col-md-10 offset-md-1 hello">
<font>
Hello.
</font>
<br>
<div class="mynameis">
My name is
<div class="name">
DENIS,
</div>
</div>
<div class="whoami">
I am a web-desihner, and front-end developer, and a person, who interested in IT.
</div>
<div class="quality">
Quality is a main parametr for me.
</div>
<div class="classcol-md-5 offset-md-4">
<button class="bnative1" id="button">
FOLLOW ME
</button>
</div>
</div>
</div>
</div>
</header>
<!-- Второй блок -->
<div class="container-fluid">
<div id="sb" class="row no-gutter sb">
<div class="col-md-6 offset-md-3 text-center whatcani">
What can I offer for you?
</div>
<div class="col-md-3 offset-md-1 pic1 ">
<img src="img/adopt.png">
<div class="txt1">
<div class="top1">Adaptive Web-Design</div>
<div>I always use adaptive</div>
<div>design.Usually,web-site</div>
<div>is an advertisment</div>
<div>for big set of companies.</div>
<div>It have to be focused on</div>
<div>client and must be</div>
<div>correctly displayed in all</div>
<div>devices</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic2">
<img src="img/hands.png">
<div class="txt2">
<div class="top2">Indivigual aproach</div>
<div>I always interact with</div>
<div>the customer and ready</div>
<div>to give some advice,</div>
<div>based on my experience</div>
<div>to make web-site better</div>
<div>and user-friendly</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic3">
<img src="img/calendar.png">
<div class="txt3">
<div class="top3">Completion on time</div>
<div>The project will be</div>
<div>compleated on time,</div>
<div>and a work plan will be</div>
<div>provided for the</div>
<div>customer</div>
</div>
</div>
<div class="col-md-8 offset-md-2 line">
<hr>
</div>
</div>
</div>
<!-- Третий блок -->
<div id="me" class="row no-gutter tb">
<div class="col-md-3 offset-md-4 text-center aboutme">
About me
</div>
<div class="col-md-10 offset-md-1 txtab">
<div>I started my career as a system administrator(2016). At work I</div>
<div>recieved a lot of skills, that helps me to deal every issue. Because</div>
<div>there are exist an issues, that you can't solve by using internet. For</div>
<div>example I worked with special software for MRI.</div>
</div>
<div class="col-md-4 offset-md-1 whiteone">
<img src="img/white.png">
</div>
<div class="col-md-6 nowi">
Now I am <span class="wd">WEB DESIGNER</span>
</div>
<div class="col-md-9 offset-md-1 person">
And a person, who ready to make <span class="cool">COOL</span> web-site for you.
</div>
<div class="col-md-4 offset-md-7 d-flex flex-row-reverse">
<img class="whitetwo" src="img/white.png">
</div>
</div>
<!-- Четвертый блок -->
<div class="row no-gutter fob">
<div class="col-md-5 offset-md-3 text-center inmy">
In my projects I use
</div>
<div class="col-md-4 offset-md-1 desone">
<img src="img/gapps.png">
<div class="tech1">
<div>I use graphical applications to</div>
<div>make a template for your website.</div>
<div>This is the first step. Here we can</div>
<div>coose a colors, that will be used</div>
<div>in web-site</div>
</div>
</div>
<div class="col-md-6 destwo">
<img src="img/site.png">
<div class="tech1">
<div>To make web-page, I use HTML,CSS, JS, Less. Here I</div>
<div>can make animation, that can make your website</div>
<div>alive.</div>
</div>
</div>
<div class="col-md-10 offset-md-1 technologies">
<div>I always <span class="devmy">DEVELOPE</span> myself, learn new technologies and</div>
</div>
<div class="col-md-4 offset-md-7 inmy"><span class="use">USE</span> it in my projects</div>
</div>
<!-- Футер -->
<div class="row no-gutter foot">
<div class="col-md-4 offset-md-1 social">
<img src="img/email.png">
den_lupanov#mail.ru
<div class="fb">
<img src="img/facebook.png">
https://www.facebook.com/den.necris
</div>
</div>
<div class="col-md-1 offset-md-5 gototop">
<img id="up" src="img/up.png">
</div>
</div>
</div>
Other than using it like that it might be better to make it one function and use it in the HTML.
The following code should work like a charm:
function scrollSmoothTo(elementId) {
var element = document.getElementById(elementId);
element.scrollIntoView({ block: 'start', behavior: 'smooth' });
}
And, in HTML use it like that:
<a class="btn-outline-light" onclick="scrollSmoothTo('work')">See our work</a>
I'm having the following problem in my form has two dates of type varchar
<div class="row clearfix">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-5 form-control-label">
<label for="areareal_cadastro">Cadastrado em</label>
</div>
<div class="col-lg-8 col-md-10 col-sm-8 col-xs-7">
<div class="form-group">
<div class="form-line">
<input type="text" id="areareal_cadastro" name="areareal_cadastro" value="<?= $construct_areareal['areareal_cadastro']; ?>" class="form-control">
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-5 form-control-label">
<label for="areareal_atualizar">Atualizado em</label>
</div>
<div class="col-lg-8 col-md-10 col-sm-8 col-xs-7">
<div class="form-group">
<div class="form-line">
<input type="text" id="areareal_atualizar" name="areareal_atualizar" value="<?= $construct_areareal['areareal_atualizar']; ?>" class="form-control">
</div>
</div>
</div>
</div>
But in the console I get the following error, being that I'm not declaring this variable anywhere.
try this js use library too.
$('#input_id').bootstrapMaterialDatePicker({ weekStart : 0, time: false });
You Have to add Below CSS and Javascript
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="js/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-1.11.2.min.js"></script></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
I want to use color picker in my form and i have tried below code in my project but its not working. Anything wrong with the code?,
In view blade,
#extends('layouts.blank')
#push('stylesheets')
<link href="https://maxcdn.bootstrapcdn.com/bootstrap
/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/css/bootstrap-colorpicker.min.css" rel="stylesheet">
#endpush
#section('main_container')
<div class="main-content">
<!-- page content -->
<div id="page-wrapper">
<div class="tab-pane active" id="horizontal-form">
<h3 class="blank1">Vehicle Details</h3>
{!! Form::open(array('class' => 'form-horizontal','route' =>
'vehicles.store','method'=>'POST')) !!}
<script type="text/javascript">
$('.colorpicker').colorpicker();
</script>
<div class="row">
<div id="cp2" class="input-group colorpicker colorpicker-component">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-6">
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
{{ Form::close() }}
</div>
</div>
</div>
</div>
#endsection
#pushonce('custom-scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
</script>
#endpushonce
I got an empty text box not showing the color.Is there any problem with including css or js files.
How can I solve this ?Can anyone help?
I have used the scripts through #yield scripts then it worked.
You can try this it's worked fine!
<html lang="en">
<head>
<title>Bootstrap Color Picker Plugin Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/css/bootstrap-colorpicker.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/js/bootstrap-colorpicker.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Color Picker Plugin Example</h1>
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
</div>
<script type="text/javascript">
$('#cp2').colorpicker();
</script>
</body>
</html>
Make like this
<div class="main-content">
<!-- page content -->
<div id="page-wrapper">
<div class="tab-pane active" id="horizontal-form">
<h3 class="blank1">Vehicle Details</h3>
{!! Form::open(array('class' => 'form-horizontal','route' =>
'vehicles.store','method'=>'POST')) !!}
<script type="text/javascript">
$('#cp2').colorpicker();
</script>
<div class="row">
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="colorpicker form-control" />
<span class="input-group-addon"><i></i></span>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-6">
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
{{ Form::close() }}
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>
I am trying to make simple demo as given in image ![enter image description here][1]
I am able to display contend in view .But I am facing few issue in making this page
how to add background image in contend .I don't have same background image but I have similar background image in this url
how to make text align left in application .The end character in a sigle line .how to make all label left align.
how to add separator line in grid view .Actually In all row separator are present.
here is my code
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
</body>
<ion-view>
<ion-header-bar align-title="center" class="bar-balanced">
<div class="buttons" style="font-size:20px ;padding:3px">
<i style="font-size:30px;" class='icon ion-chevron-left'></i>
</div>
<h1 class="title">Account</h1>
</ion-header-bar>
<ion-content>
<div class="button-bar">
<a class="button button-small" ui-sref="a" ui-sref-active="button-balanced">Account Details</a>
<a class="button button-small" ui-sref="l" ui-sref-active="button-balanced">Related</a>
<a class="button button-small" ui-sref="dinner" ui-sref-active="button-balanced">d</a>
<a class="button button-small" ui-sref="dinner" ui-sref-active="button-balanced">Notes</a>
</div>
<div>
<h4 class="headerTitle">Account Information</h4>
<div class="row rowoffset">
<div class="col gey_label_font">Number:</div>
<div class="col">0981234165</div>
<div class="col"></div>
<div class="col gey_label_font">Name:</div>
<div class="col">Girish Padhve</div>
</div>
<div class="row rowoffset">
<div class="col gey_label_font">Owner:</div>
<div class="col">Girish</div>
<div class="col"></div>
<div class="col gey_label_font">Total AR:</div>
<div class="col">345</div>
</div>
<div class="row rowoffset">
<div class="col gey_label_font">Last:</div>
<div class="col">123</div>
<div class="col"></div>
<div class="col gey_label_font">Last ] Amount:</div>
<div class="col">9891234165</div>
</div>
<div class="row rowoffset">
<div class="col gey_label_font"> Net Collectible:</div>
<div class="col">123</div>
<div class="col"></div>
<div class="col gey_label_font">Past Due:</div>
<div class="col">9891234165</div>
</div>
<div class="row rowoffset">
<div class="col gey_label_font"> Total Past Due:</div>
<div class="col">123</div>
<div class="col"></div>
<div class="col gey_label_font">Total Promised:</div>
<div class="col">9891234165</div>
</div>
<div class="row rowoffset">
<div class="col gey_label_font">Total Disputed:</div>
<div class="col">123</div>
<div class="col"></div>
<div class="col gey_label_font">Limit:</div>
<div class="col">9891234165</div>
</div>
<div class="row rowoffset">
<div class="col gey_label_font">Remaining:</div>
<div class="col">123</div>
<div class="col gey_label_font"></div>
<div class="col">Credit Score:</div>
<div class="col">9891234165</div>
</div>
</div>
</ion-content>
</ion-view>
</html>
The columns in your codepen already look aligned left to me, so I assume you worked that out. As for the background image and the separator lines, you can use these css rules: http://codepen.io/anon/pen/YXNVvv
#wrapper {
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
}
.rowoffset{
border-top: 1px solid gray;
}
.gey_label_font{
text-align: right;
}