I'm implementing a content tabbed section using Bootstrap 3 and it works fine for almost all resolutions except mobile. For some reason only on mobile devices the default active tab is the last one called "All", but the content it displays comes from the first tab ("Popular").
It works perfect on bigger resolutions like iPad or desktop. In this case the default active tab is the first one called "Popular" and the displayed content is correct.
Could you please help me to figure it out what is the problem?
<section class="solution-tabs section-tabs">
<div class="container no-padding">
<ul class="nav nav-tabs" role="tablist">
<li class="col-sm-3 active">Popular</li>
<li class="col-sm-3">Industries</li>
<li class="col-sm-3">Topics</li>
<li class="col-sm-3">All</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade in active" id="tabPopular">
<div class="container">
<div class="row">
Popular tab content<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, est quae quo magnam deserunt facere!
</div>
</div>
</div>
<div class="tab-pane fade" id="tabIndustries">
<div class="container">
<div class="row">
Industries tab content<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, corporis obcaecati eos vero aliquam sit?
</div>
</div>
</div>
<div class="tab-pane fade" id="tabTopics">
<div class="container">
Topics tab content<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus ratione iusto officiis sint quaerat totam.
</div>
</div>
<div class="tab-pane fade" id="tabAll">
<div class="container">
<div class="row">
All tab content<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, fugit fuga doloremque minima ducimus ratione.
</div>
</div>
</div>
</div>
</section>
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 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">
Angularjs ng-repeat with div tag..i have a code with div tag as shown..i want to repeat the whole div with img src being different on the second loop..how to do this with ng-repeat directive in angularjs?
<div class="col-xs-12 col-sm-12 col-md-6" >
<a href="Events.html">
<div class="PastEvents">
<div class="EventDate"><h5>25<br /><span>Feb</span></h5></div>
<img src = "resources/front/images/UpComing-Event00.jpg">
<h6>Lorem ipsum</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non massa ut tortor volutpat eleifend eu lobortis urna.</p>
</div>
</a>
</div>
JS:
myModule.controller('ctrl', function($scope) {
$scope.imageSources = ["src1", "src2", "src3"]
})
HTML:
<div ng-repeat="src in imageSources" class="col-xs-12 col-sm-12 col-md-6" >
<a href="Events.html">
<div class="PastEvents">
<div class="EventDate"><h5>25<br /><span>Feb</span></h5></div>
<img ng-src="{{src}}">
<h6>Lorem ipsum</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non massa ut tortor volutpat eleifend eu lobortis urna.</p>
</div>
</a>
</div>
Basically, have your image sources in your controller and use the ng-src directive in your template
I'm trying understand your question.
If you wanna display different style by the index of 'ng-repeat', you can do like following.
<div class="PastEvents" ng-repeat="item in items">
<div class="EventDate"><h5>25<br /><span>Feb</span></h5></div>
<img src = "resources/front/images/UpComing-Event00.jpg" ng-if="$index == 1"><!-- first item-->
<img src = "resources/front/images/UpComing-Event00.jpg" ng-if="$index != 1"><!-- second and rest items-->
<h6>Lorem ipsum</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non massa ut tortor volutpat eleifend eu lobortis urna.</p>
</div>
If you just wanna display different resource, just using:
<img src = "resources/front/images/UpComing-Event{{$index}}.jpg">
I am implementing 3 different modals in the same view,
but only the one that's placed last could be activated.. my code:
<div ui-content-for="modals">
<div class="modal" ui-if="blockPersonModal" ui-state='blockPersonModal'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="blockPersonModal">×</button>
<h4 class="modal-title">Block</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quo illum nihil voluptatem earum optio repellendus, molestias illo facere, ea non. Possimus assumenda illo accusamus voluptatibus, vel corporis maxime quam.</p>
</div>
<div class="modal-footer">
<button ui-turn-off="blockPersonModal" class="btn btn-default">Close</button>
<button ui-turn-off="blockPersonModal" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div ui-content-for="modals">
<div class="modal" ui-if="RequestIdentificationModal" ui-state='RequestIdentificationModal'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="RequestIdentificationModal">×</button>
<h4 class="modal-title">Request Identification</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quo illum nihil voluptatem earum optio repellendus, molestias illo facere, ea non. Possimus assumenda illo accusamus voluptatibus, vel corporis maxime quam.</p>
</div>
<div class="modal-footer">
<button ui-turn-off="RequestIdentificationModal" class="btn btn-default">Close</button>
<button ui-turn-off="RequestIdentificationModal" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div ui-content-for="modals">
<div class="modal" ui-if="ReportModal" ui-state='ReportModal'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="ReportModal">×</button>
<h4 class="modal-title">Report</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quo illum nihil voluptatem earum optio repellendus, molestias illo facere, ea non. Possimus assumenda illo accusamus voluptatibus, vel corporis maxime quam.</p>
</div>
<div class="modal-footer">
<button ui-turn-off="ReportModal" class="btn btn-default">Close</button>
<button ui-turn-off="ReportModal" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
if I am changing the order of the modals in my code, still only the last one will show up.
how can I define three different modals in the new angularjs mobile ui?
unfourtanatley, the docs lacks clear information about how to do such a thing.
thanks,
Yonatan.
Found the problem.
The correct way to write multiple modals:
<div ui-content-for="modals">
<div class="modal">....</div>
<div class="modal">....</div>
<div class="modal">....</div>
</div>
Instead of:
<div ui-content-for="modals">
<div class="modal">....</div>
</div>
<div ui-content-for="modals">
<div class="modal">....</div>
</div>
<div ui-content-for="modals">
<div class="modal">....</div>
</div>
in my code .col-md-3 is not getting loaded for all rows.
<div class="row">
<div class="col-md-3 col-md-offset-2 footer-image col-sm-3 col-sm-offset-2 col-xs-2 col-xs-offset-3">
<img alt="Get Started" src="/assets/f_1.png" alt="Life Style" title="life style"
class="img-thumbnail resize-image"/>
</div>
<div class="col-md-3 footer-image col-sm-3 col-xs-2">
<img alt="Get Started" src="/assets/f_1.png" alt="About Us" title="About Us"
class="img-thumbnail resize-image" />
</div>
<div class="col-md-3 footer-image col-sm-3 col-xs-2">
<img alt="Get Started" src="/assets/f_1.png" alt="Contact Us" title="Contact Us"
class="img-thumbnail resize-image" />
</div>
</div>
<div class="row">
<div class='col-md-3'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, in, soluta deserunt
</div>
<div class='col-md-3'>
Delectus, earum, nobis, esse expedita corporis eaque cupiditate nihil quia consequuntur ea
</div>
<div class='col-md-3'>
Delectus, quam, minus quisquam fugit harum a ab quo fugiat obcaecati molestias voluptatem velit
</div>
</div>
In the first row section, where I am adding images, there the col-md-3 is getting loaded, but the same is not getting loaded in next row(with text contents) !
is this what you're trying to achieve? Try reconstructing your .cols again without the offsets.
<div class="row">
<div class="col-md-3"><img src="http://placehold.it/350x150"></div>
<div class="col-md-3"><img src="http://placehold.it/350x150"></div>
<div class="col-md-3"><img src="http://placehold.it/350x150"></div>
<div class="col-md-3"><img src="http://placehold.it/350x150"></div>
</div>
<div class="row">
<div class="col-md-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, tempore, blanditiis ab consequuntur ea molestiae?</div>
<div class="col-md-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, quis libero cupiditate repellat iusto voluptatum.</div>
<div class="col-md-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, assumenda, aspernatur nihil ut quia eveniet!</div>
<div class="col-md-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, assumenda, aspernatur nihil ut quia eveniet!</div>
</div>