i am trying to fetch orders record from order model and passing as a context into template
but in template problem occurs when i use a loop inside a loop such as
{% for o in objects %}
{% for p in o %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{p.img.url}}</td>
<td>{{o.date}}</td>
<td>{{p.price}}</td>
{% if o.order_status == 'completed' %}
<td><small style="background-color:green;"><span class="badge badge-success">{{o.order_status}}</span></small></td>
{% else %}
<td><small style="background-color:rgb(231, 211, 26);"><span class="badge badge-warning">{{o.order_status}}</span></small></td>
{% endif %}
</tr>
{% endfor %}
{% endfor %}
i am fetching products related to a particular order object and passing as a context with the as that particular order object
such as
context=OrderProduct.fetch_customer_order_products(customer)
OrderProduct.py model
from django.db.models.deletion import DO_NOTHING
from django.shortcuts import get_object_or_404
from django.db.models import Case, When
from django.db import models
from django.db.models.fields.related import ForeignKey
from .order import Order
from .products import Products
from .customer import Customer
class OrderProduct(models.Model):
order = models.ForeignKey(Order, on_delete=models.CASCADE)
product = models.ForeignKey(Products, on_delete=models.DO_NOTHING)
customer = models.ForeignKey(Customer, on_delete=DO_NOTHING, default="")
quantity = models.IntegerField()
def __str__(self):
return self.product.name
#staticmethod
def fetch_customer_order_products(cust):
obj = Order.objects.filter(customer=cust)
dict = {}
context={}
for o in obj:
l = []
id = o.id
prods = list(Order.objects.filter(id=id).values('products'))
for a in range(0,len(prods)):
l.append(prods[a]['products'])
dict[o] = l
prods = list(Products.objects.filter(id__in=l)) # to be passed as context
context[o]=prods
context['objects'] = obj
return context
order.py model
from django.db import models
from django.db.models.enums import Choices
from django.db.models.fields.related import ManyToManyField
from .customer import Customer
from .products import Products
from .payment_method import Payment_method
from datetime import datetime
Order_status_choices = (
('created', 'Created'),
('approved', 'Approved'),
('paid','Paid'),
('packaged','Packaged'),
('shipped','Shipped'),
('completed','Completed'),
)
class Order(models.Model):
name = models.CharField(max_length=20, default="")
products = models.ManyToManyField(Products)
customer = models.ForeignKey(Customer, on_delete=models.DO_NOTHING)
address = models.CharField(max_length=100, default='')
order_status = models.CharField(max_length=20, choices = Order_status_choices, default='created')
shipping_address = models.CharField(max_length=100, default='')
phno = models.BigIntegerField(default=00000000000)
email = models.EmailField(default="")
date = models.DateTimeField(default=datetime.now,blank=True)
price = models.IntegerField(default=0)
payment_method = models.ForeignKey(Payment_method, on_delete=models.DO_NOTHING, null=True)
name_additional = models.CharField(max_length=20, null=True,blank=True)
phno_additional = models.BigIntegerField(null=True, blank=True)
def __str__(self):
return self.name
#staticmethod
def get_order_by_customer_id(customer):
return Order.objects.filter(customer=customer)
myaccount.html file
{% extends 'base.html' %}
{% load static %}
{% load cart %}
{% block content %}
<!-- Breadcrumb Start -->
<div class="breadcrumb-wrap">
<div class="container-fluid">
<ul class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Products</li>
<li class="breadcrumb-item active">My Account</li>
</ul>
</div>
</div>
<!-- Breadcrumb End -->
<!-- My Account Start -->
<div class="my-account">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="dashboard-nav" data-toggle="pill" href="#dashboard-tab" role="tab"><i class="fa fa-tachometer-alt"></i>Dashboard</a>
<a class="nav-link" id="orders-nav" data-toggle="pill" href="#orders-tab" role="tab"><i class="fa fa-shopping-bag"></i>Orders</a>
<a class="nav-link" id="payment-nav" data-toggle="pill" href="#payment-tab" role="tab"><i class="fa fa-credit-card"></i>Payment Method</a>
<a class="nav-link" id="address-nav" data-toggle="pill" href="#address-tab" role="tab"><i class="fa fa-map-marker-alt"></i>address</a>
<a class="nav-link" id="account-nav" data-toggle="pill" href="#account-tab" role="tab"><i class="fa fa-user"></i>Account Details</a>
<a class="nav-link" href="index.html"><i class="fa fa-sign-out-alt"></i>Logout</a>
</div>
</div>
<div class="col-md-9">
<div class="tab-content">
<div class="tab-pane fade show active" id="dashboard-tab" role="tabpanel" aria-labelledby="dashboard-nav">
<h4>Dashboard</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum quam ac mi viverra dictum. In efficitur ipsum diam, at dignissim lorem tempor in. Vivamus tempor hendrerit finibus. Nulla tristique viverra nisl, sit amet bibendum ante suscipit non. Praesent in faucibus tellus, sed gravida lacus. Vivamus eu diam eros. Aliquam et sapien eget arcu rhoncus scelerisque.
</p>
</div>
<div class="tab-pane fade" id="orders-tab" role="tabpanel" aria-labelledby="orders-nav">
<div class="table-responsive">
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th>Sno</th>
<th>image</th>
<th>DateTime</th>
<th>price</th>
<th>Order Status</th>
</tr>
</thead>
<tbody>
{% for o in objects %}
{% for p in o %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{p.img.url}}</td>
<td>{{o.date}}</td>
<td>{{p.price}}</td>
{% if order.order_status == 'completed' %}
<td><small style="background-color:green;"><span class="badge badge-success">{{order.order_status}}</span></small></td>
{% else %}
<td><small style="background-color:rgb(231, 211, 26);"><span class="badge badge-warning">{{order.order_status}}</span></small></td>
{% endif %}
</tr>
{% endfor %}
{% endfor %}
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="payment-tab" role="tabpanel" aria-labelledby="payment-nav">
<h4>Payment Method</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum quam ac mi viverra dictum. In efficitur ipsum diam, at dignissim lorem tempor in. Vivamus tempor hendrerit finibus. Nulla tristique viverra nisl, sit amet bibendum ante suscipit non. Praesent in faucibus tellus, sed gravida lacus. Vivamus eu diam eros. Aliquam et sapien eget arcu rhoncus scelerisque.
</p>
</div>
<div class="tab-pane fade" id="address-tab" role="tabpanel" aria-labelledby="address-nav">
<h4>Address</h4>
<div class="row">
<div class="col-md-6">
<h5>Payment Address</h5>
<p>123 Payment Street, Los Angeles, CA</p>
<p>Mobile: 012-345-6789</p>
<button class="btn">Edit Address</button>
</div>
<div class="col-md-6">
<h5>Shipping Address</h5>
<p>123 Shipping Street, Los Angeles, CA</p>
<p>Mobile: 012-345-6789</p>
<button class="btn">Edit Address</button>
</div>
</div>
</div>
<div class="tab-pane fade" id="account-tab" role="tabpanel" aria-labelledby="account-nav">
<h4>Account Details</h4>
<div class="row">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="profile-container">
{% if profile.img %}
<img width="50" height="70" id="profileImage" src="{{profile.img.url}}" />
{% else %}
<img width="50" height="70" id="profileImage" src="https://p1.pxfuel.com/preview/423/292/62/girl-studio-female-woman-profile-black-and-white.jpg" />
{% endif %}
</div><br><br><br><br><br><br>
<form action="/my-account" method="post" enctype="multipart/form-data">
{% csrf_token %}
{{form.as_p}}
{% if request.session.customer|check_customer_profile %}
<div class="col-md-12">
<button type="submit" class="btn">update profile</button>
<br><br>
</div>
{% else %}
<div class="col-md-12">
<button type="submit" class="btn">Create profile</button>
<br><br>
</div>
{% endif %}
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- My Account End -->
{% endblock %}
myaccount.py
from django.utils.decorators import method_decorator
from ..middlewares.authorization import auth_middleware
from store.models.customer import Customer
from django.views import View
from django.shortcuts import render,redirect
from ..models.order import Order
from ..models.orderproduct import OrderProduct
from ..models.profile import Profile
from ..forms.ProfileForm import ProfileForm
class MyAccount(View):
#method_decorator(auth_middleware)
def get(self, request):
customer = request.session.get('customer')
if customer:
profile = Profile.whether_customer_exists(customer)
form = None
form = ProfileForm(instance=profile)
context=OrderProduct.fetch_customer_order_products(customer)
context['form']=form
if profile:
context['profile'] = profile
print(context)
return render(request, 'my-account.html',context)
def post(self, request):
customer = request.session.get('customer')
if customer:
profile = Profile.whether_customer_exists(customer)
if profile:
form = ProfileForm(request.POST or None, request.FILES or None,instance=profile)
if form.is_valid():
form.save()
else:
cust = Customer.objects.filter(id = customer).first()
form = ProfileForm(request.POST or None, request.FILES or None)
form1 = form.save(commit=False)
form1.customer = cust
form1.save()
form = ProfileForm(instance=profile)
context = {'form':form}
return render(request, 'my-account.html',context)
else:
return redirect('login')
actually what i was trying to do is to fetch products ordered by a customer related to a particular Ordermodel object and their repective quantity from OrderProductmodel i was giving the order object to inner loop to show products related to that object as
{% for o in objects %}
{% for p in o %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{p.img.url}}</td>
<td>{{o.date}}</td>
<td>{{p.price}}</td>
{% if o.order_status == 'completed' %}
<td><small style="background-color:green;"><span class="badge badge-success">{{o.order_status}}</span></small></td>
{% else %}
<td><small style="background-color:rgb(231, 211, 26);"><span class="badge badge-warning">{{o.order_status}}</span></small></td>
{% endif %}
</tr>
{% endfor %}
{% endfor %}
so how is solved the problem was to fetch order query set object to template via context and inside template used a loop to iterate over queryset and get order object and then created a custom template filter inside templatetags folder to fetch the products related to a particular object by giving order object as argument to the cutstom filter
such as
{%for o in objects %}
<h4>Order{{forloop.counter}}</h4>
<div class="table-responsive">
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th>Sno</th>
<th>image</th>
<th>Name</th>
<th>price</th>
<th>Quantity</th>
<th>product total</th>
<th>DateTime</th>
<th>Order Status</th>
</tr>
</thead>
<tbody>
{% for p in o|get_object_related_products:request.session.customer %}
<tr>
<td>{{forloop.counter}}</td>
<td>
<div class="img">
<img src="{{p.img.url}}" alt="Image" height="50px" width="50px">
</div>
</td>
<td>{{p.name}}</td>
<td>{{p.price}}</td>
<td>{{o|get_product_quantity:p}}</td>
<td>{{o|get_order_total:p}}</td>
<td>{{o.date}}</td>
{% if o.order_status == 'completed' %}
<td><small style="background-color:green;"><span class="badge badge-success">{{o.order_status}}</span></small></td>
{% else %}
<td><small style="background-color:rgb(231, 211, 26);"><span class="badge badge-warning">{{o.order_status}}</span></small></td>
{% endif %}
</tr>
{% endfor %}
so thanks to anyone who made consideratiions...
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Myshop</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet">
</head>
<body>
<style>
.head{
font-family: 'Abel', sans-serif;
}
</style>
{% load static %}
{%for product_list in product_list%} after adding this code the webpage is getting duplicated
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<h1 class="head text-center m-4">Premium Watchs</h1>
<div class="container">
<div class="row g-3">
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<img src='{% static "shop\rolex.jpg" %}' class="card-img-top" alt="A Street in Europe">
<div class="card-body">
<h5 class="card-title">{{product_list.0.Product_name}}</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum odio in felis mattis feugiat. In rhoncus libero magna, ultricies condimentum tortor tempor sit amet.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<img src='{% static "shop\rolex.jpg" %}' class="card-img-top" alt="London">
<div class="card-body">
<h5 class="card-title">London</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum odio in felis mattis feugiat. In rhoncus libero magna, ultricies condimentum tortor tempor sit amet.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<img src='{% static "shop\rolex.jpg" %}' class="card-img-top" alt="New York">
<div class="card-body">
<h5 class="card-title">New York</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum odio in felis mattis feugiat. In rhoncus libero magna, ultricies condimentum tortor tempor sit amet.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
{%endfor%}
table
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
i am freshener learning django and i am not able to fetch the data from the database so please help me to solve this problem
i want to fetch data from my database to my website
after adding this line of code the webpage is getting duplicated
{%for product_list in product_list%}
models.py
this the code where i created the database it has very random fields as i am making this website to learn django
from django.db import models
class Product(models.Model):
product_id=models.AutoField
product_name=models.CharField(max_length=50)
category=models.CharField(max_length=50, default='')
sub_category=models.CharField(max_length=50, default='')
desc = models.CharField(max_length=500)
price = models.IntegerField(default=0)
pub_date=models.DateField()
images = models.ImageField(upload_to="shop/images",default='')
def __str__(self):
return self.product_name
I'm creating a Blazor Server project with login and I want to check if the email and password that the user introduces exists in the database(I'm using Sql Server). I created my method that is searching in the database in a class named BatranService and my login form in a Razor component, but I'm not sure how the code to connect these two would look like. I would appreciate any help, thanks!
public class BatranService : IBatranService
{
private readonly VoluntariatDBContext _context;
public BatranService(VoluntariatDBContext context)
{
_context = context;
}
public async Task<Batran> GetBatranByEmailAndParola(string email, string parola)
{
Batran batran = await _context.Batrans.Where(c=>c.Parola==parola).FirstOrDefaultAsync(c => c.Email == email);
return batran;
}
}
<EditForm Model="#batran" OnValidSubmit="#authBatran">
<div class="container px-4 py-5 mx-auto">
<div class="card card0">
<div class="d-flex flex-lg-row flex-column-reverse">
<div class="card card1">
<div class="row justify-content-center my-auto">
<div class="col-md-8 col-10 my-5">
<div class="row justify-content-center px-3 mb-3"> <img id="logo" src="css/autentificareLogo.png"> </div>
<h3 class="mb-5 text-center heading">Autentificare</h3>
<div class="form-group"> <label class="form-control-label text-muted">Email</label> <input type="text" id="email" #bind-value="#batran.Email" name="email" placeholder="Email" class="form-control"> </div>
<div class="form-group"> <label class="form-control-label text-muted">Parola</label> <input type="password" id="parola" #bind-value="#batran.Parola" name="parola" placeholder="Parola" class="form-control"> </div>
<div class="row justify-content-center my-3 px-3"> <button #onclick="authBatran" class="btn-block btn-color">Intra in cont</button> </div>
<div class="row justify-content-center my-2"> <small class="text-muted">Ai uitat parola?</small> </div>
</div>
</div>
<div class="bottom text-center mb-5">
<p href="#" class="sm-text mx-auto mb-3">Nu ai un cont?<button #onclick="deschideInregistrare" class="btn btn-white ml-2">Inregistreaza-te acum!</button></p>
</div>
<div class="col-12 row" style="text-align:left; font-weight:bold">
<span class="col-12"></span>
</div>
</div>
<div class="card card2">
<div class="my-auto mx-md-5 px-md-5 right">
<h4 class="text-white">We are more than just a company</h4> <small class="text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small>
</div>
</div>
</div>
</div>
</div>
</EditForm>
#code{
private void authBatran()
{
}
}
I dont know what's wrong with my code and I dont see any errors in console. My div panels are not working properly. I am having ng-click and when I click I am showing a div. Also arrow symbol on top right corner does not work.
Is there anything I am missing
Html
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title"> <a data-toggle="collapse" style="cursor:pointer" ng-click="ShowDefinition()" aria-expanded="true" aria-controls="collapseOne">Definition</a> </h4>
</div>
<div id="collapseOne" ng-show="IsDefinitionVisible" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" style="cursor:pointer" ng-click="ShowValues()" aria-expanded="false" aria-controls="collapseTwo"> What We Do? </a> </h4>
</div>
<div id="collapseTwo" ng-show="IsValuesVisible" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" style="cursor:pointer" ng-click="ShowPrinciples()" aria-expanded="false" aria-controls="collapseThree"> Where We Do It? </a> </h4>
</div>
<div id="collapseThree" ng-show="IsPrinciplesVisible" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. </div>
</div>
</div>
</div>
Angular Controller
(function () {
var app = angular.module('myApp');
app.controller('aboutController', ['$scope',
function ($scope) {
$scope.TestAbout = "Test";
$scope.ShowDefinition = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsDefinitionVisible = $scope.IsDefinitionVisible ? false : true;
}
$scope.ShowValues = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsValuesVisible = $scope.IsValuesVisible ? false : true;
}
$scope.ShowPrinciples = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsPrinciplesVisible = $scope.IsPrinciplesVisible ? false : true;
}
console.log($scope.TestAbout);
}
]);
})();
Here you go, working code:
Html:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne"><i ng-if="!IsDefinitionVisible" style="float:right" class="glyphicon glyphicon-arrow-down"></i><i ng-if="IsDefinitionVisible" style="float:right" class="glyphicon glyphicon-arrow-up"></i>
<h4 class="panel-title"> <a data-toggle="collapse" style="cursor:pointer" ng-click="ShowDefinition()" aria-expanded="true" aria-controls="collapseOne">Definition</a> </h4>
</div>
<div id="collapseOne" ng-show="IsDefinitionVisible" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo"><i ng-if="!IsValuesVisible" style="float:right" class="glyphicon glyphicon-arrow-down"></i><i ng-if="IsValuesVisible" style="float:right" class="glyphicon glyphicon-arrow-up"></i>
<h4 class="panel-title"> <a data-toggle="collapse" style="cursor:pointer" ng-click="ShowValues()" aria-expanded="true" aria-controls="collapseTwo">What We Do?</a> </h4>
</div>
<div id="collapseTwo" ng-show="IsValuesVisible" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree"><i ng-if="!IsPrinciplesVisible" style="float:right" class="glyphicon glyphicon-arrow-down"></i><i ng-if="IsPrinciplesVisible" style="float:right" class="glyphicon glyphicon-arrow-up"></i>
<h4 class="panel-title"> <a data-toggle="collapse" style="cursor:pointer" ng-click="ShowPrinciples()" aria-expanded="true" aria-controls="collapseThree">Where We Do It?</a> </h4>
</div>
<div id="collapseThree" ng-show="IsPrinciplesVisible" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. </div>
</div>
</div>
</div>
Plunker : http://plnkr.co/edit/CsMKy6ctHAgXg9O4gkob?p=preview
I also added bootstrap arrows.
I am looping thru items with ng-repeat. Here is the code:
<div class="row"
<div class="w3-card-3 col-xs-18 col-sm-6 col-md-3" ng-repeat="p in products">
<div class="thumbnail">
<img ng-src="{{p.img}}" alt="...">
<div class="caption">
<h4 class="text-danger">{{p.brand}}</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
<a href="car/{{ p.id }}" class="btn btn-default btn-xs pull-right" role="button"><i class="glyphicon glyphicon-edit"></i>
</a> Info
Bid
</div>
</div>
</div>
My problem is that when the repeater enters a new line the cards generated gets messed up. Here's an image of the problem:
What's wrong with my code? Why won't the cards align underneath each other. Tell me if there is anything else you want to see.
use height of image and description wrapper it should solve the problem
Try to add style="float: left" in the div below:
<div class="thumbnail" style="float: left">
Im working on an app that uses MVC and angular for routing. Everything works fine. I'm having problem using Bootstrap for the looks inside my ng-view. I have a _Layout.cshtml (base file for layout).
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year</p>
</footer>
</div>
<script src="~/js/plugins/jquery/jquery.min.js"></script>
<script src="~/js/plugins/jquery/jquery-ui.min.js"></script>
<script src="~/js/plugins/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="~/js/plugins/bootstrap/bootstrap-datepicker.js"></script>
This is a just a part of the code.
Under views i have a Home Page as follows
<div data-ng-non-bindable>
<div id="home" data-ng-controller="rootViewModel">
<div ng-view >
</div>
</div>
and final i have a view
<div class="page-content-wrap">
<div class="row">
<div class="col-md-12">
<!-- START DEFAULT WIZARD -->
<!-- START WIZARD WITH SUBMIT BUTTON -->
<div class="block">
<h4>Register organization</h4>
<form action="javascript:alert('Submited!');" role="form" class="form-horizontal">
<div class="wizard show-submit">
<ul>
<li>
<a href="#step-5">
<span class="stepNumber">1</span>
<span class="stepDesc">User<br /><small>Personal data</small></span>
</a>
</li>
<li>
<a href="#step-6">
<span class="stepNumber">2</span>
<span class="stepDesc">Contact<br /><small>Information</small></span>
</a>
</li>
</ul>
<div id="step-5">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>One Column</strong> Layout</h3>
<ul class="panel-controls">
<li><span class="fa fa-times"></span></li>
</ul>
</div>
<div class="panel-body">
<p>This is non libero bibendum, scelerisque arcu id, placerat nunc. Integer ullamcorper rutrum dui eget porta. Fusce enim dui, pulvinar a augue nec, dapibus hendrerit mauris. Praesent efficitur, elit non convallis faucibus, enim sapien suscipit mi, sit amet fringilla felis arcu id sem. Phasellus semper felis in odio convallis, et venenatis nisl posuere. Morbi non aliquet magna, a consectetur risus. Vivamus quis tellus eros. Nulla sagittis nisi sit amet orci consectetur laoreet. Vivamus volutpat erat ac vulputate laoreet. Phasellus eu ipsum massa.</p>
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-md-3 col-xs-12 control-label">Organization name</label>
<div class="col-md-6 col-xs-12">
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-pencil"></span></span>
<input type="text" class="form-control" data-ng-model="organization.TenantName"/>
</div>
<span class="help-block">The name should be unique, the name should identify your organization</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-xs-12 control-label">Phone number</label>
<div class="col-md-6 col-xs-12">
<div class="input-group">
<span class="input-group-addon" ><span class="fa fa-phone"></span></span>
<input type="text" data-ng-model="organization.PhoneNumber" class="form-control" />
</div>
<span class="help-block">Cell number for primary communication</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-xs-12 control-label">Email</label>
<div class="col-md-6 col-xs-12">
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-envelope"></span></span>
<input data-ng-model="organization.Email" type="text" class="form-control" />
</div>
<span class="help-block">Valid email address</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-xs-12 control-label">Description</label>
<div class="col-md-6 col-xs-12">
<textarea data-ng-model="organization.Description" class="form-control" rows="5"></textarea>
<span class="help-block">Briefly describe your organization</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-xs-12 control-label">Logo</label>
<div class="col-md-6 col-xs-12">
<input data-ng-model="organization.Logo" type="file" class="fileinput btn-primary" name="filename" id="filename" title="Browse file" />
<span class="help-block">Input type file</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-xs-12 control-label">Visibility</label>
<div class="col-md-6 col-xs-12">
<label class="check"><input id="toggle-one" data-ng-model="organization.IsPublic" ng-checked="organization.IsPublic" type="checkbox" class="icheckbox" checked="checked" /> Checkbox title</label>
<span class="help-block">To be visible to every one online check this box</span>
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-default">Clear Form</button>
<button class="btn btn-primary pull-right">Submit</button>
</div>
</div>
</div>
<div id="step-6">
<!--Select license data-->
</div>
</div>
</form>
</div>
<!-- END WIZARD WITH SUBMIT BUTTON -->
</div>
</div>
this view does not load datepicker bootstrap referenced in the layout, but css and angular controllers works fine. but when i remove the view and put it direct to my homepage.cshtml it works fine. the problem is the ng-view. any help will be appreciated. thanks