Can anyone help me on my problem wherein the two buttons should be on the footer side which is at the bottom side of the modal. Just focus on the two buttons, do not mind the other contents hehe. I did some adjustments of the modal height because I am trying to copy the height of the modal design for us.
Herewith is the attached jfiddle to fully elaborate my problem. Thanks! https://jsfiddle.net/wqj9x0md/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<button class="btn m-2 btn-primary add-order myBtn">ADD ORDER</button>
<!-- Trigger/Open The Add Order -->
<div id="modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<span class="close float-end">×</span></h3>
<form action="" method="">
<div class="row title">
<div class="col">Order</div>
<div class="col">Pieces</div>
<div class="col">Price</div>
</div>
<div class="row add-order-info text-center">
<div class="col">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
Select...
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Laptop</a></li>
<li><a class="dropdown-item" href="#">Computer</a></li>
<li><a class="dropdown-item" href="#">IPAD</a></li>
</ul>
</div>
</div>
<div class="col">
<input type="text" name="" id="">
</div>
<div class="col">
<input type="text" name="" id="">
</div>
</div>
<div id="formsContainer">
<div style="display: none;" id="form1">
<form action="" method="" id="add-order-form">
<div class="row add-order-info text-center">
<div class="col">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
Select...
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Laptop</a></li>
<li><a class="dropdown-item" href="#">Computer</a></li>
<li><a class="dropdown-item" href="#">IPAD</a></li>
</ul>
</div>
</div>
<div class="col">
<input type="text" name="" id="">
</div>
<div class="col">
<input type="text" name="" id="">
</div>
</div>
</form>
</div>
</div>
<button type="button" value="Add Child" onclick="addForm();" id="add-button">
+
</button>
<div class="center my-3">
<div class="row fw-bold">
<div class="col-4 total" style="color: #116657;">TOTAL</div>
<div class="col-3">450</div>
</div>
</div>
<div class="d-inline d-flex justify-content-center
align-items-center">
<button class="btn-add-order" type="submit">Add Order</button>
<button class="btn-cancel-order">Cancel</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal END -->
<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>
The div element containing your Add order and Cancel buttons:
<div class="d-inline d-flex justify-content-center align-items-center" ...
Could be positioned absolute since the modal already has position:relative;
So if you style it like this:
position: absolute;
bottom: 1em;
left: 50%;
transform: translate(-50%, 0);
You'll have it centered and with a gap of 1em from its parent bottom border.
BUT...of course I forgot to take into account the fact that position absolute was going to detach the element from the flow and it won't occupy space anymore.
So as you pointed out in comments there's the chance some content will overlap.
There's a solution while still keeping the absolute positioning strategy but I don't like it indeed.
You could put a padding bottom on that containing block, thick as much as the height of your button stripe.
But it's very annoying because you should move the position: relative; to your .modal-content instead of your .modal-body and you should have it styled also with padding-bottom: 4em;
It will work as far as I tried in your jsfiddle but I'm the first one saying there must be a better way.
if you take a look at the code you will see that there is a class called " modal-body" and the content inside of it is the body, if you want to display the buttons in the footer you will have to add a div with class "modal-footer" u can tell that it will display the content in the footer by its name haha
here's the full code of the modal :
<div class="modal-content">
<div class="modal-body">
<span class="close float-end">×</span>
<form action="" method="">
<div class="row title">
<div class="col">Order</div>
<div class="col">Pieces</div>
<div class="col">Price</div>
</div>
<div class="row add-order-info text-center">
<div class="col">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
Select...
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Laptop</a></li>
<li><a class="dropdown-item" href="#">Computer</a></li>
<li><a class="dropdown-item" href="#">IPAD</a></li>
</ul>
</div>
</div>
<div class="col">
<input type="text" name="" id="">
</div>
<div class="col">
<input type="text" name="" id="">
</div>
</div>
<div id="formsContainer">
<div style="display: none;" id="form1">
<form action="" method="" id="add-order-form">
<div class="row add-order-info text-center">
<div class="col">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
Select...
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Laptop</a></li>
<li><a class="dropdown-item" href="#">Computer</a></li>
<li><a class="dropdown-item" href="#">IPAD</a></li>
</ul>
</div>
</div>
<div class="col">
<input type="text" name="" id="">
</div>
<div class="col">
<input type="text" name="" id="">
</div>
</div>
</form>
</div>
</div>
<button type="button" value="Add Child" onclick="addForm();" id="add-button">
+
</button>
<div class="center my-3">
<div class="row fw-bold">
<div class="col-4 total" style="color: #116657;">TOTAL</div>
<div class="col-3">450</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<div class="d-inline d-flex justify-content-center
align-items-center">
<button class="btn-add-order" type="submit">Add Order</button>
<button class="btn-cancel-order">Cancel</button>
</div>
</div>
Related
There are some elements that come from array, then I need them to get placed in a list with a diplay flex, my problem is I added a button that should collapse the selected one but others get their height modified aswell...
Have tryed with diferent display and placing inline on li elements but nothing works.
Any way to have elements in a list inline and heigh independant?
.dragscroll {
display: flex;
overflow-x: auto;
}
.rectangle-holder {
border: 1px solid black;
}
ul {
list-style-type: none;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid p-0">
<div class="row">
<div class="col-12">
<ul class="dragscroll">
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment1" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment1">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment2" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment2">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment3" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment3">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment4" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment4">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment5" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment5">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment6" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment6">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment7" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment7">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>
You need to add css property align-items: flex-start;.
It defines the default behaviour for how flex items are laid out along the cross axis on the current line. And flex-start set cross-start margin edge of the items is placed on the cross-start line.
.dragscroll {
display: flex;
overflow-x: auto;
align-items: flex-start;
}
I am trying to pick two different start points for the slide content. The setSlideContent indicator is set to 17 for the main gallery. But for the modal that will popup if there is alternate variations of that image will start at 0. Is there a way to start the slide content at 17 for main gallery carousel, but if it is a modal carousel, have it start at 0? I'm guessing I need an if/else here.
Would (using the original script) changing the setSlideContent to check if $carouselSelector contains .modal return setSlideSelector(0) else if $carouselSelector does not contain .modal return setSlideSelector(17) or whatever number I need work? Still extremely new to this.
NOTE in the example below the setSlideContent is set to 0 but but it is never set to 0 in practice (unless the carousel is in a modal) to take into account new slides being added. The number will always be the last slide added in my case it is 17.
$(function() {
$('.carousel-container').each(function() {
var $carouselContainer = $(this);
var $carousel = $carouselContainer.find('.carousel');
var $carouselText = $carouselContainer.find('.carousel-text');
var $carouselSelector = $carouselContainer.find('.carousel-selector');
$carousel.carousel({
interval: false
});
function setSlideContent(id) {
var targetContent = $carouselContainer.find('.slide-content[data-slide="' +
id +
'"]').html();
$carouselText.html(targetContent);
}
setSlideContent(0);
$carouselSelector.on('click', function() {
var targetSlide = $(this).data('slide');
$carousel.carousel(targetSlide);
});
$carousel.on('slid.bs.carousel', function() {
var targetSlide = $carousel.find('.active').index();
setSlideContent(targetSlide);
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="container carousel-container">
<div class="row">
<div class="col">
<div class="carousel slide" id="carousel-0">
<!-- change this id and match with that in the JS -->
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one">
</div>
<div class="carousel-item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two">
</div>
<!-- Carousel nav -->
<a class="carousel-control-prev" href="#carousel-0" role="button" data-slide="prev">
<!-- change this id and match with that in the JS -->
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel-0" role="button" data-slide="next">
<!-- change this id and match with that in the JS -->
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col carousel-text"></div>
<div style="display: none;">
<!-- only needs the inline CSS -->
<div class="slide-content" data-slide="0">
<h5>Slide 1</h5>
<button class="btn btn-outline-dark btn-sm" data-toggle="modal" data-target="#modal1" type="button" style="margin-left: -1px;">press me</button>
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Download</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./Downloads/avarice/avarice1/avarice-nodof1280.jpg" download>1280x1024</a>
</div>
</div>
</div>
<div class="slide-content" data-slide="1">
<!-- change this id and match with that in the JS -->
<h5>Slide 2</h5>
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Downloads</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./Downloads/avarice/avarice0/avarice01280.jpg" download>1280x1024</a>
</div>
</div>
</div>
</div>
</div>
<hr>
<!--/Slider-->
<div class="row">
<div class="col">
<a class="carousel-selector" data-slide="0"><img src="http://placehold.it/170x100&text=one" class="img-thumbnail"></a>
<!-- change this id and match with that in the JS -->
</div>
<div class="col">
<a class="carousel-selector" data-slide="1"><img src="http://placehold.it/170x100&text=two" class="img-thumbnail"></a>
<!-- change this id and match with that in the JS -->
</div>
</div>
</div>
<div class="container carousel-container">
<div class="row">
<div class="col">
<div class="carousel slide" id="carousel-1">
<!-- change this id and match with that in the JS -->
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one">
</div>
<div class="carousel-item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two">
</div>
<!-- Carousel nav -->
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<!-- change this id and match with that in the JS -->
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<!-- change this id and match with that in the JS -->
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col carousel-text"></div>
<!-- change this id and match with that in JS -->
<div style="display: none;">
<!-- only needs the inline CSS -->
<div class="slide-content" data-slide="0">
<!-- change this id and match with that in the JS -->
<h5>Dreams of Avarice1</h5>
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Download</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./Downloads/avarice/avarice1/avarice-nodof1280.jpg" download>1280x1024</a>
</div>
</div>
</div>
<div class="slide-content" data-slide="1">
<!-- change this id and match with that in the JS -->
<h5>Avarice Zero1</h5>
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Downloads</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./Downloads/avarice/avarice0/avarice01280.jpg" download>1280x1024</a>
</div>
</div>
</div>
</div>
</div>
<hr>
<!--/Slider-->
<div class="row">
<div class="col">
<a class="carousel-selector" data-slide="0"><img src="http://placehold.it/170x100&text=one" class="img-thumbnail"></a>
<!-- change this id and match with that in the JS -->
</div>
<div class="col">
<a class="carousel-selector" data-slide="1"><img src="http://placehold.it/170x100&text=two" class="img-thumbnail"></a>
<!-- change this id and match with that in the JS -->
</div>
</div>
</div>
<!-- modal -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3>...</h3>
</div>
<div class="modal-body">
<div class="container-fluid carousel-container">
<div class="container">
<div class="row mx-auto">
<div class="col">
<div class="carousel slide carousel-fade" id="carousel-...">
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img data-src="./Downloads/hoohum" src="./loader-carousel.gif" class="lazy img-thumbnail" width="450" height="250"></div>
<div class="carousel-item" data-slide-number="1">
<img data-src="./Downloads/hoohum" src="./loader-carousel.gif" class="lazy img-thumbnail" width="450" height="250"></div>
</div>
</div>
</div>
</div>
<hr>
<div class="row mx-auto">
<div class="col carousel-text"></div>
<div style="display: none;">
<div class="slide-content" data-slide="0">
<h5>0ne</h5>
<div class="btn-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Desktop</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/something/something" download>1280x1024</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Dual</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/something/something" download>2560x1024 (Dual)</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Triple</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/something/something" download>3840x1024 (Triple)</a>
</div>
</div>
</div>
</div>
<div class="slide-content" data-slide="1">
<h5>two</h5>
<div class="btn-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Desktop</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/other/other" download>1280x1024</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Dual</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/other/other" download>2560x1024 (Dual)</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Triple</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/other/other" download>3840x1024 (Triple)</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<!--/Slider-->
<div class="row mx-auto">
<div class="col">
<a class="carousel-selector" data-slide="0"><img data-src="./Downloads/hoohum" src="./loader-thumb.gif" class="lazy img-thumbnail" width="75" height="42"></a>
</div>
<div class="col">
<a class="carousel-selector" data-slide="1"><img data-src="./Downloads/hoohum" src="./loader-thumb.gif" class="lazy img-thumbnail" width="75" height="42"></a>
</div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
If I understand correctly, you want :
to initialize the modal carousel at its first slide, with corresponding caption.
to initialize all other carousels at their last slide, with corresponding caption.
At least, that would makes sense.
If I'm right, then the javascript will be something like this :
$(function() {
$('.carousel-container').each(function() {
var $carouselContainer = $(this);
var $carousel = $carouselContainer.find('.carousel').on('slid.bs.carousel', function() {
var targetSlide = $carousel.find('.active').index();
var targetContent = $carouselContainer.find('.slide-content[data-slide="' + targetSlide + '"]').html();
$carouselContainer.find('.carousel-text').html(targetContent);
}).carousel({
interval: false
});
$carouselContainer.find('.carousel-selector').on('click', function() {
var targetSlide = $(this).data('slide');
$carousel.carousel(targetSlide);
});
// The carousel is already at first slide (slide 0).
var n = $carouselContainer.find(".slide-content").length; // number of slides in this carousel
if (n < 2 || $carouselContainer.closest(".modal").length > 0) { // if there are less than 2 slides, or the carousel is in a .modal container
// Trigger the 'slid.bs.carousel' event so its handler can look after the .carousel-text ...
$carousel.trigger('slid.bs.carousel');
} else { // ... else, there are 2 or more slides and this is a non-modal carousel:
// send to last slide
$carousel.carousel(n - 1);
$carousel.trigger('slid.bs.carousel'); // shouldn't be necessary but has been found to be a workaround for `slid.bs.carousel` not being triggered automatically under some (undiagnosed) circumstances.
}
});
});
Demo
<!doctype html>
<html>
<head>
<title>title</title>
<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/bootstrap.css"/>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="img/logo.png" id="logo" class="img-responsive">
</div>
<div class="col-md-4" id="searchbox">
<div id="search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg"/>
</div>
</div>
</div>
<div class="col-md-1" id="search-button">
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<img src="img/search.png" class="img-responsive"/>
</button>
<span>
</div>
<div class="col-md-3" id="login-name">
<p> Logged in: John Smith </p>
</div>
<div class="col-md-1">
<img src="img/settings.png" id="settings-icon" class="img-responsive"/>
</div>
</div>
<div class="row">
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Projects</li>
<li>News</li>
<li>Careers</li>
<li class="active" id="active-link">Contact Us</li>
<li>About Us</li>
<li>Case Studies</li>
<li>Blog</li>
<li>Customers</li>
<li class="dropdown">
<ul class="dropdown-menu">
<li>Home</li>
<li>Projects</li>
<li>News</li>
<li>Careers</li>
<li class="active">Contact Us</li>
<li>About Us</li>
<li>Case Studies</li>
<li>Blog</li>
<li>Customers</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</nav>
</div>
<div class="row" id="banner-top-row">
<div class="col-md-12" id="banner-top-col">
<img src="img/banner-top.png" id="banner-top" class="img-responsive center-block"/>
<div class="banner-information text-center">
<h4> For more information.... </h4>
<h1> Contact Us </h1>
</div>
</div>
<div class="row" id="detail-request">
<div class="col-md-12">
<h1> Send us your details to request our latest brochure <h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="map-holder-image">
<img src="img/map-holder.png" class="img-responsive"/>
</div>
</div>
<form class="form">
<div class="form-group col-xs-4 col-md-4">
<label for="first-name" class="control-label">First Name</label>
<input type="text" class="form-control" id="first-name">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="email-address" class="control-label">Email</label>
<input type="email" class="form-control" id="email-address">
</div>
<br>
<div class="form-group col-xs-4 col-md-4">
<label for="last-name" class="control-label">Last Name</label>
<input type="text" class="form-control" id="last-name">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="confirm-email-address" class="control-label">Confirm Email</label>
<input type="email" class="form-control" id="confirm-email-address">
</div>
<div class="form-group col-xs-4 col-md-4">
<input type="hidden" id="date-dropdown">
<script>
$("#date-dropdown").dateDropdowns({
defaultValue: "2010-02-17"
});
</script>
</div>
<div class="form-group col-xs-4 col-md-4">
</div>
<div class="col-md-4">
<button class="btn btn-info btn-lg" id="submit-button" type="button">
<h3>Submit</h3>
</button>
</div>
</form>
</div>
<div class="row">
<div class="col-md-12">
<div class="support-box">
<h3>Start a Live Chat with one of our Tech Team</h3>
<button class="btn btn-info btn-lg" id="support" type="button">
<h3>Start</h3><img src="img/button-icon-livechat.png" id="support-image" class="img-responsive"/>
</button>
</div>
<div class="support-box">
<h3>Start a Skype Call with one of our Sales Team</h3>
<button class="btn btn-info btn-lg" id="support" type="button">
<h3>Start</h3><img src="img/button-icon-skype.png" id="support-image" class="img-responsive"/>
</button>
</div>
<div class="support-box">
<h3>Send an email to our Customer Services Team</h3>
<button class="btn btn-info btn-lg" id="support" type="button">
<h3>Start</h3><img src="img/button-icon-email.png" id="support-image" class="img-responsive"/>
</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" id="banner-bottom-row">
<div class="col-md-12" id="banner-bottom-col">
<img src="img/banner-bottom.png" id="banner-bottom" class="img-responsive center-block"/>
<div class="banner-information text-center">
<h4> We will be in touch </h4>
<h1> Thank you </h1>
</div>
</div>
</div>
<div class="row" id="footer">
<p>Terms and Conditions | Privacy Policy | Copyright Code 2016</p>
<hr id ="footer-line">
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-date-dropdowns.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
https://gyazo.com/06ad94c6b0c0b173da9dfd1d95bb02f6 here is my browser loading in the jquery js. My error message is
contact-us.html:121 Uncaught ReferenceError: $ is not defined(anonymous function) # contact-us.html:121
Move the jquery library to the head of your page
<script type="text/javascript" src="js/jquery.min.js"></script>
This should solve it.
The $ is not defined(anonymous function) means jQuery hasn't been loaded yet
Your jQuery selector is incorrect in two ways:
"example1" is looking for an element called <example1>, which of course doesn't exist. To select an element by its id, prepend a # character.
Your element's id is example3.
Try:
$("#example3")
I have a toolbar with 3 buttons. and one of them has a dropdown.
the html is the following:
<div id="primary-section" class="wrapper wrapper-content">
<div class="row" id="create-container">
<div class="col-lg-12">
<div class="ibox float-e-margins animated fadeInRight">
<div class="ibox-title" style="height: 60px;">
<div class="btn-group">
<button onclick="javascript:vm.createContainer()" class="btn btn-primary" id="newcontainer" style="margin-right:16px;"><i class="fa fa-plus"></i> New Container</button>
</div>
<div class="btn-group">
<button type="button" id="btn-connect" class="btn btn-success" disabled="disabled">Connect</button>
</div>
<div class="btn-group" id="actions" style="margin-right:16px;">
<button id="btn-actions" data-toggle="dropdown" class="btn btn-info dropdown-toggle" aria-expanded="false" disabled="disabled">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a>Start</a></li>
<li><a>Stop</a></li>
<li><a>Pause</a></li>
<li><a>Resume</a></li>
<li><a>Delete</a></li>
<li class="divider"></li>
<li><a id="inspect">Inspect</a></li>
<li><a id="console">Console</a></li>
<li><a>Clone</a></li>
</ul>
</div>
</div>
<div class="ibox-content">
<div id="loading-grid">
<img src="/public/img/squares.gif" height="130" width="130" title="Loading" alt="Loading"/>
<h3>Loading containers...</h3>
</div>
<div id="grid" class="hidden"></div>
</div>
</div>
</div>
</div>
</div>
Now for some reason the html that results out of this is the following.
The create button ends up inside of the connect button. and i can't for the life of me figure out what the hell is going on. it looks like i closed all tags and quotes.
parsed HTML:
<div id="primary-section" class="wrapper wrapper-content">
<div class="row" id="create-container">
<div class="col-lg-12">
<div class="ibox float-e-margins animated fadeInRight">
<div class="ibox-title" style="height: 60px;">
<div class="btn-group">
</div>
<div class="btn-group">
<button type="button" id="btn-connect" class="btn btn-success" disabled="disabled"><button onclick="javascript:vm.createContainer()" class="btn btn-primary" id="newcontainer" style="margin-right:16px;"><i class="fa fa-plus"></i> New Container</button>Connect</button>
</div>
<div class="btn-group" id="actions" style="margin-right:16px;">
<button id="btn-actions" data-toggle="dropdown" class="btn btn-info dropdown-toggle" aria-expanded="false" disabled="disabled">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a>Start</a></li>
<li><a>Stop</a></li>
<li><a>Pause</a></li>
<li><a>Resume</a></li>
<li><a>Delete</a></li>
<li class="divider"></li>
<li><a id="inspect">Inspect</a></li>
<li><a id="console">Console</a></li>
<li><a>Clone</a></li>
</ul>
</div>
</div>
<div class="ibox-content">
<div id="loading-grid">
<img src="/public/img/squares.gif" height="130" width="130" title="Loading" alt="Loading"/>
<h3>Loading containers...</h3>
</div>
<div id="grid" class="hidden"></div>
</div>
</div>
</div>
</div>
</div>
Ok so kids, next time you post to SO remember, first check the javascript.
I was prepending the button on the element id of the connect button.
Thanks folks!
I am trying to have my buttons be beside each other at all display sizes.However when I make my window smaller, they overlap each other as shown in the jsfiddle.
I have tried using col-xs-offset and col-xs-push but it affects my col-md and col-lg settings for some reason, I have checked my bootstrap and html but there doesn't appear to be any issues there.
How can I fix this?
JSFiddle:
https://jsfiddle.net/whywymam/2u79tpp2/1/
HTML:
<div class="container">
<div class="row upperRow">
<nav class="nav logoFw">
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="../image/logo.jpg" class="img-responsive" alt="logo">
</div>
</nav>
<ul class="nav navbar-nav navbar-right">
<li>
<div class="col-xs-3 col-sm-4 col-md-4 col-lg-4">
<a href="../jobseeker/signupLogin.php" class="btn btn-danger" role="button">
<i class="glyphicon glyphicon-user"></i>Job Seeker
</a>
</div>
</li>
<li>
<div class="col-xs-3 col-md-4 col-lg-4">
<a href="../employer/signupLoginEmp.php" class="btn btn-danger" role="button">
<i class="glyphicon glyphicon-user"></i><i class="glyphicon glyphicon-user"></i>Employer
</a>
</div>
</li>
</ul>
</div>
<div class="clearfix visible-xs-block visible-md-block visible-sm-block visible-lg-block"></div>
<div class="row bottomRow">
<div class="col-sm-12 col-md-12 col-lg-12">
<nav role="navigation" class="navbar-inner navbar-default navbar-static-top navcolor">
<div class="navbar-header ">
<!--button to appear when display is on mobile device-->
<button type="button" data-target="#nav-collapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="nav-collapse" class="collapse navbar-collapse topmenu">
<ul class="nav navbar-nav center-block">
<li>Home</li>
<li>About</li>
<li>Job</li>
<li>Resources</li>
</ul>
</div>
</nav> <!-- end navbar-inner navbar-default navbar-static-top navcolor -->
</div>
</div> <!-- end middle row -->
<!--to indicate which page user is on -->
</div><!-- end container -->
You may want to remove the unordered list that is containing your buttons and instead use a button group:
http://getbootstrap.com/components/#btn-groups
Also, since button groups make the buttons flush to each other, use some CSS to override their margins.
JS Fiddle:
https://jsfiddle.net/1dwq7bqx/
CSS
.btn-group button { margin: 0 7px; }
HTML
<div class="container">
<div class="row">
<div class="col-md-4 text-left">
<img src="logo.jpg" class="img-responsive" alt="logo" />
</div>
<div class="col-md-8 text-right">
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-user"></i> Job Seekers</button>
<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-user"></i><i class="glyphicon glyphicon-user"></i> Employers</button>
</div>
</div>
</div>
</div>