How can I set the modal to the right in Bootstrap 5? I’ve seen a few answers from Google, but most of them aren’t for Bootstrap 5. On big screens, the modal should appear on the right side.
My code
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div>
<div style="position: fixed; bottom: 5px; right: 5px; margin: 0px; padding: 5px 3px; z-index: 1;">
<button type="button" class="btn btn-outline-primary btn-lg" data-bs-toggle="modal" data-bs-target="#NewsModal" #click="getNews()" style="padding: 7px 11px;">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-newspaper" viewBox="0 0 16 16">
<path
d="M0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v10.528c0 .3-.05.654-.238.972h.738a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 1 1 0v9a1.5 1.5 0 0 1-1.5 1.5H1.497A1.497 1.497 0 0 1 0 13.5v-11zM12 14c.37 0 .654-.211.853-.441.092-.106.147-.279.147-.531V2.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v11c0 .278.223.5.497.5H12z"/>
<path d="M2 3h10v2H2V3zm0 3h4v3H2V6zm0 4h4v1H2v-1zm0 2h4v1H2v-1zm5-6h2v1H7V6zm3 0h2v1h-2V6zM7 8h2v1H7V8zm3 0h2v1h-2V8zm-3 2h2v1H7v-1zm3 0h2v1h-2v-1zm-3 2h2v1H7v-1zm3 0h2v1h-2v-1z"/>
</svg>
</button>
</div>
<div class="modal fade" id="NewsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="NewsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="NewsModalLabel">Yangliklar</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3">
<div class="col-12 mb-3" v-for="(item, key) in news">
<div class="card">
<img class="img-fluid" :src="item.photo" role="img" alt="news image" v-if="item.photo !== null">
<img class="img-fluid" src="~/assets/images/news.jpg" role="img" alt="news image" v-else>
<div class="card-body">
<h5 class="card-title">{{ item.name }}</h5>
<div class="collapse card-text" :id="'collapseExample'+item.id" v-html="item.content"></div>
<p class="mt-1">
<div data-bs-toggle="collapse" :data-bs-target="'#collapseExample'+item.id" aria-expanded="false" :aria-controls="'collapseExample'+item.id">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-chevron-up rotate180" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Yopish</button>
</div>
</div>
</div>
</div>
</div>
Add this to your CSS:
#media screen and (min-width: 1400px) {
.modal-dialog {
margin-right: 0 !important;
margin-top: 0 !important;
}
}
If the screen is 1400px or bigger, the modal will be positioned to the right.
See the snippet below.
#media screen and (min-width: 1400px) {
.modal-dialog {
margin-right: 0 !important;
margin-top: 0 !important;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div>
<div style="position: fixed; bottom: 5px; right: 5px; margin: 0px; padding: 5px 3px; z-index: 1;">
<button type="button" class="btn btn-outline-primary btn-lg" data-bs-toggle="modal" data-bs-target="#NewsModal" #click="getNews()" style="padding: 7px 11px;">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-newspaper" viewBox="0 0 16 16">
<path d="M0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v10.528c0 .3-.05.654-.238.972h.738a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 1 1 0v9a1.5 1.5 0 0 1-1.5 1.5H1.497A1.497 1.497 0 0 1 0 13.5v-11zM12 14c.37 0 .654-.211.853-.441.092-.106.147-.279.147-.531V2.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v11c0 .278.223.5.497.5H12z" />
<path d="M2 3h10v2H2V3zm0 3h4v3H2V6zm0 4h4v1H2v-1zm0 2h4v1H2v-1zm5-6h2v1H7V6zm3 0h2v1h-2V6zM7 8h2v1H7V8zm3 0h2v1h-2V8zm-3 2h2v1H7v-1zm3 0h2v1h-2v-1zm-3 2h2v1H7v-1zm3 0h2v1h-2v-1z" />
</svg>
</button>
</div>
<div class="modal fade" id="NewsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="NewsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="NewsModalLabel">Yangliklar</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3">
<div class="col-12 mb-3" v-for="(item, key) in news">
<div class="card">
<img class="img-fluid" :src="item.photo" role="img" alt="news image" v-if="item.photo !== null">
<img class="img-fluid" src="~/assets/images/news.jpg" role="img" alt="news image" v-else>
<div class="card-body">
<h5 class="card-title">{{ item.name }}</h5>
<div class="collapse card-text" :id="'collapseExample'+item.id" v-html="item.content"></div>
<p class="mt-1">
<div data-bs-toggle="collapse" :data-bs-target="'#collapseExample'+item.id" aria-expanded="false" :aria-controls="'collapseExample'+item.id">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-chevron-up rotate180" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Yopish</button>
</div>
</div>
</div>
</div>
</div>
Related
This is the main page
then after loading the page , it automatically scroll to this position.
This is layout page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("My Dashboard", "Index", "Client")</li>
<li>#Html.ActionLink("Domain Registration", "ClientRegistration", "User")</li>
<li>#Html.ActionLink("Employee", "EmployeeList", "Client")</li>
<li>#Html.ActionLink("Work Hour Manage", "WorkHourManage", "Client")</li>
<li>#Html.ActionLink("Department", "DepartmentList", "Client")</li>
<li>#Html.ActionLink("Company", "CompanyList", "Client")</li>
<li>#Html.ActionLink("Logout", "UserLogout", "Login")</li>
</ul>
<div style="color: #ada8a8;float: right;margin-top: 10px;">
#{
var UserType = Request.Cookies["UserType"];
var UserName = Request.Cookies["UserName"];
if (UserName != null && UserType !=null)
{
<text>#(UserType.Value+"-"+UserName.Value)</text>
}
}
</div>
</div>
</div>
</div>
<div class="container-fluid body-content">
#RenderBody()
<hr />
<footer>
<p>© #CommonFunction.GetCurrentDateTime().Year - Employee Tracking & Management Information System.</p>
</footer>
</div>
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
This is the index page, not only index moves, but all pages scroll up automatically
#{
ViewBag.Title = "My Dashboard";
}
#Html.Raw(TempData["Status"])
<div class="HeadingSite">
My Dashboard <div style="float:right;font-weight:normal;">#(Session["DaysLeft"]) Days Left</div>
</div>
<style>
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
.box {
cursor: pointer;
}
.box > .icon {
text-align: center;
position: relative;
}
.box > .icon > .image {
position: relative;
z-index: 2;
margin: auto;
width: 88px;
height: 88px;
border: 8px solid white;
line-height: 88px;
border-radius: 50%;
background: #63B76C;
vertical-align: middle;
}
.box > .icon:hover > .image {
background: #333;
}
.box > .icon > .image > i {
font-size: 36px !important;
color: #fff !important;
}
.box > .icon:hover > .image > i {
color: white !important;
}
.box > .icon > .info {
margin-top: -24px;
background: rgba(0, 0, 0, 0.04);
border: 1px solid #e0e0e0;
padding: 15px 0 10px 0;
}
.box > .icon:hover > .info {
background: rgba(0, 0, 0, 0.04);
border-color: #e0e0e0;
color: white;
}
.box > .icon > .info > h4.title {
font-family: "Roboto",sans-serif !important;
font-size: 16px;
color: #222;
font-weight: 500;
}
.box > .icon > .info > p {
font-family: "Roboto",sans-serif !important;
font-size: 13px;
color: #666;
line-height: 1.5em;
margin: 20px;
}
.box > .icon:hover > .info > h4.title, .box > .icon:hover > .info > p, .box > .icon:hover > .info > .more > a {
color: #222;
}
.box > .icon > .info > .more a {
font-family: "Roboto",sans-serif !important;
font-size: 12px;
color: #222;
line-height: 12px;
text-transform: uppercase;
text-decoration: none;
}
.box > .icon:hover > .info > .more > a {
color: #fff;
padding: 6px 8px;
background-color: #63B76C;
}
.box .space {
height: 30px;
}
</style>
<div class="row">
<div onclick="location.href = '../Client/WorkHourManage';" class="col-sm-4 col-lg-2">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-cog"></i></div>
<div class="info">
<h4 class="title">Manage Work Hour</h4>
<p>
Manage and view work hours of the company..
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/CompanyList';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-industry"></i></div>
<div class="info">
<h4 class="title">Manage Company List</h4>
<p>
Manage or view Company List of this company..
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/EmployeeList';" class="col-sm-4 col-lg-2">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-users"></i></div>
<div class="info">
<h4 class="title">Manage Employees</h4>
<p>
Manage or view Employee of this company..
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/DepartmentList';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-tag"></i></div>
<div class="info">
<h4 class="title">Manage Department</h4>
<p>
Departments are added to employee details..
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/EmployeeBackgroundTrackHistory';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-street-view"></i></div>
<div class="info">
<h4 class="title">Employee Background Tracking</h4>
<p>
Details of Employee presence on different days.
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/EmployeeTrackRouteEstimateList';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-map-marker"></i></div>
<div class="info">
<h4 class="title">Employee Track Route & Estimate</h4>
<p>
Details regarding traveling details, traveling report and conveyance calculation.
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/TravelCostManage';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-money"></i></div>
<div class="info">
<h4 class="title">Manage Base Travelling Cost</h4>
<p>
Details regarding traveling cost of the company. This is a rough calculation and different employees are assigned different amounts for travelling modes.
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/EmployeeEnquiryReport';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-book"></i></div>
<div class="info">
<h4 class="title">Employee Visit Report</h4>
<p>
Reports of employee visits.
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/ChatWithEmployee';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-comments"></i></div>
<div class="info">
<h4 class="title">Chat with Employee</h4>
<p>
You can send messages and view replies from you Employees.
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/UnlockModules';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-unlock-alt"></i></div>
<div class="info">
<h4 class="title">Unlock Modules</h4>
<p>
Unlock or Activate modules. Also can temporarily turn of unwanted modules.
</p>
</div>
</div>
</div>
</div>
</div>
I had this same issue, and disabling Browser Link in Visual Studio fixed it for me. From what I observed on the console, Browser Link runs some Javascript which shifts the page. Hope this helps!
I think it is something wrong with my system. Works perfectly in other pcs.
I used Webessential with autoreload on change options like that. May be my debugger problem.
I am using a free Bootstrap landing page theme, on my current site the code snippet and be run from below, which gives the desired effect on Chrome with Parallax and images. But, there are two issues which I am not able to figure out the reason for:
1.[Solved] In IE, all the sections of the page are displaying fine and Parallax works, but the content for those section is just all displaying on 1st section.
Solution : The v-center class , was causing this issue as pointed by #Fester . Removed it from the markup, and issue fixed but no solution found yet.
Un - Solved Issue
On iOS, the background image is scaled to much and just a bit from the center is displayed. Works fine on iMac, not on iPhone or iPad.
Please bear in mind I am new to CSS and trying to work my way thru, and have tried a few things suggested on different questions for the iOS issue but it does not work. The CSS is not minified, so can be easily viewed.
PS: I know, I need to try something first before asking the question but being a developer not a clue on where to start. Even a bit of pointer will be much appreciated.
Edit 1: Tried modernizr with HTML5shiv but still giving the same issue. Just included the modernizr and HTML5shiv js file. No changes were made to the code.
EDIT 2: The Issue with IE was caused by v-center class. Removed it, and everything fine. But, now actual reason or solution found.
Code is As Below:
/* activate scrollspy menu */
$('body').scrollspy({
target: '#navbar-collapsible',
offset: 52
});
/* smooth scrolling sections */
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 50
}, 800);
if (this.hash=="#section1") {
$('.scroll-up').hide();
}
else {
$('.scroll-up').show();
}
// activte animations in this section
target.find('.animate').delay(1200).addClass("animated");
setTimeout(function(){
target.find('.animated').removeClass("animated");
},2000);
return false;
}
}
});
#import url(http://fonts.googleapis.com/css?family=Lato:300,400);
#import url(http://fonts.googleapis.com/css?family=Bitter:400);
html,body {
height:100%;
background:center no-repeat fixed url('http://dd.e-wizardbathrooms.co.uk/background.jpg');
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size:cover;
color:#444;
font-family: 'Lato', sans-serif;
}
#media (min-width:768px) {
h1 {
font-size:68px;
}
}
a {
color:#999;
}
a:hover {
color:#111;
}
.btn,.well,.panel {
border-radius:0;
}
.btn-danger {
background-color:#f44d3c;
}
.btn-main {
color: #ffffff !important;
border-radius: 10px;
background-color: rgba(244,77,60,0.7);
padding-bottom: 10px;
}
.text-danger, a.text-danger {
color:#f44d3c;
}
.btn-huge {
padding:17px 22px;
font-size:22px;
}
.lato {
font-family: 'Lato', sans-serif;
}
.bitter {
font-family: 'Bitter', serif;
}
.icon-bar {
background-color:#fff;
}
.navbar-trans {
background-color:#273a60;
color:#cdcdcd;
border-width:0;
}
.navbar-trans .navbar-brand, .navbar-trans >.container-fluid .navbar-brand {
padding: 14px;
color:#cdcdcd;
}
.navbar-trans li>a:focus,.navbar-trans li.active {
background-color:#f44d3c;
color:#333;
}
.navbar-trans li>a:hover {
background-color:#f44d3c;
color:#fff;
opacity:0.5;
}
.navbar-trans a{
color:#cdcdcd;
letter-spacing:1px;
}
.navbar-trans .form-control:focus {
border-color: #eee;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
}
.scroll-down {
position: absolute;
left: 50%;
bottom: 40px;
border: 2px solid #fff;
border-radius: 50%;
height: 50px;
width: 50px;
margin-left: -15px;
display: block;
padding: 7px;
text-align: center;
z-index:-1
}
.scroll-up {
position: fixed;
display: none;
z-index: 999;
bottom: 2em;
right: 2em;
}
.scroll-up a {
background-color: rgba(135, 135, 135, 0.5);
display: block;
width: 35px;
height: 35px;
text-align: center;
color: #fff;
font-size: 15px;
line-height: 30px;
}
section {
padding-top:70px;
padding-bottom:50px;
min-height:100%;
min-height:calc(100% - 0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#media (min-width:768px) {
.v-center {
height: 50%;
overflow: visible;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
}
#section1, #section3 {
background-color: rgba(0,0,0,0.3);
color:#fff;
font-family: 'Bitter', serif;
}
#section4 {
background-color: #f6f6f6;
color:#444;
}
#section2 {
background-color: #fff;
}
#section3 {
background-color: rgba(0,0,0,0.9);
}
#section5 {
background-color: #fff;
}
#section6 {
background-color: #eee;
min-height:130px;
padding-top:40px;
padding-bottom:40px;
}
#section7 {
background-color: #273a60;
color: #f6f6f6;
min-height:130px;
padding-top:40px;
padding-bottom:40px;
}
footer {
background-color:#2b2b2b;
color:#ddd;
min-height:100px;
padding-top:20px;
padding-bottom:40px;
}
footer .nav>li>a {
padding: 3px;
color: #f44d3c;
}
footer .nav>li>a:hover {
background-color:transparent;
color:#fff;
}
<!DOCTYPE html>
<html>
<head>
<title>David Dixon Garden Machinery</title>
<meta charset="utf-8">
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body >
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">David Dixon</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>Information</li>
<li>About Us</li>
<li>Contact Us</li>
<li> </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><strong>Phone: </strong>01434-606060</li>
<li><strong>E-Mail:</strong>info#daviddixons.co.uk</li>
</ul>
</div>
</div>
</nav>
<section class="container-fluid" id="section1">
<div class="v-center">
<h1 class="text-center">David Dixon</h1>
<h2 class="text-center lato animate slideInDown"><b>Garden Machinery</b></h2>
<h4 class="text-center lato animate slideInDown">Please Select one of the Following or Scroll Down for More Info.</h4>
<p class="text-center">
<br>
Online Shop
Servicing & Parts
Equipment Hire
</p>
</div>
<a href="#section2">
<div class="scroll-down bounceInDown animated">
<span>
<i class="fa fa-angle-down fa-2x"></i>
</span>
</div>
</a>
</section>
<section class="container-fluid" id="section2">
<div class="container v-center">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12 text-center">
<div class="panel panel-default slideInLeft animate">
<div class="panel-heading">
<h3>Online Shop</h3></div>
<div class="panel-body">
<p>
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
</p>
<hr>Go
<hr>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 text-center">
<div class="row">
<div class="col-sm-12 text-center">
<div class="panel panel-default slideInUp animate">
<div class="panel-heading">
<h3>Servicing & Parts</h3></div>
<div class="panel-body">
<p>
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
</p>
<hr>Go
<hr>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 text-center">
<div class="row">
<div class="col-sm-12 text-center">
<div class="panel panel-default slideInRight animate">
<div class="panel-heading">
<h3>Equipment Hire</h3></div>
<div class="panel-body">
<p>
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
</p>
<hr>Go
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/row-->
<div class="row">
<br>
</div>
</div>
<a href="#section3">
<div class="scroll-down bounceInDown animated">
<span>
<i class="fa fa-angle-down fa-2x"></i>
</span>
</div>
</a>
<!--/container-->
</section>
<section class="container-fluid" id="section3">
<h1 class="text-center">David Dixon</h1>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3 class="text-center lato slideInUp animate">The Best for <strong>Garden and Forest Machinery</strong> in the North East.</h3>
<br>
<div class="row">
<div class="col-xs-4 col-xs-offset-1">Additional Information about David Dixon Company and History</div>
<div class="col-xs-2"></div>
<div class="col-xs-4 text-right">Additional Information about David Dixon Company and History</div>
</div>
<br>
<p class="text-center">
<img src="//placehold.it/10x10/444/FFF" class="img-responsive thumbnail center-block ">
</p>
</div>
</div>
<h3 class="text-center">Brands we Work with</h3>
<div class="row">
<div class="col-sm-2 col-sm-offset-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2 col-sm-offset-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
</div>
<a href="#section4">
<div class="scroll-down bounceInDown animated">
<span>
<i class="fa fa-angle-down fa-2x"></i>
</span>
</div>
</a>
</section>
<section id="section4">
<div class="container v-center">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Contact US</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="row form-group">
<div class="col-sm-5">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required="">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required="">
</div>
</div>
<div class="row form-group">
<div class="col-sm-5">
<input type="email" class="form-control" name="email" placeholder="Email" required="">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" name="phone" placeholder="Phone" required="">
</div>
</div>
<div class="row form-group">
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Message" required="">
</div>
</div>
<div class="row form-group">
<div class="col-sm-10">
<button class="btn btn-default btn-lg pull-right">Send Message</button>
</div>
</div>
</div>
<div class="col-sm-3">
<address>
<strong>Opening Hours:</strong><br>
Monday to Friday: 8am - 5pm<br>
Saturday: 8.30am - 12.30pm<br>
</address>
<address>
<strong>Phone: </strong>01434-606060
</address>
</div>
<div class="col-sm-3 pull-right">
<address>
<strong>David Dixon Ltd.</strong><br>
18, Haugh Lane Industrial Estate<br>
Hexham, Norhtumberland<br>
United Kingdom - NE46 3PU<br>
</address>
<address>
<strong>Email Us</strong><br>
info#daviddixons.co.uk
</address>
</div>
</div>
<div class="row">
<div class="row"> </div>
<a href="#">
<div class="col-sm-2 col-sm-offset-3 col-xs-4 text-center">
<i class="fa fa-facebook fa-4x"></i>
</div>
</a>
<a href="#">
<div class="col-sm-2 col-xs-4 text-center">
<i class="fa fa-google-plus fa-4x"></i>
</div>
</a>
<a href="#">
<div class="col-sm-2 col-xs-4 text-center">
<i class="fa fa-twitter fa-4x"></i>
</div>
</a>
</div>
</div>
</section>
<footer id="footer">
<div class="container">
<!--/row-->
<p class="text-center">David Dixons Ltd. ® 2015</p>
</div>
</footer>
<div class="scroll-up">
<i class="fa fa-angle-up"></i>
</div>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<!--scripts loaded here-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
I have some problems with the plugin jQuery UI sortable with bootstrap 3 grid.
I can't place the placeholder in the correct place, but I will show up.
Also, you could make the action of sortable more accurate, sometimes the action is not performed, perhaps by slowing the action?
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">Photos</h1>
</div>
<div class="panel-body">
<div class="row sortable">
<div class="col-md-3 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">1
</a>
</div>
<div class="col-md-3 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">2
</a>
</div>
<div class="col-md-3 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">3
</a>
</div>
<div class="col-md-3 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">4
</a>
</div>
<div class="col-md-3 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">5
</a>
</div>
<div class="col-md-3 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">6
</a>
</div>
<div class="col-md-3 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">7
</a>
</div>
<div class="col-md-3 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">8
</a>
</div>
</div>
</div>
</div>
</div>
</div>
JS
$( ".sortable" ).sortable({
items : 'div:not(.unsortable)',
placeholder : 'sortable-placeholder'
});
$( ".sortable" ).disableSelection();
CSS
.sortable-placeholder {
margin-left: 0 !important;
border: 1px solid #ccc;
background-color: yellow;
-webkit-box-shadow: 0px 0px 10px #888;
-moz-box-shadow: 0px 0px 10px #888;
box-shadow: 0px 0px 10px #888;
}
DEMO
Any suggestion to solve my problem is welcome. Thanks
You need to specify the width and the height of the placeholder and the properties of the items. (the same properties of col-md-3 class)
.sortable-placeholder {
margin-left: 0 !important;
border: 1px solid #ccc;
background-color: yellow;
-webkit-box-shadow: 0px 0px 10px #888;
-moz-box-shadow: 0px 0px 10px #888;
box-shadow: 0px 0px 10px #888;
float: left;
width: 25%;
height: 0px;
padding-bottom: 20%;
}
Demo link http://www.bootply.com/PX4Q9h4vSD#
(the placeholder might cause some alignment issue because the placeholder and the actual thumb column doesn't have the exact same height)
Does anyone had to make a numeric keyboard manually, with jQuery Mobile, for something like a calculator?
Is there any example to save some work?
Just sharing the work I had in order to accomplish it.
HTML:
<div class="ui-grid-b numBtnKbd">
<div class="ui-block-a numBtnKbdCell borderTopGrey borderLeftGrey">
<div class="numBtnKbdBtn">
1
</div>
</div>
<div class="ui-block-b numBtnKbdCell borderTopGrey borderLeftGrey">
<div class="numBtnKbdBtn">
2
</div>
</div>
<div class="ui-block-c numBtnKbdCell borderTopGrey borderLeftGrey borderRightGrey">
<div class="numBtnKbdBtn">
3
</div>
</div>
<div class="ui-block-a numBtnKbdCell borderTopGrey borderLeftGrey">
<div class="numBtnKbdBtn">
4
</div>
</div>
<div class="ui-block-b numBtnKbdCell borderTopGrey borderLeftGrey">
<div class="numBtnKbdBtn">
5
</div>
</div>
<div class="ui-block-c numBtnKbdCell borderTopGrey borderLeftGrey borderRightGrey">
<div class="numBtnKbdBtn">
6
</div>
</div>
<div class="ui-block-a numBtnKbdCell borderTopGrey borderLeftGrey">
<div class="numBtnKbdBtn">
7
</div>
</div>
<div class="ui-block-b numBtnKbdCell borderTopGrey borderLeftGrey">
<div class="numBtnKbdBtn">
8
</div>
</div>
<div class="ui-block-c numBtnKbdCell borderTopGrey borderLeftGrey borderRightGrey">
<div class="numBtnKbdBtn">
9
</div>
</div>
<div class="ui-block-a numBtnKbdCellBottom borderTopGrey borderLeftGrey borderBottomGrey">
<div class="numBtnKbdBtn">
DEL
</div>
</div>
<div class="ui-block-b numBtnKbdCell borderTopGrey borderLeftGrey borderBottomGrey">
<div class="numBtnKbdBtn">
0
</div>
</div>
<div class="ui-block-c numBtnKbdCellBottom borderTopGrey borderLeftGrey borderBottomGrey borderRightGrey">
<div class="numBtnKbdBtn" style="font-size: 200%; line-height: 50px;">
←
</div>
</div>
</div>
CSS:
.borderTopGrey{
border-top: 1px solid #4d4d4d;
}
.borderLeftGrey{
border-left: 1px solid #4d4d4d;
}
.borderBottomGrey{
border-bottom: 1px solid #4d4d4d;
}
.borderRightGrey{
border-right: 1px solid #4d4d4d;
}
.numBtnKbd {
width: 100%;
height: 245px;
}
.numBtnKbdCell {
background: #e6e6e6;
width: 33.33%;
height: 60px;
cursor: pointer;
color: #4d4d4d;
}
.numBtnKbdCell:active{
background: #ffcc33;
}
.numBtnKbdCellBottom {
background: #29abe2;
width: 33.33%;
height: 60px;
cursor: pointer;
color: #ffffff;
}
.numBtnKbdCellBottom:active{
background: #ffcc33;
color: #000000;
}
.numBtnKbdBtn {
height: 100%;
line-height: 60px;
text-align: center;
font-size: 120%;
}
Hi i'm working on Mobile app. I want these 3 buttons to align vertically one below the other. what happens is , once i put them in a div (with class="footer") , the button width size changes automatically.
<div class="footer" data-role="footer" data-id="fixedFooter" data-position="fixed" style="display:none;" >
<div style="text-align:center; width:100%;">
<input type="button" value="Button">
</div>
<div>
<input type="button" value="submit">
</div>
<div>
<input type="button" value="cancel">
</div>
You need something like this: http://jsfiddle.net/Gajotres/a5USz/
HTML:
<div data-role="footer" data-position="fixed">
<div class="button-holder">
<input type="button" value="Button"/>
</div>
<div class="button-holder">
<input type="button" value="submit"/>
</div>
<div class="button-holder">
<input type="button" value="cancel"/>
</div>
</div>
CSS:
.button-holder {
text-align:center;
width:100%;
}
.button-holder .ui-btn {
width: 100% !important;
}
Add margin: 0 if you want to make them side by side, like this:
.button-holder .ui-btn {
width: 100% !important;
margin: 0 !important;
}