I am experiencing issue. The navigation components owl-nav and owl-dots are no longer wrapped with owl-controls.
<div class="owl-nav disabled">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
<div class="owl-dots disabled">
<div class="owl-dot active"><span></span></div>
<div class="owl-dot"><span></span></div>
</div>
Demos show:
<div class="owl-controls">
<div class="owl-nav disabled">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
<div class="owl-dots disabled">
<div class="owl-dot active"><span></span></div>
<div class="owl-dot"><span></span></div>
</div>
</div>
This is breaking the default css selections within owl-theme.
Can any one help me to solve this issue?
Thanks in advance.
Had the same problem, used some CSS-Styling my own:
.owl-dots {
text-align: center;
position: fixed;
bottom: 5px;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127,127,127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
.owl-dot.active {
background: rgba(127,127,127, 1);
}
If you don't want to overlaps the dots just use:
.owl-dots {
text-align: center;
}
You've to add owl-theme file also to get pagination dots.
$(document).ready(function(){
$('#demoCarousel').owlCarousel({
loop:true,
margin:10,
nav:true,
dots: true // if you don't want dots, change to false
});
});
#demoCarousel .item {
height: 10rem;
background: #4DC7A0;
padding: 1rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme" id="demoCarousel">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
I had same issue, Add more slides and dots will appear.
Related
Im trying to build a collapsible sliding left panel using bootstrap 5. Im almost there but having some issues.
If you have a look at the code here: https://jsfiddle.net/dizzy0ny/86wjas9L/108/
You will see i try to achieve this two different ways. one using javascript and one using Boostrap/CSS. The behavior are different.
i would like the panel to slide left. this works for the javascript code (Toggle1 button). But does not for toggle2 button. in the latter's case it slides up instead
regardless of method used the content shown does not resize to fit the entire page width then the panel is collapsed. And in other case when the window is smaller, if i expand the collapsed panel, a horizontal scrollbar appears as the chart does not resize to fit. Ive tried a few styling options to try and correct this - but have thus far failed.
lastly - anyway to have the content area's height adjusted to fit also so the vertical scroll bar does not show?
here is the html:
<head>
<!-- JQuery links -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.2/css/fontawesome.min.css" integrity="sha384-X8QTME3FCg1DLb58++lPvsjbQoCT9bp3MsUU3grbIny/3ZwUJkRNO8NPW6zqzuW9" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse" id="navbar">
<div class="navbar-nav">
Toggle1
Toggle2
<a class="nav-item nav-link" id="home" href="#">Home</a>
<a class="nav-item nav-link" id="menu1" href="#">Menu 1</a>
<a class="nav-item nav-link" id="menu2" href="#">Menu 2</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row flex-nowrap">
<div id="sidebar" class="col-auto px-1 collapse collapse-horizontal show border-end">
<!--left collapsible nav bar-->
<div id="sidebar-nav" class="min-vh-100">
<form>
<div>
<div class="mb-3">
<select id="cot_contract" name="cot_contract" class="form-control selectpicker" data-live-search="true">
<option>Some Item Number 1</option>;
<option>Some Item Number 2</option>';
<option>Some Item Number 3</option>';
</select>
</div>
<div class="mb-3">
<input type="text" class="form-control" id="input1" name="input1" placeholder="Enter some text" />
</div>
</div>
</form>
</div>
</div>
<!--main content area-->
<main class="col ps-md-2 pt-2">
<div id="container"></div>
</main>
</div>
</div>
</body>
Here is the CSS:
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
padding: 5px;
align-items: stretch;
}
#sidebar.active {
margin-left: -250px;
}
#container {
height: 100%;
width: 100%;
}
and finally the javacript:
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
padding: 5px;
align-items: stretch;
}
#sidebar.active {
margin-left: -250px;
}
#container {
height: 100%;
width: 100%;
}
Thanks much
Update:
Finally got all of this to work. the final issue of re-sizing the content and dealing with the vertical scroll bar always showing:
added d-flex h-100 flex-column to top level container for the row
containing the nav panel and content.
added body/html height 100%
main content column needs a display of 'content'.
to fix the vertical scroll bar always showing - moved nav into top
level div as another row. added 'h-100' 2nd row (containing the
collapsing pane and content).
Updated and working jsfiddle: https://jsfiddle.net/dizzy0ny/86wjas9L/513/
Man i hate css.
According to documentation from W3School, it's possible to do the sidebar the same without jQuery in a more pure way.
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
Highcharts.chart('container', {
series: [{
data: [2, 5, 2, 3, 6, 5]
}]
});
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="mySidebar" class="sidebar">
×
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ Open Sidebar</button>
<div id="container"></div>
</div>
Demo: https://jsfiddle.net/BlackLabel/kned9yuv/
----- EDIT
To adjust the chart to your container you can use chart.reflow(), every time when you resize the window.
Demo: https://jsfiddle.net/BlackLabel/kned9yuv/3/
Currently when I click the 1st button both hidden divs are showing. My goal is when I click the 1st button it only shows the hidden div on its group. And if I click the 2nd button it only shows the hidden div on its group.
Can anyone help me with how to achieve it?
$(document).ready(function () {
$(".btn").on("click", function () {
$(".hidden").addClass("active");
});
$(".closed").on("click", function (){
$(".hidden").removeClass("active")
})
})
.btn {
background: blue;
color: #ffffff;
font-weight: 600;
padding: 20px;
}
.hidden {
width: 100px;
height: 100px;
background: yellow;
display: none;
}
.hidden.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="con">
<div class="btn">Show</div>
<div class="hidden">
<div class="closed">Click to hide</div>
</div>
</div>
</div>
<br>
<div class="container">
<div class="con">
<div class="btn">Show</div>
<div class="hidden">
<div class="closed">Click to hide</div>
</div>
</div>
</div>
Your code
$(".hidden").addClass("active");
selects all .hidden elements (hence your issue).
Within the click event you need to use this to refer to the element being clicked and then use relative DOM navigation to find the element you do want.
In your case it's the next sibling, so .next() will suffice for show, but hide/close will need to find its parent .hidden
$(document).ready(function () {
$(".show").on("click", function () {
$(this).next().addClass("active");
});
$(".close").on("click", function (){
$(this).closest(".hidden").removeClass("active")
})
})
.show {
background: blue;
color: #ffffff;
font-weight: 600;
padding: 20px;
}
.hidden {
width: 100px;
height: 100px;
background: yellow;
display: none;
}
.hidden.active {
display: block;
}
.close { background-color:#ccc; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="con">
<div class="show">Show</div>
<div class="hidden">
<div class="close">Click to hide</div>
</div>
</div>
</div>
<br>
<div class="container">
<div class="con">
<div class="show">Show</div>
<div class="hidden">
<div class="close">Click to hide</div>
</div>
</div>
</div>
Can anyone help me to put the tick icon inside the input box at right corner?
Also is it possible to display a 'Field Saved' message along with the tick icon?
Update:
What if form contains multiple input in single row, then how to show icon inside the input boxes?
Fiddle: https://jsfiddle.net/sanadqazi/5Len09ad/1/
.test {
position: relative;
}
.test .fas.fa-check {
position: absolute;
top: 0;
right: 0;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="row">
<div class="col-8">
<div class="test">
<input type="text">
<i class="fas fa-check inp"></i>
</div>
</div>
<div class="col-4">
<div class="test">
<input type="text">
<i class="fas fa-check inp"></i>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
A little bit of CSS should do the trick here.
Either add the following code snippet to a stylesheet or to a style block. Alternatively, you could apply the styles inline, directly on the HTML elements themselves.
CSS:
.test {
position: relative;
}
.test .fas.fa-check {
position: absolute;
top: 0;
right: 0;
}
UPDATE
If the form contains multiple select boxes in the same row, then they must be wrapped in a div which has relative positioning and inline display.
.col-8,
.col-4 {
position: relative;
}
.input-container {
border: solid 1px #000;
border-radius: 2px;
position: absolute;
display: flex;
align-items: center;
padding: 4px;
gap: 4px;
}
.input-container i {
display: flex;
justify-content: center;
align-items: center;
}
.inp {
height: 36px;
line-height: 36px;
}
input[type="text"] {
/* padding-right: 100px; */
border: none;
outline: none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="row">
<div class="col-8">
<label class="input-container">
<input type="text">
<i class="fas fa-check inp"></i>
<!-- <span>Field Saved</span> -->
</label>
</div>
<div class="col-4">
<label class="input-container">
<input type="text">
<i class="fas fa-check inp"></i>
<!-- <span>Field Saved</span> -->
</label>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
You can add a container element to your textbox and tick icon. Then, you can remove all the styles of the textbox and put similar styles to the container to make it look like the container itself is a textbox. This way, you can make it look like the icon (and the Field Saved text) inside the textbox.
Trying to change the color of an icon within a Bootstrap button. Nothing I've tried has made it turn black, which is what I want it to be. Even after using the "Inspect Element" tool in Chrome and copying the CSS selector verbatim to specifically target the icon hasn't worked. Code is below. This is for a bootcamp course on Udemy and the icon is from Font Awesome.
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1>Purrfect Match</h1>
<h3>The Only Human/Feline Dating App</h3>
<hr>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i>Get Started!</button>
</div>
</div>
</div>
</div>
html {
height: 100%;
}
* {
font-family: 'Rubik';
color: white;
}
body {
background: url(https://source.unsplash.com/gI_1GPoKGRs);
background-size: cover;
background-position: center;
}
#content {
text-align: center;
padding-top: 25%;
}
div h1 {
font-weight: 700;
font-size: 5em;
}
hr {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,.2);
}
Expected results are for the icon to be black as default (which is shown in the tutorial video). The icon actually shows up white, and trying to change the color to black through CSS hasn't worked so far.
Here is a small example :)
jQuery(".btn-example").click(function(){
jQuery(".btn-example").toggleClass('active');
});
.btn-example.active {
background-color: skyblue;
}
.btn-example.active i{
color: purple;
}
.btn-example.focus, .btn-example:focus {
outline: none !important;
box-shadow: initial !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<hr>
<button class="btn-example btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started!</button>
</div>
</div>
</div>
</div>
Now that I've seen your css.
* { color: white; } is causing the problem. you might want to reconsider setting this;
but to fix your problem .fa-paw { color: black !important; } should do it
* { color: white; }
.fa-paw { color: black !important; }
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1>Purrfect Match</h1>
<h3>The Only Human/Feline Dating App</h3>
<hr>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started!</button>
</div>
</div>
</div>
</div>
I'm trying to implement a mockup given below, I looked around to find something similar but no luck. Could some one guide me how to do this.
So problem here is need to show static "from" "to" and "90 days" text every time.
Note "From","To","days" and Icon should be inside text box
This is a VERY simple example intended to get you started.
The key point is: use jQuery UI's "datepicker" module. It is powerful - you can auto-calculate the 90 day calc and, upon leaving the Date From field, have it auto-calc 90 days and plunk that date into the From field as a default.
Look how much you get done with how little.
$( ".dp" ).datepicker();
/* */
div{position:relative;box-sizing:border-box;}
.row{overflow:hidden;border:2px solid #aaa;padding:5px;}
.r-left {float:left;width:33%;margin-right:10px;}
.r-right{float:left;width:33%;margin:0 10px;}
.farright{display:flex;height:50px;}
.inlineblock{width:60px;height:50px;margin:auto;flex-flow: row nowrap;justify-content:flex-end;align-content:center;}
<link href="http://code.jquery.com/ui/1.9.2/themes/cupertino/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"
integrity="sha256-eEa1kEtgK9ZL6h60VXwDsJ2rxYCwfxi40VZ9E0XwoEA="
crossorigin="anonymous"></script>
<div class="row">
<div class="r-left">
<div>FROM</div>
<div><input id="datFrom" class="dp" type="text" /></div>
</div>
<div class="r-right">
<div>TO</div>
<div><input id="datTo" class="dp" type="text" /></div>
</div>
<div class="farright">
<div class="inlineblock">
<br>90 days
</div>
<div class="inlineblock" id="90days">
<img src="http://placeimg.com/50/50/nature" />
</div>
</div>
</div>
I have tweak the code from gibberish and see if this serve your purpose.
and for the label inside textbox set placeholder attribute of input tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"
integrity="sha256-eEa1kEtgK9ZL6h60VXwDsJ2rxYCwfxi40VZ9E0XwoEA="
crossorigin="anonymous"></script>
<script>
$(function() {
$( ".dp" ).datepicker();
});
</script>
<style>
div{position:relative;box-sizing:border-box;}
.row{overflow:hidden;border:2px solid #aaa;padding:5px;}
.r-left {float:left;width:30%;margin-right:10px;}
.r-right{float:left;width:30%;margin:0 10px;}
.farright{float:right;width:30%;margin-left:10px;}
.inlineblock{display:inline-block;color: grey;}
#90days{margin-left:15px;margin-top:-35px;color: red;}
#datFrom{
border: 0px;
}
#datTo{
border: 0px;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 15px;
top: 20px;
transition: 0.2s ease all;
font-size: 20px;
}
.floating-label1 {
position: absolute;
pointer-events: none;
left: 215px;
top: 20px;
transition: 0.2s ease all;
font-size: 20px;
}
.inputText {
font-size: 14px;
width: 185px;
height: 35px;
}
input:focus ~ .floating-label,input:not(:focus):valid ~ .floating-label{
top: 15px;
bottom: 10px;
left: 15px;
font-size: 11px;
opacity: 1;
color: grey;
}
input:focus ~ .floating-label1,input:not(:focus):valid ~ .floating-label1{
top: 15px;
bottom: 10px;
left: 215px;
font-size: 11px;
opacity: 1;
color: grey;
}
.calender-css{
height:35px;
vertical-align: middle;
}
input:focus {
border-color:white;
}
</style>
<link href="http://code.jquery.com/ui/1.9.2/themes/cupertino/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"
integrity="sha256-eEa1kEtgK9ZL6h60VXwDsJ2rxYCwfxi40VZ9E0XwoEA="
crossorigin="anonymous"></script>
<div class="row">
<div class="r-left">
<!--<div>FROM</div>-->
<div><input id="datFrom" class="dp inputText" type="text" required/><span class="floating-label">From</span></div>
</div>
<div class="r-right">
<!--<div>TO</div>-->
<div><input id="datTo" class="dp inputText" type="text" required/><span class="floating-label1">TO</span></div>
</div>
<div class="farright">
<div class="inlineblock" id="90days">
90 days
</div>
<div class="inlineblock">
<img src="http://www.freeiconspng.com/uploads/calendar-icon-png-14.png" class="calender-css" />
</div>
</div>
</div>