Good afternoon all,
Bought an old tablet for a demo of an app.
It looks like bootstrap is not working on some elements such modals, tabs. (its working fine on laptop and mobile). The tablet is from 2016.
Not sure what information to give at this stage, so feel free to ask any question.
Any pointers on how to fix this?
EDIT
Browser Used - Chrome
Does it work with the same browser on another device - Yes
Bootstrap version used - 5.
Bootstrap 4 seem to work on the tablet, ideally if we could find a way to make the tablet compatible with Bootstrap 5 it would be a lot better.
MRE
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>My Procurement | {% block title %}{% endblock %}</title>
</head>
<body>
…
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
…
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body>
</body>
Related
I am a begineer in Django framework I want to Dynamically load content in Bootstrap Modal with AJAX
something like this
https://makitweb.com/demo/modal_ajax/index.php
(to be clear its not my code result i want to do dometing like this)
I found many tutorials on internet but i want some guidance on the part where button is pressed and modal shows data related to that item.
Please pardon me if it's a bad question
here is code
models.py
from django.db import models
class Product(models.Model):
name = models.CharField(max_length=200)
img = models.ImageField(upload_to='prodpics', default=None)
price = models.FloatField(max_length=30)
category = models.CharField(max_length=30)
description = models.CharField(max_length=200)
def __str__(self):
return self.name
views.py
from django.shortcuts import render
from .models import Product
# Create your views here.
def products(request):
prods = Product.objects.all()
return render(request, 'products.html',{'prods':prods})
prod.html
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<!-- <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> -->
<!-- <meta name="generator" content="Jekyll v4.0.1"> -->
<title>Products</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/starter-template/">
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="{% static 'css/starter-template.css' %}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md bg-light navbar-light fixed-top">
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-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="#">Explore Us</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li> -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sign In/Sign Up</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Sign In</a>
<a class="dropdown-item" href="#">Sign Up</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-primary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main" class="container">
<div class="starter-template">
<h1>Products</h1>
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
{% for prod in prods %}
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class="card-image-top" src="{{prod.img}}" alt="">
<div class="card-body">
<h2 class="card-text text-center">{{prod.name}}</h2>
<p class="card-text text-center">${{prod.price}}</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group center"> -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Know More</button><br>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{prod.name}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{prod.description}}
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary">Request demo</button>
<!-- </div> -->
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</main><!-- /.container -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="{% static 'js/vendor/bootstrap.bundle.js' %}"></script></body>
</html>
Still this question is related to bootstrap not Django. You should match id's of both button and modal template.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#prod.id">Know More</button><br>
<!-- Modal -->
<div class="modal fade" id="{{prod.id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{prod.name}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{prod.description}}
</div>
</div>
</div>
</div>
Does anyone face this issue.. I have a very strange behavior with Flask and Bootstrap modal. On my dev server http://127.0.0.1:5000/ I have a modal which appears after user is typing wrong login credentials:
HTML code in Index page:
<div class="modal fade" id="ExistsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">This email already exists!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
If you have forgotten your password, .......
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Continue</button>
</div>
</div>
</div>
</div>
But on my production 'http://flask-env.xxx.us-west-1.elasticbeanstalk.com I can see the modal only if I manually refresh a page!
For return function I'm using
return redirect(url_for('index',_anchor='login')) and in index() I passed arguments!
{% if email_exists %}
<script>
$("#ExistsModal").modal('show');
</script>
{% endif %}
My question is - why modal show up after manual refresh on production? But on dev its works fine!
I have a series of 6 modals that are created through a flask/jinja2 frame work loop and 1 modal that is an example outside of the loop. The modals all populate and populate correctly when looking at the page source. The example modal that is outside the loop shows without issue, however the other 6 modals will not fire.
https://www.sfiltrowani.pl/filter_instructions is the live site with the problem.
https://github.com/rscales02/sfiltrowani is the full code git repository.
This is for a flask app run on AWS elastic beanstalk. I was able to get the example modal to show by defining modal id and data target manually, those were the only changes I made from a copy/paste of the original modal code and original link to modals.
example link identical links from A-F
{{ _('(instrukcja photo F)') }}
modal loop to create image modals for instructions
{% for image in images %}
<!-- Modal -->
<div class="modal fade" id="{{ image }}" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<img id='modal-img' src="{{ url_for('static', filename='images/instructions/' + image) }}" alt="{{ loop.index }}">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% endfor %}
Expected results a modal that fires for each photo in my instructions. Current results only example modal will show.
[Edit]
I am new to the stack, edited to show the 3 lines of code that were hidden, due to lack of indentation. Thanks and sorry!
Your link does not point to the modal to show .
The modal needs an ID that is referenced by data-target
{{ _('(instrukcja photo F)') }}
<div class="modal-dialog" id="this-modal-id">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<img id='modal-img' src="{{ url_for('static', filename='images/instructions/' + image) }}" alt="{{ loop.index }}">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
I fixed it! It would appear that modal id's are sensitive to specific formatting and not just random strings. Previous version that did not work had id and data-targets of 'instrukcja*.jpg' when '.jpg' was removed, the modals function perfectly.
In a Djano project of mine, I have a JS file inside /project/static/js/. It needs access to a files stored at /project/templates/. I'm unable to access this location from the js file.
Can someone suggest a work around (short of keeping duplicates of the said files in the JS folder). I'd like to avoid duplication (since it doubles my maintenance down the road)
Task specifics: I have some HTML templates that display instructions. The JS I've written simply takes the same instruction text and displays it as text on a dynamic popup.
Note: The main wrinkle is that a non-JS fallback must exist for any JS solution. Some of the users of this project emanate from a forward proxy that strips all <script> tags. Think Unobtrusive JS.
There is no need to access projects/templates from the static folder.
You have several options how to display HTML content, like instructions, in a popup.
Here's an outline of 2 ways to do so:
1st Option: Load all content at once
This approach loads everything in one go and the js only changes the visibility of the instruction pop-up. If you are using Bootstrap then modal is what will make your life easier. You do not even need to write any js altogether. With Bootstrap this would look something like:
<!-- main_template.html -->
<!-- Don't forget to load the bootstrap library here -->
....
<!-- icon to trigger the popup -->
<a data-toggle="modal" data-target="#InstructionModal">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> Show Instructions
</a>
....
<!-- the bootstrap modal -->
<div class="modal fade" id="InstructionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Instructions</h4>
</div>
<div class="modal-body">
{% include 'instruction.html' %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Then the instructions:
<!-- instruction.html -->
<p>
This is an instruction - You must follow it!
</p>
2nd Option: Load additional content on request using ajax
In this case you would not load the additional HTML content in the beginning, but serve it only upon request, i.e. if someone clicks on the Show Instructions icon. Note that you'll need jQuery for this to work.
Here your instructions get a view (don't forget to update your urls.py as well):
# view.py
def get_instructions(request):
return render(request, 'instruction.html')
The instructions template is still the same:
<!-- instruction.html -->
<p>
This is an instruction - You must follow it!
</p>
The js:
<!-- get_instructions.js -->
....
<script>
$("#InstroductionModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
</script>
The the main template:
<!-- main_template.html -->
<!-- Don't forget to load get_instructions.js -->
....
<!-- icon to trigger the popup -->
<a href="{% url 'get_instructions' %}" data-remote="false" data-toggle="modal" data-target="#InstructionModal">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> Show Instructions
</a>
<!-- the bootstrap modal -->
<div class="modal fade" id="InstructionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Instructions</h4>
</div>
<div class="modal-body">
<p> Instructions will follow </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
Hopefully one of those ways work for you. Unfortunately, I don't have a django project setup, so this code is untested.
I know that there are similar questions asked about element not clickable issue but for me didn't worked any proposed solution. Mainly I am using Chromedriver and sometimes Geckodriver, this appear on both.
Still getting, Message: unknown error: Element is not clickable at point (470, 1499)
even as you can see I tried with find_element.click() and also with action chains.
More confusing in my case is that part with ("M_1_anchor") pass and part with ("submit") fail, not clickable. Just to add another confusion, same function worked fine till middle of August 2017.
My function is:
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
def select_and_click_edit_contact_details(self):
wait = WebDriverWait(self.driver, 10)
action = ActionChains(self.driver)
wait.until(expected_conditions.element_to_be_clickable((By.ID, "M_1_anchor")))
self.driver.find_element_by_id("M_1_anchor").click()
action.move_to_element(self.driver.find_element_by_id("submit")).perform()
action.click(self.driver.find_element_by_id("submit")).perform()
#self.driver.find_element_by_id("submit").click()
I admit that submit button is not optically visible on page and user need to scroll down but that shouldn't be reason for failing.
</select></div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#report">
Report
</a>
</h4>
</div>
<div id="report" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<label class="col-xs-2 col-md-3 control-label">
Image file of your logo
</label>
<div class="col-xs-10 col-md-9">
<img class="img img-responsive" src="data:image/jpg;base64,/9k=" width="100"> </div>
</div>
<div class="row" style="margin-top: 20px;">
<label class="col-xs-2 col-md-3 control-label">
Footer text on driver accounting
</label>
<div class="col-xs-10 col-md-9">
<p class="form-control-static">
20
</p>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-
toggle="collapse" data-parent="#accordion" href="#cashbox">
Cashbox
</a>
</h4>
</div>
<div id="cashbox" class="panel-collapse collapse">
<div class="panel-body">
<p>Currently there are no cashboxes defined!</p>
</div>
</div>
</div>
<div class="form-group"></div>
<div class="form-group">
<label class="control-label col-md-3">
<input type="submit" id="submit" value="Edit" class="btn btn-primary">
</label>
</div>
</form></div>
<script type="text/javascript">
$(function () {
$("#list option").attr('disabled', true);
$('.selectpicker').selectpicker(
{
showContent: false
});
});
</script>
</div>
</div>
</div>
</div>
</div>
<div id="push"></div>
</div>
<script src="/HaleWebApplication/bundles/DatatablesNewJs?
v=83AITBTc8vgdDH09rqjGm5-sSopLGkHfDID5YpRCCVs1"></script>
<script src="/HaleWebApplication/bundles/TreeviewJs?
v=p6JgEssUYL1w3zZdiBDt4Ul_VWhmdclj9e1PSoZpKWI1"></script>
So at the end solution was to downgrade Chrome version from 61 to 60 and upgrade ChromeDriver from 2.31 to 2.33. it is important to synchronize browser and webdriver versions. Thank all for answers.
When I put "expected_conditions.element_to_be_clickable" instead of "actionChains_move_to_element" and run it under FF Geckodriver it worked fine. So it is Chromedriver problem or Chrome problem, but I don't know exact where or what is causing that. If someone could help me to identify it and open a bug to Chromedriver, would be much thankful.