I am working on a django application and everything is working fine except I am getting an error Not Found: /about-us/undefined when I visit the url 127.0.0.1:8000/about-us/
With a view as below the error is not showing:
def about_us(request):
if request.method == 'GET':
return HttpResponse('<h1>About Page</h1>')
But when I render an HTML template as shown below then the error shows
def home(request):
if request.method == 'GET':
return render(request, 'website_files/index.html', {'home' : True})
website.urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.home, name="home"),
path('about-us/', views.about_us, name="about-us"),
path('why_us/', views.why_us, name="why_us"),
path('out_team/', views.out_team, name="out_team"),
path('it_solutions/', views.it_solutions, name="it_solutions"),
path('it_solutions/it_management_services', views.it_management_services, name="it_management_services"),
path('it_solutions/cyber_security_services', views.cyber_security_services, name="cyber_security_services"),
path('it_solutions/software_dev_services', views.software_dev_services, name="software_dev_services"),
path('it_solutions/networking_and_cloud_services', views.networking_services, name="networking_and_cloud_services"),
path('it_solutions/it_consultations', views.consulting_services, name="it_consultations"),
path('it_solutions/data_backup_and_recovery', views.backup_services, name="data_backup_and_recovery"),
path('it_solutions/email_hosting', views.email_hosting, name="email_hosting"),
path('it_solutions/web_hosting', views.web_hosting, name="web_hosting"),
path('stories', views.blogging, name="stories"),
path('contact_us', views.contact, name="contact_us"),
path('find_out', views.find_out, name="find_out"),
path('request_quote', views.get_quote, name="request_quote"),
]
main urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# path('admin/', admin.site.urls),
path('', include('website.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
What am I missing? You assistance will greatly appriciated.
Edit
Below is the index.html
index.html
{% extends 'website_files/base.html' %}
{% load static %}
{% block content %}
<section class="slider">
<div class="slick-carousel carousel-arrows-light carousel-dots-light m-slides-0"
data-slick='{"slidesToShow": 1, "arrows": true, "dots": true, "speed": 700,"fade": true,"cssEase": "linear"}'>
<div class="slide-item align-v-h bg-overlay">
<div class="bg-img"><img src="{% static 'assets/images/sliders/Top-6-Software-Development-Methodologies.jpg' %}" alt="slide img"></div>
<div class="container">
<div class="row align-items-center">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-7">
<div class="slide-item__content">
<h2 class="slide-item__title">Latest Software To Your Possible Customers!!</h2>
<p class="slide-item__desc">We are experienced professionals who understand that IT services are
changing, and are true partners who care about your success.</p>
Get Started
</div>
</div>
</div>
</div>
</div>
<div class="slide-item align-v-h bg-overlay">
<div class="bg-img"><img src="{% static 'assets/images/sliders/Online-Presence.jpg' %}" alt="slide img"></div>
<div class="container">
<div class="row align-items-center">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-7">
<div class="slide-item__content">
<h2 class="slide-item__title">Online Presence <br> To Ensure High Availability.</h2>
<p class="slide-item__desc">We understand the importance of having an online presence. We are therefore, strive to help you have a digital footprint</p>
Get Started
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="features-layout3 pt-0 pb-90 bg-gray">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-8">
<div class="row features-wrapper">
<div class="col-sm-4 feature-item">
<h4 class="feature-item__title">Software Asset</h4>
<p class="feature-item__desc">All aspects of your software assets including development, purchasing, deployment &
maintenance.</p>
<i class="icon-arrow-right icon-outlined"></i>
</div>
<div class="col-sm-4 feature-item">
<h4 class="feature-item__title">Enterprise Services</h4>
<p class="feature-item__desc">Ranging from but not limited to IT Counsultation, Software Development, Email Hosting etc.</p>
<i class="icon-arrow-right icon-outlined"></i>
</div>
<div class="col-sm-4 feature-item">
<h4 class="feature-item__title">Custom Requests</h4>
<p class="feature-item__desc">We build bespoke and dynamic systems with associated workflows, and tasks.</p>
<i class="icon-arrow-right icon-outlined"></i>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-4">
<div class="feature-item feature-item-custom bg-primary">
<h4 class="feature-item__title">Thinking insights, verified and realtime information help you
make the right decisions!
</h4>
<a href="{% url 'it_solutions' %}" class="btn btn__white btn__link">
<span>Find Your Solution</span><i class="icon-arrow-right icon-outlined"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<section class="about-layout6 bg-gray pt-0 pb-0">
<div class="container">
<div class="row heading-layout2 mb-70">
<div class="col-12">
<h2 class="heading__subtitle color-body">Nationwide Service, Local Expertise</h2>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-7">
<h3 class="heading__title mb-30">Keep your business safe & ensure high availability.</h3>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-5 about__Text">
<h5 class=" mb-30">Message from our Founder.</h5>
<p>Here at <b>TechTitan</b>, we strive to help you improve efficiency, leverage tech, and provide better customer experiences with the modern technology
services available all over the world. Our skilled personnel, utilising the latest technologies
combined with decades of experience will help you and your business archieve the standard that you strive for and give you a competitive advantage over your peers</p>
<!-- <img src="{% static 'assets/images/about/Isaac.jpg' %}" alt="singnture" class="mb-20"> -->
</div>
</div>
</div>
<div class="image-wrapper bg-white">
<div class="container">
<div class="row align-items-end">
<div class="col-sm-12 col-md-12 col-lg-7">
<div class="about__img">
<img src="{% static 'assets/images/about/IMG_0752.jpg' %}" alt="about">
</div>
</div>
<!-- <div class="col-sm-12 col-md-12 col-lg-5">
<ul class="list-items list-unstyled mb-30" style="margin-top: -500px;">
<li> Continued support to our clients</li>
<li> Provided the best solutions that your need</li>
<li> Ensuring that you are moving with the changing worldmwith our updates</li>
</ul>
<a href="{% url 'about-us' %}" class="btn btn__primary btn__icon btn__xl">
<span>More About Us</span><i class="icon-arrow-right"></i>
</a>
</div> -->
</div>
</div>
</div>
</section>
<section class="services-layout2 services-masonry bg-no-repeat bg-size-auto bg-top-right pt-130 pb-90">
<div class="bg-img"><img src="{% static 'assets/images/backgrounds/6.png' %}" alt="background"></div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-6 offset-lg-3">
<div class="heading heading-layout2 text-center mb-50">
<h2 class="heading__subtitle">Only settle for the best</h2>
<h3 class="heading__title">Our technology allows you to offer the best service to your possible
customers!
</h3>
</div>
</div>
</div>
<div class="row services-wrapper">
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="service-item">
<div class="service-item__content">
<div class="service-item__icon">
<i class="icon-server"></i>
</div>
<h4 class="service-item__title">IT Management <br> Services</h4>
<p class="service-item__desc">IT management services that manages and oversees the IT infrastructure of your
organization responsible for networking and operations.</p>
<a href="{% url 'it_management_services' %}" class="btn btn__secondary btn__link">
<span>Read More</span>
<i class="icon-arrow-right"></i>
</a>
</div>
<div class="service-item__overlay bg-overlay bg-overlay-primary">
<div class="bg-img"><img src="{% static 'assets/images/services/1.jpg' %}" alt="background"></div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="service-item">
<div class="service-item__content">
<div class="service-item__icon">
<i class="icon-cloud"></i>
</div>
<h4 class="service-item__title">Cyber Security<br> Services</h4>
<p class="service-item__desc">Drive your business and manage risk with us when it comes
cyber security, cloud, and manage security services and extend your team with leading experts.</p>
<a href="{% url 'cyber_security_services' %}" class="btn btn__secondary btn__link">
<span>Read More</span>
<i class="icon-arrow-right"></i>
</a>
</div>
<div class="service-item__overlay bg-overlay bg-overlay-primary">
<div class="bg-img"><img src="{% static 'assets/images/services/2.jpg' %}" alt="background"></div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="service-item">
<div class="service-item__content">
<div class="service-item__icon">
<i class="icon-programming"></i>
</div>
<h4 class="service-item__title">Software Development<br> Services</h4>
<p class="service-item__desc">We develop solutions that help you make informed decisions that keep your business going forward especially with rapid changes we face on a daily basis.</p>
<a href="{% url 'software_dev_services' %}" class="btn btn__secondary btn__link">
<span>Read More</span>
<i class="icon-arrow-right"></i>
</a>
</div>
<div class="service-item__overlay bg-overlay bg-overlay-primary">
<div class="bg-img"><img src="{% static 'assets/images/services/5.jpg' %}" alt="background"></div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="service-item">
<div class="service-item__content">
<div class="service-item__icon">
<i class="icon-network"></i>
</div>
<h4 class="service-item__title">Networking and Cloud Computing<br> Services</h4>
<p class="service-item__desc">Cloud computing is the on-demand, availability of computer system
resources, especially data storage and computing power, without direct active management by the user.
</p>
<a href="{% url 'networking_and_cloud_services' %}" class="btn btn__secondary btn__link">
<span>Read More</span>
<i class="icon-arrow-right"></i>
</a>
</div>
<div class="service-item__overlay bg-overlay bg-overlay-primary">
<div class="bg-img"><img src="{% static 'assets/images/services/3.jpg' %}" alt="background"></div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="service-item">
<div class="service-item__content">
<div class="service-item__icon">
<i class="icon-technician"></i>
</div>
<h4 class="service-item__title">IT Consulting <br> Services</h4>
<p class="service-item__desc">Trying to implement new technologies can be a challenge. With us on you side, we will give you information on the current technologies to ensure you have the best technologies possible.</p>
<a href="{% url 'it_consultations' %}" class="btn btn__secondary btn__link">
<span>Read More</span>
<i class="icon-arrow-right"></i>
</a>
</div>
<div class="service-item__overlay bg-overlay bg-overlay-primary">
<div class="bg-img"><img src="{% static 'assets/images/services/4.jpg' %}" alt="background"></div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="service-item">
<div class="service-item__content">
<div class="service-item__icon">
<i class="icon-file"></i>
</div>
<h4 class="service-item__title">Backup & Recovery<br> Services</h4>
<p class="service-item__desc">While you can’t predict unexpected events, we’ll ensure the right
precautions are in place to minimize downtime and keep you moving in the right direction.</p>
<a href="{% url 'data_backup_and_recovery' %}" class="btn btn__secondary btn__link">
<span>Read More</span>
<i class="icon-arrow-right"></i>
</a>
</div>
<div class="service-item__overlay bg-overlay bg-overlay-primary">
<div class="bg-img"><img src="{% static 'assets/images/services/6.jpg' %}" alt="background"></div>
</div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-sm-12 col-md-12 col-lg-5">
<p class="fz-16 my-4">Trusted by multiple organizations, for 5 years and running, it has been
delivering
smiles to hundreds of IT advisors, developers, users, and business owners.
</p>
</div>
<div class="col-sm-12 col-md-12 col-lg-7 d-flex align-items-center justify-content-end">
Find Your Solution
</div>
</div>
</div>
</section>
<section id="features" class="features-layout1 pt-130 pb-220">
<div class="bg-img"><img src="{% static 'assets/images/backgrounds/10.jpg' %}" alt="background"></div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
<div class="heading heading-layout2 mb-40">
<h2 class="heading__subtitle color-body">Ensure High Availability of Your Services</h2>
<h3 class="heading__title color-white">Easy solutions for all difficult IT problems, keep businesses safe &
ensure high availability.</h3>
</div>
<a href="{% url 'contact_us' %}" class="btn btn__white btn__bordered btn__xl btn__icon minwidth-170">
<span>Get Started</span>
<i class="icon-arrow-right"></i>
</a>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
<div class="row features-wrapper mt-40">
<div class="col-sm-6 feature-item">
<div class="feature-item__icon">
<i class="icon-statistic"></i>
</div>
<div class="d-flex align-items-center justify-content-between">
<h4 class="feature-item__title mb-0">Software Development</h4>
<i class="icon-arrow-right icon-outlined"></i>
</div>
</div>
<div class="col-sm-6 feature-item">
<div class="feature-item__icon">
<i class="icon-management"></i>
</div>
<div class="d-flex align-items-center justify-content-between">
<h4 class="feature-item__title mb-0">IT Counsultation</h4>
<i class="icon-arrow-right icon-outlined"></i>
</div>
</div>
<div class="col-sm-6 feature-item">
<div class="feature-item__icon">
<i class="icon-software"></i>
</div>
<div class="d-flex align-items-center justify-content-between">
<h4 class="feature-item__title mb-0">Email Hosting</h4>
<i class="icon-arrow-right icon-outlined"></i>
</div>
</div>
<div class="col-sm-6 feature-item">
<div class="feature-item__icon">
<i class="icon-relational"></i>
</div>
<div class="d-flex align-items-center justify-content-between">
<h4 class="feature-item__title mb-0">Website Hosting</h4>
<i class="icon-arrow-right icon-outlined"></i>
</div>
</div>
</div>
<div class="row mt-50 contact-text">
<div class="col-sm-9 px-0">
<strong class="color-white">If you have any questions or need help, feel free to contact with our team,
or call
(+260) 966477311</strong>
</div>
<div class="col-sm-3 px-0 d-flex justify-content-end">
Contact Us
</div>
</div>
</div>
</div>
</div>
</section>
<div class="bg-no-repeat bg-top">
<div class="bg-img"><img src="{% static 'assets/images/backgrounds/11.jpg' %}" alt="backgrounds"></div>
<section id="contact" class="contact-layout2 pt-0">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="contact-panel d-flex flex-wrap mt--170">
<div class="contact-panel__banner bg-overlay bg-overlay-primary d-flex flex-column justify-content-between" style="background-color:red">
<div class="bg-img"><img src="{% static 'assets/images/banners/6.jpg' %}" alt="background"></div>
<div class="heading heading-layout2 heading-light">
<h3 class="heading__title mb-30">Perfect Solutions For Your Business!</h3>
<p class="heading__desc mb-30">TechTitan has been helping organizations throughout the World to manage
their IT with our unique approach to technology management and consultancy solutions. </p>
</div>
<div class="d-flex flex-wrap">
<a href="{% url 'contact_us' %}" class="btn btn__white btn__bordered btn__icon">
<span>Get Started</span><i class="icon-arrow-right"></i>
</a>
</div>
</div>
<form class="contact-panel__form" method="post" action="{% url 'find_out' %}" id="contactForm">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label for="contact-name">Name (required)</label>
<input type="text" required class="form-control" placeholder="Name" id="contact-name" name="contact-name"
required>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label for="contact-email">Email (required)</label>
<input type="email" required class="form-control" placeholder="Email" id="contact-email"
name="contact-email" required>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<label for="contact-Phone">Inquiry (required)</label>
<select required class="form-control">
<option value="">Select Service</option>
<option value="Email Hosting">IT Management</option>
<option value="IT Counsultation">Cyber Security</option>
<option value="Software Development">Software Development</option>
<option value="Website Developemnt">Networking And Cloud Computing</option>
<option value="Website Developemnt">IT Consulting</option>
<option value="Website Developemnt">Backup & Recovery</option>
<option value="Website Developemnt">Email Hosting</option>
<option value="Website Developemnt">Website Hosting</option>
</select>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<label for="contact-message">Additional Details (required)</label>
<textarea required class="form-control" placeholder="Describe your inquiry!" id="contact-message"
name="contact-message"></textarea>
</div>
<button type="submit" class="btn btn__secondary btn__xl btn__block">Submit Request </button>
<div class="contact-result"></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
</div>
<section class="clients border-top pt-50 pb-50">
<div class="container">
<div class="row align-items-center">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="slick-carousel"
data-slick='{"slidesToShow": 6, "arrows": false, "dots": false, "autoplay": true,"autoplaySpeed": 2000, "infinite": true, "responsive": [ {"breakpoint": 992, "settings": {"slidesToShow": 4}}, {"breakpoint": 767, "settings": {"slidesToShow": 3}}, {"breakpoint": 480, "settings": {"slidesToShow": 2}}]}'>
<div class="client">
<img src="{% static 'assets/images/clients/1.jpg' %}" alt="client">
<img src="{% static 'assets/images/clients/1.jpg' %}" alt="client">
</div>
<div class="client">
<img src="{% static 'assets/images/clients/Techmasters.png' %}" alt="client">
<img src="{% static 'assets/images/clients/Techmasters.png' %}" alt="client">
</div>
<div class="client">
<img src="{% static 'assets/images/clients/idsp.jpg' %}" alt="client">
<img src="{% static 'assets/images/clients/idsp.jpg' %}" alt="client">
</div>
<div class="client">
<img src="{% static 'assets/images/clients/4.png' %}" alt="client">
<img src="{% static 'assets/images/clients/4.png' %}" alt="client">
</div>
<div class="client">
<img src="{% static 'assets/images/clients/5.png' %}" alt="client">
<img src="{% static 'assets/images/clients/5.png' %}" alt="client">
</div>
<div class="client">
<img src="{% static 'assets/images/clients/6.png' %}" alt="client">
<img src="{% static 'assets/images/clients/6.png' %}" alt="client">
</div>
<div class="client">
<img src="{% static 'assets/images/clients/7.png' %}" alt="client">
<img src="{% static 'assets/images/clients/7.png' %}" alt="client">
</div>
</div>
</div>
</div>
</div>
</section>
<section class="banner-layout2 pt-0 pb-100">
<div class="bg-img"><img src="{% static 'assets/images/backgrounds/brickred.svg' %}" alt="background"></div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-5">
<div class="banner-text">
<div class="heading-layout2 heading-light mb-40">
<h3 class="heading__title mb-30">Timely service delivery!!</h3>
<p class="heading__desc">We ensure that the services we offer are delivered when they are scheduled for. No delays because we understand that your business as to go forward at all times.
</p>
</div>
Get Started
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-7">
<div class="banner-img">
<img src="{% static 'assets/images/logo/TechTitan_Logo_1.jpg' %}" alt="banner">
</div>
</div>
</div>
</div>
</section>
{% endblock %}
I am currently on a python / Django project, I am also using bootstrap.
I have a display bug only with google chrome. When I load my page everything is fine then when I scroll, the bug occurs:
When I reload the page everything is back to normal:
This bug is not present on the project locally, only from production on a server (ubuntu with Gunicorn and Nginx). When I hover the mouse over this white block, the text displays randomly. This is not the only place where it happens. I don't know if this problem is known but I have absolutely no idea what it might be.
here is the part of the code that we see in picture :
<!-- Description content -->
<div class="container-fluid main-color-dark-bg pb-4">
<div lass="row">
<div class="col-lg-8 col-md-10 col-12 mx-auto mb-3">
< Précèdent
Suivant >
</div>
</div>
<!-- Description -->
<div class="row col-lg-8 col-md-10 col-12 mx-auto">
<div class="">
<p class="theoretical-watch-p ext-md-left text-center">
{{ video.description }}
</p>
</div>
</div>
<!-- Sous parties et Ressources -->
<div class="row mx-auto col-lg-8 col-md-10 col-12">
<!-- Sous parties-->
<div class="col-lg-7 col-12 px-0">
<h4 class="theoretical-subpart-title main-color-white text-md-left text-center ">Sous parties</h4>
<ul class="list-unstyled text-md-left text-center">
{% for s in subparts %}
<li class="">
<a href="{{s.subpart_url}}" class="subpart-link">
{{s.subpart_title |title}}
<span class="subpart-hook">[<span>
{% if s.subpart_time.hour == 0 %}
{{ s.subpart_time|time:"i:s" }}
{% else %}
{{ s.subpart_time|time:"H:i:s" }}
{% endif %}
<span class="subpart-hook">]<span>
</a>
</li>
{% endfor %}
</ul>
</div>
<!-- Ressources -->
<div class="col-lg-5 col-12 my-md-0 my-4 text-center mx-auto">
TÉLÉCHARGER LES RESSOURCES
</div>
</div>
</div>
<!-- End Description content -->
</div>
<!-- TAB Menu header mr-lg-auto mx-md-auto mx-sm-auto mx-auto -->
<div class="row col-12 px-0 mx-auto">
<ul class="nav mx-auto d-flex d-inline-flex" id="myTab" role="tablist">
<li class="d-inline-flex">
<a class="nav-link theoretical-tab-link active" id="tab-memo" data-toggle="tab" href="#content-memo" role="tab" aria-controls="content-memo" aria-selected="true">
Les points clés du chapitre
</a>
</li>
<li id="header-tab-program" class="d-inline-flex">
<a class="nav-link theoretical-tab-link" id="tab-program" data-toggle="tab" href="#content-program" role="tab" aria-controls="content-program" aria-selected="false">
Contenu du cours
</a>
</li>
<li class="d-inline-flex">
<a class="nav-link theoretical-tab-link" id="tab-definitions" data-toggle="tab" href="#content-definitions" role="tab" aria-controls="content-definitions" aria-selected="false">
Lexique
</a>
</li>
</ul>
</div>
<!-- TAB Menu content -->
<div class="">
<div class="tab-content w-100" id="myTabContent">
<!-- MEMO -->
<div class="tab-pane fade active show" id="content-memo" role="tabpanel" aria-labelledby="tab-memo">
<!-- Title vidéo et description -->
<div class="col-lg-8 col-12 mx-auto mb-5">
<!-- Title -->
<div class="row px-0 section-title my-auto col-12 mx-auto">
<div class="col-12 mx-auto my-auto">
<h1 class="mx-auto section-title text-center">
<hr class="main-color-grey-bg">
<img class="img-left" width="2%" height="auto" src="{% static 'images/pictograms/clover-black.svg' %}">
MÉMO
<img class="img-right" width="2%" height="auto" src="{% static 'images/pictograms/heart-red.svg' %}">
<hr class="main-color-grey-bg">
</h1>
</div>
</div>
<!-- APERCU - SECTION LEXIQUE -->
<div class="row mx-0">
<!-- colonne contenu -->
<div class="col-12">
<ul class="list-unstyled mt-5">
{% for sp in subparts %}
{% if sp.subpart_memo%}
<li class="theoretical-tab-content-p-memo">
<h4 class="">{{ sp.subpart_title |title }}</h4>
<p class="theoretical-tab-content-p-memo">
{{ sp.subpart_memo | safe | linebreaks}}
</p>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
<!-- END MEMO -->
I don't use anything in particular in the code. I hope that someone could help me!
After multiple tests I finally identified the problem and solved.
The display bugs (as a reminder, only on google chrome), as seen in the videos and images came from a line that I had placed in my css file.
in my body I had the line overflow: overlay;
body{
font-family: 'main-font-medium', Fallback, serif;
font-weight: 0;
font-style: normal;
/*overflow: auto;*/
overflow-x: hidden!important;
scroll-behavior: smooth;
}
thanks to you JuhonRutila !
I hope this can help other people.
I want my main content and Sidewidget in the same row. With my knowledge of bootstrap grid, I tried to make this work but the sidewidget is stacking below the content and not in the sides. Here is the required snippets.
body.html
<!-- Navigation -->
{% include 'nav.html' %}
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 ">
{% block content %}
{% endblock %}
</div>
<div class="col-lg-4">
{% block sidewidget %}
{% endblock %}
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'js/tinymce/tinymce.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/tinymce/custom.js' %}" ></script>
nav.html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'add' %}">Add Article</a>
</li>
{% endif %}
</ul>
</div>
</div>
My {% block content %}
{% for post in posts %}
<h2 class="mt-4">{{post.title}}</h2>
<!-- Author -->
<p class="lead">
by
{{post.author}}
</p>
<hr>
<!-- Date/Time -->
<p class="lead">Published on <b>{{post.published_date}}</b></p>
<hr>
<!-- Preview Image -->
<img class="img-fluid" src="{{post.image.url}}" alt="Img Placeholder">
<p>{{post.images}}</p>
{% for tag in post.tags.all %}
<p>{{tag.name}}</p>
{% endfor %}
<hr>
<!-- Post Content -->
<p class="lead">{{post.content|safe|truncatewords:"60"|linebreaks}}</p>
<footer class="entry-footer">
<button class="btn btn-primary">Read More</button>
</footer>
<hr>
{% empty %}
<h1> Nothing to display</h1>
{% endfor %}
{% endblock %}
My {% Sidewidget %} block
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
Web Design
</li>
<li>
HTML
</li>
<li>
Freebies
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
JavaScript
</li>
<li>
CSS
</li>
<li>
Tutorials
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
<div class="card-body">
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
</div>
</div>
{% endblock %}
I have tried tweaking but nothing seems to work
I want the page like this:
|*****************************|
|navigationbar |
|*****************************|
|Post1(Col1-Col8) |SIDEWIDGET|
|***** | |
|Post2(Col1-Col8) | |
|***** | |
|PostN(Col1-Col8) | |
|*****************************|
|Footer |
Your code should work. The col-lg-* modifier applies only for screens that are over 1200px wide as per bootstrap's documentation. Maybe you're using a smaller screen and you also need to add the col-sm and col-md modifiers. Please try those and let me know if it works.
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-8 ">
{% block content %}
{% endblock %}
</div>
<div class="col-sm-4 col-lg-4">
{% block sidewidget %}
{% endblock %}
</div>
</div>
</div>
you can't use a bootstarp grid system for it because the sidewidget is going to take up the column of the whole three rows .You would have to use flex box for it. by using grid system columns can be individually used in different rows but you cannot have a whole column spanning over the different rows .
In the 'nav' section the 'nav' tag is not closed </nav>. close it and try again.
I think that will solve your problem.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'add' %}">Add Article</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
I am pulling the products from database and trying to display them in multiple frames/items of carousel on a screen rather than a single item using for loop.
This is what my carousel looks like at present, as you will notice only one item is displayed, but i want it to display 4 items at one slide and next four on clicking arrow button and so on.
click here to see my carousel image.
my Django code looks like this--
<div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
{% for prod in pro %}
<div class="item{% if forloop.first %} active{% endif %}">
<div class="col-sm-3">
<div class="product-image-wrapper1">
<div class="single-products">
<div class="productinfo text-center">
<!--sample image, same for all--><img src="{% static 'header/images/home/2508__14291.1437672247.200.200.jpg' %}" alt="" />
<h2>{{prod.productname}}</h2>
<p>{{prod.producttype}}</p>
<i class="fa fa-shopping-cart"></i>Add to cart
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
Try to do something like this:
<div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
{% for prod in pro %}
<div class="col-sm-3">
<div class="product-image-wrapper1">
<div class="single-products">
<div class="productinfo text-center">
<!--sample image, same for all--><img src="{% static 'header/images/home/2508__14291.1437672247.200.200.jpg' %}" alt="" />
<h2>{{prod.productname}}</h2>
<p>{{prod.producttype}}</p>
<i class="fa fa-shopping-cart"></i>Add to cart
</div>
</div>
</div>
</div>
{% if forloop.counter|divisibleby:4 and not forloop.last %}
</div>
<div class="item">
{% endif %}
{% endfor %}
</div>
</div>
<a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
I have 3 templates:
- main template for rendering some basic stuff,
- second template which renders whole tree
- third template which should render each eleement of that tree
When I include row_renderer.html then my variable called subItem is not visible in included template. When I copy that template to second template called nodes_renderer.html then everything seems fine.
How do I pass subItem variable to row_renderer.html?
Main template
{% verbatim %}
<div ui-tree data-drag-enabled="false" class="">
<ol ui-tree-nodes="" ng-model="list">
<li ng-repeat="item in list" ui-tree-node class="table">
<div ui-tree-handle class="header row" data-toggle="collapse">
<div class="col-sm-4 col-md-2" style="">
<input type="checkbox" />
{{item.name}} ({{item.submission_count}})
</div>
<div class="col-sm-4 col-md-2">
<i class="icon" ng-class="{'icon-chevron-right': collapsed, 'icon-chevron-down': !collapsed}"></i>
{{item.last_submission_date}}
</div>
<div class="col-md-6">
<i class="icon icon-file"></i> Pobierz raport
<i class="icon icon-times"></i> Zakończ zgłoszenie
<i class="icon icon-envelope"></i> Wyślij SMS
</div>
<div class="clearfix"></div>
</div>
<ol ui-tree-nodes="" ng-model="item.children">
<li ng-repeat="subItem in item.children" ui-tree-node ng-include="'nodes_renderer.html'">
</li>
</ol>
</li>
</ol>
</div>
{% endverbatim %}
Last fragment of main template:
<ol ui-tree-nodes="" ng-model="item.children">
<li ng-repeat="subItem in item.children" ui-tree-node ng-include="'nodes_renderer.html'">
</li>
</ol>
nodes_renderer.html
{% verbatim %}
<script type="text/ng-template" id="nodes_renderer.html">
<div ui-tree-handle class="row" ng-include="'row_renderer.html'" >
<ol ui-tree-nodes="" ng-model="subItem.children">
<li ng-repeat="subItem in subItem.children" ui-tree-node ng-include="'nodes_renderer.html'">
</li>
</ol>
</div>
</script>
{% endverbatim %}
row_renderer.html - reusable template
<script type="text/ng-template" id="row_renderer.html">
<div class="clearfix"></div>
<div class="col-md-12" >
Rodzaj Awarii: {{subItem.type_name}}
</div>
<div class="clearfix"></div>
<div class="col-sm-4 col-md-2">
<input type="checkbox" />
{{subItem.name}} ({{subItem.submission_count}})
</div>
<div class="col-sm-4 col-md-2">
<i class="icon" ng-if="subItem.children" ng-class="{'icon-chevron-right': collapsed, 'icon-chevron-down': !collapsed}"></i>
{{subItem.last_submission_date}}
</div>
<div class="col-sm-4 col-md-2">
<i class="icon icon-star"></i> Przypisz do mnie
</div>
<div class="col-md-6">
<i class="icon icon-file"></i> Pobierz raport
<i class="icon icon-times"></i> Zakończ zgłoszenie
<i class="icon icon-envelope"></i> Wyślij SMS
</div>
<div class="clearfix"></div>
</div>
</script>
ng-repeat creates a new scope for each element, ng-include also creates a new scope.
In the case of nodes_renderer.html, you use subItem which is inherited from your parent scope when you specify ng-repeat="subItem in item.children". That's why it works for nodes_renderer.html
How do I pass subItem variable to row_renderer.html?
Try onload="subItem=$parent.PropertyToPass" :
<div ui-tree-handle class="row" ng-include="'row_renderer.html'" onload="subItem=$parent.PropertyToPass">
For more information: How to get parent element inside ng-include when iterating in ng-repeat recursively