I'm trying to integrate bootstrap on my web application.
Now, I'd like to create a button and after clicking on it, a dialog is displayed.
This is done with success if my xhtml page doesn't contain h:form, but once my xhtml page presents h:form the model can't be displayed.
Bellow is the button:
<div class="panel panel-default">
<div class="panel-heading">
Modals
</div>
<div class="panel-body">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch Demo Modal
</button>
<div class="modal fade" id="myModal" 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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
This is my xhtml page including the button of modal:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
template="/pages/indexTemplate.xhtml">
<h:head>
<title>SLEAM Book | Consult a Facebooker</title>
<link rel="shortcut icon" type="image/x-icon" href="#{resource['icons/hki2.gif']}"/>
<style>
.ui-datatable thead th, .ui-datatable tbody td, .ui-datatable tfoot td {
border-style: none;
</style>
</h:head>
<h:body>
<ui:composition template="indexTemplate.xhtml">
<ui:define name = "content">
<h:form>
<h:outputText value="Add a Publication" styleClass="text-primary"/>
<br/><br/>
<h:inputText value="#{userBean.publicationContent}" styleClass="form-control"/>
<br/>
<p:commandButton value="Post"
action="#{userBean.createPublication}"
styleClass="btn btn-primary"
id="btn" ajax="true"/>
#{userBean.lps.size()}
<div class="panel panel-default">
<div class="panel-heading">
Modals
</div>
<div class="panel-body">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch Demo Modal
</button>
<div class="modal fade" id="myModal" 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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
<br/><br/><br/>
<div class="table-responsive">
<p:dataTable var="car" value="#{userBean.lps}" tableStyleClass="table table-striped">
<f:facet name="header">
List Of Publications
</f:facet>
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Title">
<h:outputText value="#{car.title}" />
</p:column>
<p:column style="width:32px;text-align: center">
<p:commandButton value="Post"
id="btn"
ajax="true"
styleClass="btn btn-primary"/>
</p:column>
</p:dataTable>
<p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="carDetail" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty userBean.selectedPublication}" columnClasses="label,value">
<h:outputText value="Id:" />
<h:outputText value="#{userBean.selectedPublication.id}" />
<h:outputText value="Title" />
<h:outputText value="#{userBean.selectedPublication.title}" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</div>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
The file faces-config.xml is:
<?xml version="1.0" encoding="UTF-8"?>
<faces-config
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
version="2.2">
</faces-config>
Have you please any idea about fixing this issue ?. Thanks a lot.
Ok so i haven't done jsf in forever, but took some time recreating a sample jsf project based on your code, i got it working then i realized the solution is pretty trivial, nothing to do with jsf at all. In an html form, if you have a button and dont specify the type it will default to submit, so clicking on it will submit the form. Since you do not want that happening, you just want a modal to pop up and not POST anything, all you have to do is specify the type. Replace the button with this and it should work:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" type="button">
Launch Demo Modal
</button>
you could try like that:
<p:commandLink value="Edit" styleClass="btn btn-primary" onclick="$('#myModal').modal('show');" update=":myForm" immediate="true"/>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<h:form id="myForm">
<div class="modal-header">
<h4 class="modal-title">Test Modal</h4>
</div>
<div class="modal-body">
Hello World
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</h:form>
</div>
</div>
</div>
HTH
Related
Hello i am stuck in this problem. I have 2 Rows and 4 Columns ( col-md-8 & col md-4 in each row).
Structure is like below (also attached screenshot and code):
Inside container
Row 1 Column 1 (md-8) Row 1 Column 2 (md-4) [Accordion]
Row 2 Column 1 (md-8) Row 2 Column 2 (md-4)
The Column 2 of Row 1 is accordion and when it is expanded it takes whole row 2 with it but i want it to take just column below it which is Row 2 Column 2
See the attached images to have a better understanding:
R2C1 has already space greater than R2C2
When accordion is expanded R2C1 gets too much extra space as compared to R2C2
Is there any thing i am missing or fix this? Thank you.
Here is the code demo
https://stackblitz.com/edit/bootstrap-5-q5cctv?file=src%2Findex.html
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="mt-4 p-5 bg-white rounded-3">
<div class="row">
<div class="col-md-12">
<span class="fw-1">Row 1 Column 1</span>
</div>
</div>
<hr class="my-4">
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="mt-4 p-5 bg-white rounded-3">
<div class="row">
<div class="col-md-3">
<span>R1 C2</span>
<!-- <i class="bi bi-printer-fill"> bi bi-envelope-at-fill </i> -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseOne"
aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Photo Editing,.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo"
aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse"
aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is
intended to demonstrate the <code>.accordion-flush</code> class. This is the
second item's accordion body. Let's imagine this being filled with some
actual content.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseThree"
aria-expanded="false" aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse"
aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is
intended to demonstrate the <code>.accordion-flush</code> class. This is the
third item's accordion body. Nothing more exciting happening here in terms
of content, but just filling up the space to make it look, at least at first
glance, a bit more representative of how this would look in a real-world
application.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="mt-4 p-5 bg-white rounded-3">
<div class="row">
<div class="col-md-12">
<span class="fw-1">Row 2 Column 1</span>
</div>
</div>
<hr class="my-4">
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="mt-4 p-5 bg-white rounded-3">
<div class="row">
<div class="col-md-3">
<span>R2 C2</span>
</div>
</div>
<hr class="my-4">
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
</div>
</div>
</div>
</div>
<footer class="pt-3 mt-4 text-muted border-top">
© 2023
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js"
integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
crossorigin="anonymous"></script>
</body>
</html>
If you don't want the content in second row pushed down after the accordion show, you shouldn't put them on different rows.
Inside container you can use structure like this:
<div class"row">
<div class="col-8">
<div>Some content here</div>
<div>Some content here</div>
</div>
<div class="col-4">
<div>Some content here</div>
<div>Some content here</div>
</div>
</div>
Please note that I removed structures like this:
<div class="row">
<div class="col-12">
Some content here
</div>
</div>
because they are not needed here and you should use flexbox wisely.
Code snippet below, you can run it full page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="mt-4 p-5 bg-white rounded-3">
<span class="fw-1">Row 1 Column 1</span>
<hr class="my-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
<div class="mt-4 p-5 bg-white rounded-3">
<span class="fw-1">Row 2 Column 1</span>
<hr class="my-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
</div>
<div class="col-md-4">
<div class="mt-4 p-5 bg-white rounded-3">
R1 C2
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseOne"
aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Photo Editing,.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo"
aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse"
aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
Placeholder content for this accordion, which is
intended to demonstrate the <code>.accordion-flush</code> class. This is the
second item's accordion body. Let's imagine this being filled with some
actual content.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseThree"
aria-expanded="false" aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse"
aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
Placeholder content for this accordion, which is
intended to demonstrate the <code>.accordion-flush</code> class. This is the
third item's accordion body. Nothing more exciting happening here in terms
of content, but just filling up the space to make it look, at least at first
glance, a bit more representative of how this would look in a real-world
application.
</div>
</div>
</div>
</div>
</div>
<div class="mt-4 p-5 bg-white rounded-3">
R2 C2
<hr class="my-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
</div>
</div>
<footer class="pt-3 mt-4 text-muted border-top">
© 2023
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js"
integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
crossorigin="anonymous"></script>
</body>
</html>
Fairly new to web development. I am attempting to make a responsive website for both mobile and desktop. I'll be honest, its terrible right now. But I'm working on it. I currently have 2 major issues that I've been fighting with for about a full day now. Also Yes I am running django on the backend and vue as a cdn on the front.
I have deployed rellax js into the website for a paralax effect however its creating an ugly overlap and I can't seem to get ride of it.
Once I deployed rellax js my text that was supposed to be center of the landing page disappeared to the bottom. I would like it centered.
Could anyone help me with these issues? Also any input as to how to make this mobile friendly would be awesome, I was just going to lock the images at a certain size if the screen was small.
HTML
{% include 'core/navbar.html' %} {% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static "css/style.css" %}" />
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link href="assets/vendor/aos/aos.css" rel="stylesheet" />
<link
href="assets/vendor/bootstrap/css/bootstrap.min.css"
/>
<link
href="assets/vendor/bootstrap-icons/bootstrap-icons.css"
/>
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet" />
<link
href="assets/vendor/glightbox/css/glightbox.min.css"
rel="stylesheet"
/>
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css"
/>
<title>Tester Site</title>
</head>
<body>
<section id="hero" class="d-flex align-items-center">
<div id="bg">
<div class="bg">
<img src="{% static "media/ocean.png" %}" class="bg" alt="" data-rellax-speed="2" data-rellax-percentage="0.5" />
<img src="{% static "media/girl.png" %}" class="girl" data-rellax-speed="7" data-rellax-percentage="0.5" style="top: -195px; height: 1000px; width: auto;" />
</div>
</div>
<div
class="col-sm-2"
data-aos="zoom-in"
data-aos-delay="100"
>
<h1>
<span class="blast" aria-hidden="true" style="opacity: 1">e</span>
<span class="blast" aria-hidden="true" style="opacity: 1">x</span>
<span class="blast" aria-hidden="true" style="opacity: 1">p</span>
<span class="blast" aria-hidden="true" style="opacity: 1; padding-right: 8px">l
</span>
<span class="blast" aria-hidden="true" style="opacity: 1">o</span>
<span class="blast" aria-hidden="true" style="opacity: 1">r</span>
<span class="blast" aria-hidden="true" style="opacity: 1">e</span>
</h1>
<h2>
<span class="blast" aria-hidden="true" style="opacity: 1">C</span>
<span class="blast" aria-hidden="true" style="opacity: 1">r</span>
<span class="blast" aria-hidden="true" style="opacity: 1">e</span>
<span class="blast" aria-hidden="true" style="opacity: 1">a</span>
<span class="blast" aria-hidden="true" style="opacity: 1">t</span>
<span
class="blast"
aria-hidden="true"
style="opacity: 1; padding-right: 3px"
>e</span
>
<span
class="blast"
aria-hidden="true"
style="opacity: 1; padding-right: 5px"
>a</span
>
<span
class="blast"
aria-hidden="true"
style="opacity: 1; padding-right: 5px"
>
<div id="container">
<div id="text"></div>
<div id="cursor"></div>
</div>
</span>
</h2>
About Me
</div>
</section>
<footer id="footer" data-rellax-speed="10" data-rellax-percentage="-1.0"></footer>
<section id="about" class="about">
<div class="container" data-aos="fade-up">
<div class="section-title">
<br>
<h2>
<span>A</span>
<span>b</span>
<span>o</span>
<span>u</span>
<span>t</span>
</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row">
<div class="col-lg-4">
<img src="https://webp.bearsofficialsstore.com/237169917.webp" class="img-fluid" alt="">
</div>
<div class="col-lg-8 pt-4 pt-lg-0 content">
<h3>Illustrator & UI/UX Designer</h3>
<p class="fst-italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<div class="row">
<div class="col-lg-6">
<ul>
<li><i class="bi bi-rounded-right"></i> <strong>Birthday:</strong> 1 May 1995</li>
<li><i class="bi bi-rounded-right"></i> <strong>Website:</strong> www.example.com</li>
<li><i class="bi bi-rounded-right"></i> <strong>Phone:</strong> +123 456 7890</li>
<li><i class="bi bi-rounded-right"></i> <strong>City:</strong> City : New York, USA</li>
</ul>
</div>
<div class="col-lg-6">
<ul>
<li><i class="bi bi-rounded-right"></i> <strong>Age:</strong> 30</li>
<li><i class="bi bi-rounded-right"></i> <strong>Degree:</strong> Master</li>
<li><i class="bi bi-rounded-right"></i> <strong>PhEmailone:</strong> email#example.com</li>
<li><i class="bi bi-rounded-right"></i> <strong>Freelance:</strong> Available</li>
</ul>
</div>
</div>
<p>
Officiis eligendi itaque labore et dolorum mollitia officiis optio vero. Quisquam sunt adipisci omnis et ut. Nulla accusantium dolor incidunt officia tempore. Et eius omnis.
Cupiditate ut dicta maxime officiis quidem quia. Sed et consectetur qui quia repellendus itaque neque. Aliquid amet quidem ut quaerat cupiditate. Ab et eum qui repellendus omnis culpa magni laudantium dolores.
</p>
</div>
</div>
</div>
</section><!-- End About Section -->
<!-- ======= Skills Section ======= -->
<section id="skills" class="skills">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Skills</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row skills-content">
<div class="col-lg-6">
<div class="progress">
<span class="skill">Video Editing <i class="val">100%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">Photoshop <i class="val">90%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">Audio Editing <i class="val">75%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="progress">
<span class="skill">Content Creation <i class="val">80%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">WordPress/CMS <i class="val">90%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</section><!-- End Skills Section -->
</div>
</template>
<br>
<br>
<br>
<br>
<!-- End Hero -->
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14"></script>
<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax#master/rellax.min.js"></script>
<script>
// Center all the things!
var rellax = new Rellax('.girl', {
center: false
});
var rellax = new Rellax('.bg', {
center: true
});
</script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
-->
<script>
var _CONTENT = [
"Simple Life",
"Meaningful life",
"Positive Life",
"masterpiece"
];
// Current sentence being processed
var _PART = 0;
// Character number of the current sentence being processed
var _PART_INDEX = 0;
// Holds the handle returned from setInterval
var _INTERVAL_VAL;
// Element that holds the text
var _ELEMENT = document.querySelector("#text");
// Cursor element
var _CURSOR = document.querySelector("#cursor");
// Implements typing effect
function Type() {
// Get substring with 1 characater added
var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
_ELEMENT.innerHTML = text;
_PART_INDEX++;
// If full sentence has been displayed then start to delete the sentence after some time
if(text === _CONTENT[_PART]) {
// Hide the cursor
_CURSOR.style.display = 'none';
clearInterval(_INTERVAL_VAL);
setTimeout(function() {
_INTERVAL_VAL = setInterval(Delete, 60);
}, 1000);
}
}
// Implements deleting effect
function Delete() {
// Get substring with 1 characater deleted
var text = _CONTENT[_PART].substring(0, _PART_INDEX - 1);
_ELEMENT.innerHTML = text;
_PART_INDEX--;
// If sentence has been deleted then start to display the next sentence
if(text === '') {
clearInterval(_INTERVAL_VAL);
// If current sentence was last then display the first one, else move to the next
if(_PART == (_CONTENT.length - 1))
_PART = 0;
else
_PART++;
_PART_INDEX = 0;
// Start to display the next sentence after some time
setTimeout(function() {
_CURSOR.style.display = 'inline-block';
_INTERVAL_VAL = setInterval(Type, 120);
}, 200);
}
}
// Start the typing effect on load
_INTERVAL_VAL = setInterval(Type, 100);
</script>
</body>
</html>
Image 1
Image 2 after scrolling down
as you can see the background image that is being scrolled over is popping out on the other side and looks nasty. Any idea how to fix that?
You can also see how the about btn and the txt are all right there at the bottom and not at the top and centered where I am trying to put them.
Any help would be amazing!!
I'm trying to upgrade my site from Bootstrap 3 to Bootstrap 4. When I changed to Bootstrap 4, now a URL that is inside the modal-body exceeds the width of the modal. As far as I can tell the syntax of the modal is correct for Bootstrap 4, so I'm not sure why the modal width isn't stretching to fit the URL like it did in Bootstrap 3.
Here is a screenshot with the URL circled in yellow: URL too wide
Here is the code:
<?php
echo "<div class='modal fade' id='$p->fldHref' tabindex='-1' role='dialog' aria-labelledby='$p->fldModalLabel'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h3 class='modal-title' id='$p->fldModalLabel'>$p->fldModalTitle</h3>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button>
</div>
<div class='modal-body'>
<p>".html_entity_decode($p->fldModalBody)."</p>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default btn-sm' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
</div>"
?>
use whitespace css property. here is an example: https://www.w3schools.com/cssref/pr_text_white-space.asp
here is playground: https://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space&preval=pre
Check what is specified on your code with inspect element and try with whitespace -> It should solve
Use CSS word-break: break-word; for .modal-body and to do that add another class with it (.modal-body) or better if you add another div inside and use word-break: break-word; in that (like the snippet below), whenever you do word-break: break-word; could be the solution-
.modal-body-content {
word-break: break-word
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-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">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, quasi quidem magnam?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="modal-body-content">
<p>Lorem ipsum, dolor, sit amet consectetur adipisicing elit. Quo amet, ullam aliquam!</p>
<p>Excepturi magnam, rerum explicabo dolorum vel quo, qui! Necessitatibus non nulla, nostrum.</p>
https://www.google.com/search?q=pgbjr+oijfgboiwn+ogmn+wigj+oiwm+igjbioijeaifo+i+ijerijkoferfgjo&rlz=1C1CHBD_enBD924BD924&oq=pgbjr+oijfgboiwn+ogmn+wigj+oiwm+igjbioijeaifo+i+ijerijkoferfgjo&aqs=chrome..69i57.4620j0j7&sourceid=chrome&ie=UTF-8
<p>Ipsa cumque dignissimos odio optio deleniti ab, iste consequuntur rerum, obcaecati repellat?</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Bootstrap 4 - the content in the navigation bar moves slightly to the right when the page is shorter than the screen height - this doesn't happen with longer pages. I have posted the code from two pages. A home page which is the longer page and a login page which is shorter and twitches.
I am wondering if the solution is to give a minimum height for the content - though I would prefer not to override Boostrap
Longer content with static non twitching navbar
<!-- head start -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Home page of MVC test </title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/main.css">
<!-- Custom CSS -->
<link href="/css/blog-home.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- head end -->
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MVC Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation_bar" aria-controls="navigation_bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation_bar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class='nav-item active'><a href='http://mvc.test/home' class='nav-link' >Home</a></li><li class='nav-item'><a href='http://mvc.test/posts' class='nav-link' >Posts</a></li><li class='nav-item'><a href='http://mvc.test/about' class='nav-link' >About</a></li><li class='nav-item'><a href='http://mvc.test/register' class='nav-link' >Register</a></li><li class='nav-item'><a href='http://mvc.test/login' class='nav-link' >Login</a></li> </ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- page content start -->
<div class="container">
<!-- start of row -->
<div class="row">
<!-- page content left start -->
<div class="col-md-8">
<h1 class="page-header">
Home </h1>
<h2 ><a href = "#" >A first post - I do say</a ></h2 >
<p class="lead">
by Start Bootstrap
</p>
<p><span class="glyphicon glyphicon-time"></span>2020-02-03 11:00:00</p>
<hr>
<img class="img-fluid" src="http://placehold.it/900x300" alt="">
<hr>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<hr>
<h2 ><a href = "#" >A second post</a ></h2 >
<p class="lead">
by Start Bootstrap
</p>
<p><span class="glyphicon glyphicon-time"></span>2020-02-03 16:00:00</p>
<hr>
<img class="img-fluid" src="http://placehold.it/900x300" alt="">
<hr>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<hr>
</div>
<!-- page content left end -->
<!-- page content right start -->
<div class="col-md-4 bg-light ">
<!-- Blog Search Well -->
<div class="pt-3 ml-1">
<h4>Blog Search</h4>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<!-- /.input-group -->
</div>
<!-- Blog Categories Well -->
<div class="pt-1 ml-1">
<h4>Blog Categories</h4>
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled">
<li>Category Name
</li>
<li>Category Name
</li>
<li>Category Name
</li>
<li>Category Name
</li>
</ul>
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li>Category Name
</li>
<li>Category Name
</li>
<li>Category Name
</li>
<li>Category Name
</li>
</ul>
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
</div>
<!-- Side Widget Well -->
<div class="bg-light">
<h4>Side Widget Well</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perspiciatis adipisci accusamus laudantium odit aliquam repellat tempore quos aspernatur vero.</p>
</div>
</div>
<!-- page content right end -->
</div>
<!-- end of row -->
<!-- Footer -->
<footer>
<div class="row">
<div class="col-md-12">
<p>Copyright © Your Website 2014 </p>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</footer>
</div>
<!-- end of container -->
<!-- jQuery -->
<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>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
<!-- page content end -->
Shorter content with content that moves or twitches to the right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>This is a login title </title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/main.css">
<!-- Custom CSS -->
<link href="/css/blog-home.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MVC Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation_bar" aria-controls="navigation_bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation_bar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class='nav-item'><a href='http://mvc.test/home' class='nav-link' >Home</a></li><li class='nav-item'><a href='http://mvc.test/posts' class='nav-link' >Posts</a></li><li class='nav-item'><a href='http://mvc.test/about' class='nav-link' >About</a></li><li class='nav-item'><a href='http://mvc.test/register' class='nav-link' >Register</a></li><li class='nav-item active'><a href='http://mvc.test/login' class='nav-link' >Login</a></li> </ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-12 ">
<div class="col-md-6 mx-auto">
<div class="card card-light bg-light mt-5">
<h2>Login to your account</h2>
<p>Please fill in your credentials</p>
<form action="http://mvc.test/login" method="post" >
<div class="form-group">
<label for="email">Email: <sup>*</sup></label>
<input type="email" name="email" class="form-control form-control-lg " value="">
<span class="invalid-feedback"></span>
</div>
<div class="form-group">
<label for="password">Password: <sup>*</sup></label>
<input type="password" name="password" class="form-control form-control-lg " value="">
<span class="invalid-feedback"></span>
</div>
<div class="row">
<div class="col">
<input type="submit" value="Login" class="btn btn-success btn-block">
</div>
<div class="col">
Don't have an account? Login
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" >
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-md-12">
<p>Copyright © Your Website 2014 </p>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</footer>
</div>
<!-- end of container -->
<!-- jQuery -->
<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>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
thanks C
html {
overflow-y: scroll;
}
This is a solution to my 'twitching' nav bar, see above. I've read that this is not a good CSS and that it doesn't work in opera - however I've seen that the BBC website uses this if that means anything.
My bootstrap modal is working fine.
My problem is that I need the modal window (including the gray background) to be applied on a div from the website and not on the body.
I have the following structure:
<div class="bigform-content">
<div class="wpcol-one col-md-6">
</div>
<div class="wpcol-one col-md-6">
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="dialog_confirm_map" tabindex="-1" role="dialog" aria-labelledby="dialog_confirm_mapLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>You didn't move the map pin, are you sure it is on your address/house?</p>
</div>
<div class="modal-footer">
<span style="float:left"><button type="button" class="btn btn-default" data-dismiss="modal">No, I'll do it now </button></span>
<span style="float:right"><button type="button" class="btn btn-primary" data-dismiss="modal" onClick="jQuery('#mapchanged').val(1);jQuery('#registration').submit();">Yes, I am sure</button></span>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Now the modal window is opening correctly but I need to see it on the first div, and the other div to be click able when the modal window is open.
Can you please give me a solution for that?
Thank you so much,
Raluca.
Here's an example I just did using your code and doing little tweaks to it.
Click here and watch it working
How to solve it:
$(function () {
//getting click event to show modal
$('#submit-button').click(function () {
$('#dialog_confirm_map').modal();
//appending modal background inside the bigform-content
$('.modal-backdrop').appendTo('.bigform-content');
//removing body classes to enable click events
$('body').removeClass();
});
//just to prove actions outside modal
$('#help-button').click(function () {
alert("Action with modal opened or closed");
});
//end just to prove actions outside modal
});
.bigform-content {
border: solid 5px #DDD;
margin: 30px 20px;
overflow: hidden;
padding:20px;
position:relative;
}
.modal, .modal-backdrop {
position: absolute !important;
}
.bigform-content h1 {
margin:0;
}
.bigform-content input[type=submit] {
margin-top:10px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="bigform-content">
<div class="wpcol-one col-md-6">
<h1>Hi, this is my form title</h1>
</div>
<div class="wpcol-one col-md-6">
<p>This is my form</p>
<label for="field-one">Field 1:</label>
<input id="field-one" class="form-control" type="text" />
<label for="field-two">Field 2:</label>
<input id="field-two" class="form-control" type="text" />
<label for="field-three">Field 1:</label>
<input id="field-three" class="form-control" type="text" />
<input id="submit-button" type="submit" value="Submit my form" class="btn btn-default" />
</div>
<!-- Modal -->
<div class="modal fade" id="dialog_confirm_map" tabindex="-1" role="dialog" aria-labelledby="dialog_confirm_mapLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>You didn't move the map pin, are you sure it is on your address/house?</p>
</div>
<div class="modal-footer"> <span style="float:left"><button type="button" class="btn btn-default" data-dismiss="modal">No, I'll do it now </button></span>
<span style="float:right"><button type="button" class="btn btn-primary" data-dismiss="modal" onClick="jQuery('#mapchanged').val(1);jQuery('#registration').submit();">Yes, I am sure</button></span>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
<p>Content outside div and modal</p>
<p>Hope it
<input id="help-button" type="button" value="helps" class="btn btn-success" />
</p>
Thanks for the answer from wilsotobianco.
For future reference I'm posting my solution as well. This works for all modals if you require multiple ones, without writing additional JS for every single modal.
Set them up like you would normally in bootstrap. The trigger simply requires the class .js-modal-rel-trigger and needs removal of the attribute data-toggle="modal" since we're toggling it with JS.
And the modal requires a custom class, in my case .modal-rel to give it a smaller z-index and position: absolute;.
The backdrop also gets the class .modal-rel-backdrop assigned for the same reason.
$('.js-modal-rel-trigger').click(function() {
var modalId = $(this).attr('data-target');
$(modalId).modal();
$('.modal-backdrop').addClass('modal-rel-backdrop').appendTo($(modalId).parent());
$('body').removeClass('modal-open');
});
body {
background: #F3F5F6 !important;
}
.container {
top: 50px;
background: #fff;
margin: 0 auto;
width: 80%;
padding: 20px;
position: relative;
}
.modal.modal-rel {
position: absolute;
z-index: 51;
}
.modal-backdrop.modal-rel-backdrop {
position: absolute;
z-index: 50;
// Fade for backdrop
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
<br> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
<br>no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg js-modal-rel-trigger" data-target="#myModal">
Abs. Modal
</button>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg js-modal-rel-trigger" data-target="#mySecondModal">
Second abs. modal
</button>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-target="#myNormalModal" data-toggle="modal">
Default Modal
</button>
<!-- Modal -->
<div class="modal modal-rel fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">Modal title</h4>
</div>
<div class="modal-body">
Hi, I am positioned absolute!
</div>
</div>
</div>
</div>
<div class="modal modal-rel fade" id="mySecondModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">Modal Second title</h4>
</div>
<div class="modal-body">
Hi, I also am positioned absolute!
</div>
</div>
</div>
</div>
<div class="modal fade" id="myNormalModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">Normal Modal</h4>
</div>
<div class="modal-body">
h0i. I have fixed positioning!
</div>
</div>
</div>
</div>
</div>