I have included Jasny fileupload component on an existing form part of a wizard.
Everything is working well on the form itself. The trouble is that when navigating to the next form of the wizard, then going back the file uploaded by the user disappeared.
The problem is therefore that if the user is going backwards in the form, he has to reload each time the file that have been uploaded.
Am I doing anything wrong ? The part of the template storing the file is provided below :
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 100px; height: 100px;"><img src="http://www.placehold.it/100x100/EFEFEF/AAAAAA" /></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="width: 100px; height: 100px;"></div>
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span>
{{ form.file_img1 }}
Remove
</div>
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 100px; height: 100px;"><img src="http://www.placehold.it/100x100/EFEFEF/AAAAAA" /></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="width: 100px; height: 100px;"></div>
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span>
{{ form.file_img2 }}
Remove
</div>
Related
I need to dynamically change image background-image css from home page in django cms, but is imposible.
home
CSS CODE
The css has the welcome-image-area class the user needs to change the image url in the cms.
.welcome-area {
height: 100%;
}
.welcome-image-area {
position: relative;
height: 100%;
background-image: url(../images/bg/bg.jpg);
background-size: cover;
z-index: 1;
}
.welcome-image-area:after {
position: absolute;
background: rgba(0, 0, 0, .7);
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "";
z-index: -1;
}
HTML CODE
base.html
<div id="welcome-image-area" class="welcome-image-area" data-stellar-background-ratio="0.6" >
<div class="display-table">
<div class="display-table-cell">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="header-text">
<h2>{% static_placeholder 'mensaje bienvenida' %}</h2>
<p>{% static_placeholder 'sub mensaje bienvenida' %}</p>
<a class="smoth-scroll hire-us-slide-btn" href="#service">Servicios <i class="fa fa-hand-pointer-o btn-hire-us" aria-hidden="true"></i></a>
<a class="slide-btn smoth-scroll" href="#contact">Contactanos <i class="fa fa-hand-pointer-o btn-contact-us" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In those cases I would recommend to utilize the "style" attribute as following:
<div class="welcome-image-area" style="background-image: url({{ instance.image.url }})"></div>
I want to develop image gallery. I want to present each image and its description under it and when I click on an image or text or white space got "modal"
I wrote this for an element in gallery
<div class="m-4 img99">
<a href="#ml">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="simg " alt="..." data-toggle="modal" data-target="#ml">
<div class="">
<h5 class="">test</h5>
<p>test</p>
</div>
</a>
</div>
The modal part is
<div class="modal fade" id="ml">
<div class="modal-dialog modal-dialog-centered modal-xl ">
<div class="modal-content">
<!-- Modal Header -->
<!-- Modal body -->
<div class="modal-body ">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 ">
<p>
test
</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
and CSS part
.simg {
width: auto;
height: 60px;
}
.img99 {
margin-right: auto !important;
margin-left: auto !important;
width: max-content;
height: max-content;
border: 1px solid rgba(0, 0, 0, 0.15);
}
My problem is when I click on a text or white space the model didn't work. "when I click on image :the model work normally"
https://codepen.io/ahof920/pen/MWYGRYp?editors=1100
What is the problem?
Replace your HTML with this:
Reason why its not working :
Modal are triggered by following tag's in bootstrap data-toggle="modal" data-target="#ml" and you added those inside <img> tag that's the reason modal is opened when clicked on image. So add data-toggle="modal" data-target="#ml" to <a>.
.simg {
width: auto;
height: 60px;
}
.img99 {
margin-right: auto !important;
margin-left: auto !important;
width: max-content;
height: max-content;
border: 1px solid rgba(0, 0, 0, 0.15);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="shadow2 m-4 img99">
<a href="#ml" data-toggle="modal" data-target="#ml">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="simg " alt="...">
<div class="">
<h5 class="">test</h5>
<p>test</p>
</div>
</a>
</div>
<div class="modal fade" id="ml">
<div class="modal-dialog modal-dialog-centered modal-xl ">
<div class="modal-content">
<!-- Modal Header -->
<!-- Modal body -->
<div class="modal-body ">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 ">
<p>
test
</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
I am using Bootstrap's Modal class to have a modal appear after clicking a button. The code works - the button is clicked and the modal appears, however, the whole screen is grayed-out and the modal cannot be clicked. I cannot close the modal since it is "in" the gray background. You can see in the image below:
Here is the code:
<!-- Modal -->
<div id="myModal" class="modal fade" style="z-index: 9999;" 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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<section id="profileMain">
<form class="formoid-solid-dark"
style="background-color: #FFFFFF; font-size: 14px; font-family: 'Trebuchet MS','Roboto', Arial, Helvetica, sans-serif; color: #34495E; max-width: 800px; min-width: 150px"
method="post" action="">
<div class="title">
<h2>Intake Request</h2>
</div>
<div id="mainFormTabs" class="container">
<ul class="nav nav-pills">
<li><a data-toggle="tab" href="#tabCM">Comments</a></li>
</ul>
<div class="container" style="border:1px solid #34495E; border-radius: 0px 4px 4px 4px;">
<div class="tab-content clearfix" style="padding: 10px;">
<div id="tabCM" class="tab-pane fade">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
</div>
</div>
</div>
</div>
</form>
</section>
I have tried adjusting the z-index for the modal, I have moved the modal div outside the body, at the top, and at the bottom of the html form, but none of these worked.
I appreciate any ideas on how to fix this.
You probably fixed it, but there may somebody who can't. The solution to this problem is;
$("#myModal").prependTo("body");
I went back and moved the modal div outside the body tag and it is now working.
</body>
<!-- Modal -->
<div id="myModal" class="modal fade" style="z-index: 9999;" 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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</html>
I guess than you ready solve, but, just for documentation purpose, you can add this to the css and will help
.modal-backdrop {
display: none;
z-index: 1040 !important;
}
.modal-content {
margin: 2px auto;
z-index: 1100 !important;
}
If you cant place modal section outside body, you can try use this:
<script>
$(document).ready(function () {
$("#modalBtnClick").on("click", function () {
$('#myModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
});
});
</script>
and don't forget add id attribute to your button:
<button id="modalBtnClick" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
I had this problem and fixed by giving modal z-index css property :
style="z-index: 999999999;"
as previous solutions didn't work for me
Using FoundationCSS, if I use the basic grid system by defining a row and then columns, I get a grid that is 1000px wide on desktop.
<div class="row">
<div class="small-12 columns">
...
</div>
</div>
However, if I do the same thing, but omit the "row", I get a full width layout.
<div class="small-12 columns">
...
</div>
Are there any side affects I should be aware of by omitting the "row"?
The safest thing I found was to add a new class to make the container full-width:
.full-width {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
And use it in the html:
<body>
<div class="row full-width">
<div class="small-12 columns">
....
</div>
<div class="row"
<div class="small-6 columns>...</div>
<div class="small-6 columns>...</div>
</div>
</div>
</body>
Hi I'm trying to customize my django form and add the file upload widget from Jasny Bootstrap. However, it doesn't seem to be working..
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-file"><span class="fileupload-new">{{ wizard.form.main_image }}</span><span class="fileupload-exists">Change</span><input type="file" /></span>
Remove
</div>
</div>
Any ideas what I am doing wrong? Have I put {{ wizard.form.main_image }} in the wrong place?
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-file"><span class="fileupload-new">Select an Image</span><span class="fileupload-exists">Change</span>
{{ wizard.form.main_image }}</span>
Remove
</div>
</div>