My materialize DatePicker works only for the FirstTime
I am using Materialize for devloping a site which invloves date-picker. The date-picker works only for the first load of a page. When we select the date for second-time it comes and goes.
How to solve this type of problem? Any help is greately Appriciated. Thanks!
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--=============== basic ===============-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<!-- Compiled and minified CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<link type="text/css" rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Compiled and minified JavaScript -->
<script type="text/javascript"></script>
<script type="text/javascript" src="js/script.js"></script>
<style>
h5{
font-size: 1.875rem;
line-height: 2.5rem;
letter-spacing: .5px;
color: #98AAB8;
margin-right: -.5px; font-weight:700; font-family: Neue Plak,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif;
}
input {
line-height: normal;
padding: 10px 9px 10px 47px;
border-radius: 4px;
border: 1px solid #2F3B59;
background: #f9f9f9;
font-family: quick-sand, sans-serif;
font-size: 13px;
}
.input_field1{
line-height: normal;
padding: 12px 9px 12px 47px;
border-radius: 4px;
border: 1px solid #2F3B59;
background: #f9f9f9;
width:100%;
font-family: quick-sand, sans-serif;
font-size: 13px;
margin-bottom: 20px;
}
.text_area{
padding:69px 280px;
}
.input_date{
line-height: normal;
padding: 13px 9px 10px 47px;
border-radius: 4px;
border: 1px solid #2F3B59;
background: #f9f9f9;
width:100%;
margin-bottom: 20px;
}
.form_header {
font-family: quick-sand, sans-serif;
font-size: 13px;
/* float: left; */
text-align: left;
margin-bottom: 10px;
font-weight: 500;
color:#666;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
position: absolute;
margin-top: 13px;
margin-left: 20px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.posterImg{
text-align: center;
margin: 0px 0;
width: 164px;
height: 159px;
padding: 55px 2px 11px 5px;
border: 1px solid #2F3B59;
border-radius: 7px;
font-size: 12px;
color: #98AAB8;
margin-bottom: 20px;
}
.breadcrumb:before {
content: '\E5CC';
color: rgba(255,255,255,0.7);
vertical-align: top;
display: inline-block;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
color: #566985;
font-size: 25px;
margin: 0 10px 0 8px;
-webkit-font-smoothing: antialiased;
}
.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating) {
/* color: #ffab40; */
color: #566985;}
textarea.materialize-textarea {
overflow-y: hidden;
border: none;
border: 1px solid #2F3B59;
padding: .8rem 0 1.6rem 0;
resize: none;
min-height: 3rem;
border-radius: 7px;
background: #f9f9f9;
}
input[type=text]:not(.browser-default){
background-color: transparent;
border: none;
/* border-bottom: 1px solid #9e9e9e; */
border-radius: 0;
outline: none;
height: 3rem;
width: 100%;
font-size: 1rem;
margin: 0 0 20px 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
</style>
<!-- Fav icon -->
</head>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper" style="background: #2F3B59;">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
</ul>
</div>
</nav>
</div>
<div class="row">
<div style="height:30px; background:white;"></div>
</div>
<div class="row">
<div class="col s12 m1"></div>
<div class="col s12 m10">
<nav style="border: 1px solid #eee;background: #F8FBFE; border-radius:5px;">
<div class="nav-wrapper">
<div class="col s12">
Add Listing
Add conference
Profile
Home
</div>
</div>
</nav>
</div>
<div class="col s12 m1"></div>
</div>
<div class="row">
<div class="col s12 m1"></div>
<div class="col s12 m3">
<div class="card sticky-action" style="border: 1px solid #eee;">
<div class="card-action">
<div class="card" style="background: #F8FBFE; border-radius:5px;border: 1px solid #eee;">
<div class="card-action">
Edit Profile
</div>
<div class="card-action">
Add event
</div>
<div class="card-action">
Added Events
</div>
<div class="card-action">
<a class="waves-effect waves-light btn-small" style="background: #4DB7FE; color: #566985;">Save</a>
</div>
</div>
</div>
<div class="card-reveal"> <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
<div class="col s12 m7">
<h5 style="text-align:center;font-family: quick-sand, sans-serif;">Conference Details</h5>
<div class="row">
<div class="col s12">
<div class="form_header">Conference Link</div>
<i class="fa fa-link"></i><input type="" class="input_field1" placeholder="Conference Link" autocomplete="off">
</div>
<div class="col s12 m12">
<div class="form_header">Conference Name</div>
<i class="fa fa-address-book"></i><input type="" class="input_field1" placeholder="Conference Name" autocomplete="off">
</div>
<div class="col s12 m12">
<div class="form_header">Conference URL</div>
<i class="fa fa-link"></i> <input type="" class="input_field1" placeholder="Conference URL">
</div>
<div class="col s12 m12">
<div class="form_header">Conference Registration URL</div>
<i class="fa fa-ticket"></i> <input type="" class="input_field1" placeholder="Conference Registration URL">
</div>
<div class="col s12 m6">
<div class="form_header">Conference Start Date</div>
<i class="fa fa-calendar-check-o"></i><input type="" class="input_date" id="datepicker1" placeholder="yyy-mm-dd" onclick="jithendra()">
</div>
<div class="col s12 m6">
<div class="form_header">Conference End Date</div>
<i class="fa fa-calendar-check-o"></i><input type="" class="input_date" id="datepicker2" placeholder="yyy-mm-dd" onclick="jithendra1()">
</div>
<div class="col s12 m12">
<div class="form_header">Twitter Handle</div>
<i class="fa fa-twitter"></i><input type="" class="input_field1" placeholder="City">
</div>
<div class="col s12 m12">
<div style="border-bottom: 1px solid #eee; margin-top:30px;"></div>
</div>
<div class="col s12 m4">
</div>
<div class="col s12 m12">
<div class="form_header" style="margin-top:20px;">City</div>
<i class="fa fa-map-marker"></i> <input type="" class="input_field1" type="text" placeholder="City">
</div>
<div class="col s12 m12">
<div class="form_header">Venue</div>
<i class="fa fa-map-marker"></i><input type="" class="input_field1" type="text" placeholder="Venue">
</div>
<div class="col s12 m12">
<div class="form_header" style="width: 338px;">Keywords</div>
<input type="" class="input_field1" type="text" placeholder="Keywords">
</div>
<div class="col s12 m12">
<div class="form_header">Conference City</div>
<input type="file" class="input_field1" type="text" placeholder="Venue" style="opacity:0px;">
</div>
<div class="col s12 m12">
<div style="border-bottom: 1px solid #eee;margin-bottom:20px;margin-top: 21px;"></div>
</div>
<div class="col s12 m12">
<div style="height:10px;"></div>
</div>
<div class="col s12 m12">
<a class="waves-effect waves-light btn" style="background: #2F3B59;border-radius:5px;">Submmit</a>
</div>
<div class="col s12 m12">
<div style="border-bottom: 1px solid #eee; margin-top:30px;"></div>
</div>
<div class="col s12 m12">
<div style="border-bottom: 1px solid #eee; margin-top:30px;"></div>
</div>
<!-- <div class="col s12 m4">
<div class="form_header" >Poster Image</div>
<div class="input" style="border:none;border: 1px solid #2F3B59;;height: 180px;border-radius: 5px;background: #f9f9f9;/* padding-bottom: 16px; */">
<input type="text"></div>
<input type="file" class="input_field1" style="height: 180px;
opacity: -0.7;
position: absolute;
width: 146px;
margin-top: -180px;">
</div>
<div class="col s12 m3"></div>
<div class="col s12 m4">
<div class="form_header" >Card Image</div>
<div class="input" style="border:none;border: 1px solid #2F3B59;height: 180px;border-radius: 5px;background: #f9f9f9;/* padding-bottom: 16px; */">
<input type="text"></div>
<input type="file" class="input_field1" style="height: 180px;
opacity: -0.7;
position: absolute;
width: 146px;
margin-top: -180px;">
</div> -->
<!--
<div class="col s12 m12">
<hr>
</div>
<div class="col s12 m12">
<h5>My Socials</h5>
</div>
</div>
<div class="col s12 m12">
<div class="form_header">Facebook </div>
<i class="fa fa-facebook"></i><input type="" class="input_field1" type="text" placeholder="https://facebook.com/">
</div>
<div class="col s12 m12">
<div class="form_header">LinkedIn </div>
<i class="fa fa-linkedin"></i><input type="" class="input_field1" type="text" placeholder="Linkedin.com">
</div>
<div class="col s12 m12">
<div class="form_header">Twitter </div>
<i class="fa fa-twitter"></i><input type="" class="input_field1" type="text" placeholder="https://twitter.com/">
</div>
</div> -->
</div>
</div>
</div>
<footer class="page-footer" style="background: #2F3B59;">
<div class="container">
<div class="row">
<div class="col s12 m3">
<h5 class="white-text">KonfHub</h5>
<p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
<div class="col s12 m3">
<h5 class="white-text">Link</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col s12 m3">
<h5 class="white-text">Link</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col s12 m3">
<h5 class="white-text">Link</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
<script>
function jithendra(){
$('.modal').modal();
$('#datepicker1').pickadate({
selectMonths: true,// Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year,
});
}
function jithendra1(){
$('#datepicker2').pickadate({
selectMonths: true,// Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year,
});
}
</script>
</body>
</html>
I changed a few things in your code. You were using both the versions of Materialize 1.0.0 and 0.100.2, no idea why you should use only one version and then I updated the jQuery methods as per the new version that is 1.0.0, you can check those on their website Picker - Materialize and Select - Materialize. You were using .input-date class but in order to use datepicker you've to use .datepicker class only, you can modify the CSS of .datepicker class. I added !important to the changes you've made to the .datepicker class, so you can have the modified CSS which you applied to .input-date. At last, you've given ids to individual datepickers, so you can either use the jQuery methods on ids or on class.
Codepen - Working Demo
Related
Trying to implement a show/hide description box.
If the user clicks on the first showDesc link it opens it's description box. Then if the user clicks the second showDesc link it opens it's description box and should close all the others which are opened in VueJs.
I tried something as show below.
Below is my code:
new Vue({
el: "#app",
data: {
Show: false
},
methods: {
showDesc: function() {
this.Show = !this.Show;
}
}
})
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0, 0, 0, .08);
display: none;
line-height: 24px;
background-color: #fdfdfd;
}
.descContainer.show {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0, 0, 0, .08);
display: block;
line-height: 24px;
background-color: #fdfdfd;
}
a.mainSmooth.showDesc {
color: dodgerblue;
text-decoration: underline;
cursor: pointer;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<main id="app">
<section>
<article class="feedBox mainSmooth">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer"></div>
<ul class="list-inline feedExtras">
<li class="">
<a #click="showDesc" class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div :class="{ show: Show }" class="descContainer">
<div>Description Text</div>
</div>
</article>
<br/>
<article class="feedBox mainSmooth">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer"></div>
<ul class="list-inline feedExtras">
<li class="">
<a #click="showDesc" class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div :class="{ show: Show }" class="descContainer">
<div>Description Text</div>
</div>
</article>
<br/>
<article class="feedBox mainSmooth">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer"></div>
<ul class="list-inline feedExtras">
<li class="">
<a #click="showDesc" class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div :class="{ show: Show }" class="descContainer">
<div>Description Text</div>
</div>
</article>
</section>
</main>
How about in this way:
new Vue({
el: "#app",
data: {
},
methods: {
showDesc: function(e) {
let allA = document.querySelectorAll("a");
for(let a of allA) {
let descContainer = a.closest("article").querySelector("div.descContainer");
descContainer.classList.remove('show');
if(a === e.target) {
descContainer.classList.add('show');
}
}
}
}
})
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0, 0, 0, .08);
display: none;
line-height: 24px;
background-color: #fdfdfd;
}
.descContainer.show {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0, 0, 0, .08);
display: block;
line-height: 24px;
background-color: #fdfdfd;
}
a.mainSmooth.showDesc {
color: dodgerblue;
text-decoration: underline;
cursor: pointer;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<main id="app">
<section>
<article class="feedBox mainSmooth">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer"></div>
<ul class="list-inline feedExtras">
<li class="">
<a #click="showDesc" class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text 1</div>
</div>
</article>
<br/>
<article class="feedBox mainSmooth">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer"></div>
<ul class="list-inline feedExtras">
<li class="">
<a #click="showDesc" class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text 2</div>
</div>
</article>
<br/>
<article class="feedBox mainSmooth">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer"></div>
<ul class="list-inline feedExtras">
<li class="">
<a #click="showDesc" class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text 3</div>
</div>
</article>
</section>
</main>
Here's the fiddle.
It's just a raw idea of how it can be done. I hope it helps.
I want to add search box to my navbar but not as the traditional way as appears in the picture , I want to add a search icon button in the navbar only and when user click on it the search box appears under the search icon .
How can i do this any one can help me please ?
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Contact US</li>
<li class="dropdown">
Who we are <b class="caret"></b>
<ul class="dropdown-menu">
<li>About</li>
<li> Mession</li>
<li> Vision</li>
<li class="divider"></li>
<li>Goals</li>
</ul>
</li>
<li>Publications</li>
<li>Media</li>
<li>Partners</li>
</ul>
There are lot of things on the net e.g https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_anim_search
Run below code:
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('https://www.w3schools.com/howto/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<p>Animated search form:</p>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>
You can try these snippets.
Solutuion with CSS Only:
.hide
{
opacity: 0;
max-height: 0;
}
#trigger {
position: absolute;
left: -999em;
}
#container input[type="checkbox"]:checked + div
{
max-height: 99em;
opacity: 1;
height: auto;
overflow: hidden;
}
<div id="container">
<label for="trigger">click me for Search</label>
<input type="checkbox" id="trigger">
<div class="hide">
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</div>
<div>
Solution with JS:
function myFunction() {
if (document.getElementById("form").style.display === "none") {
document.getElementById("form").style.display = "block";
} else {
document.getElementById("form").style.display = "none";
}
}
button {
width: 50px;
height: 50px;
}
<p>show and hide search</p>
<button onclick="myFunction()"></button>
<form id="form">
<input type="text" name="search" placeholder="Search..">
</form>
I have something in the following css that is causing my fixed navbar to push up when scrolling down untill its almost not visible. This navbar works on all my other pages so I know its something to do with the following css to this page. Attached is the nav bar css and the css that seems to be causing it to not work properly for (1) page... it seems to work fine in browser and Dreamweaver live view but not on any cell phone... The footer seems jacked now too.. its something in between the header and footer ; Also attached is the pages HTML.
live version as you can see the pages I have finished scroll properly except services > roofing 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">
<title>Roofing Contractor Springfield IL Surrounding Areas</title>
<meta name="description" content="Licensed Roofing Contractor serving Springfield IL and surrounding areas. Hire a professional and let us exceed your residential roofing needs today!">
<meta name="keywords" content="Roofing Contractor New Roof Repair Licensed Bonded Insured Free Estimates">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
<div class="container" id="custom-nav">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
<li class="dropdown">
Services<b class="caret"></b>
<ul class="dropdown-menu">
<li>Roofing</li>
<li>Siding</li>
</ul>
</li>
<li>
Contact
</li>
<li class="dropdown">
More<b class="caret"></b>
<ul class="dropdown-menu">
<li>Gallery</li>
<li>Reviews</li>
<li>Careers</li>
</ul>
</li>
</ul>
<div class="social">
<ul>
<li><i class="fa fa-lg fa-facebook"></i></li>
<li><i class="fa fa-lg fa-twitter"></i></li>
<li><i class="fa fa-lg fa-google-plus"></i></li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container-fluid margin-top">
<div class="row padding-left padding-right">
<h3><span class="glyphicon glyphicon-bullhorn glyphicon-color"></span> Roofing Contractor <br><small>"Get The Free Estimate You Deserve!"</small></h3><hr>
<h4>Need a New Roof or Roof Repairs?<br><small>We are completely Licensed Bonded and Insured for all of your roofing needs!</small></h4>
</div>
<hr>
<div class="row ">
<div class="col-md-4 no-padding lib-item" data-category="view">
<div class="lib-panel">
<div class="row box-shadow">
<div class="col-lg-7 col-md-6">
<img class="lib-img-show" alt="New Roof - Shingle Roofing" src="images/shingle-roofing.jpg">
</div>
<div class="col-md-5">
<div class="lib-row lib-header">
Shingle Roofing
<div class="lib-header-seperator"></div>
</div>
<div class="lib-row lib-desc">
Shingle Roofing Info Here!
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 no-padding lib-item" data-category="view">
<div class="lib-panel">
<div class="row box-shadow">
<div class="col-lg-7 col-md-6">
<img class="lib-img-show" alt="New Roof - Rubber Roofing" src="images/flat-roofing.jpg">
</div>
<div class="col-md-5">
<div class="lib-row lib-header">
Rubber Roofing
<div class="lib-header-seperator"></div>
</div>
<div class="lib-row lib-desc">
Rubber Roofing Info Here
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 no-padding lib-item" data-category="view">
<div class="lib-panel">
<div class="row box-shadow">
<div class="col-lg-7 col-md-6">
<img class="lib-img-show" alt="New Roof - Metal Roofing" src="images/metal-roofing.jpg">
</div>
<div class="col-md-5">
<div class="lib-row lib-header">
Metal Roofing
<div class="lib-header-seperator"></div>
</div>
<div class="lib-row lib-desc">
Metal Roofing Info Here!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12 call-now">
<h4>“We pride ourselves on being able to provide Safe, Clean, Quality work with competitive rates!”</h4>
Call Now (217) 820-7597
</div>
<footer>
<div class="container-fluid">
<small>Copyright © ZNC Roofing Contractor 2017</small>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-91438053-1', 'auto');
ga('send', 'pageview');
</script>
<!-- Google Maps -->
</body>
</html>
Custom Navbar
.navbar-collapse {border-color: #FFFFFF !important; margin-top: 5px;}
.dropdown-menu > li > a {color : #FFFFFF !important;}
.dropdown-menu > li > a:hover{color : #EF7800 !important;}
.navbar-toggle {background: #192F42; padding-top: 12px;}
.navbar-inverse .navbar-toggle {border-color: #192F42;}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {background: none;}
#custom-nav { margin-left: 0px; width: 100%;}
.navbar-inverse {background-color: #192F42;}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #192F42}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #192F42}
.dropdown-menu { background-color: #192F42}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #192F42}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none;}
.navbar-inverse { border-color: #192F42}
.navbar-inverse .navbar-brand {height: 50px;width: 142px;background: url(../images/brand.jpg) no-repeat;background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;
-o-background-size: cover;}
.navbar-inverse .navbar-brand:hover { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #EF7800}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #EF7800}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #EF7800}
.dropdown-menu>li>a { color: #FFFFFF}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #EF7800}
/* Roofing Page */
.lib-panel {
margin-bottom: 20Px;
}
.lib-panel img {
width: 100%;
background-color: transparent;
}
.lib-panel .row,
.lib-panel .col-md-6 {
padding: 0;
background-color: #FFFFFF;
}
.lib-panel .lib-row {
padding: 0 20px 0 20px;
}
.lib-panel .lib-row.lib-header {
background-color: #FFFFFF;
font-size: 20px;
padding: 10px 20px 0 20px;
}
.lib-panel .lib-row.lib-header .lib-header-seperator {
height: 2px;
width: 26px;
background-color: #FFFFFF;
margin: 7px 0 7px 0;
}
.lib-panel .lib-row.lib-desc {
position: relative;
height: 100%;
display: block;
font-size: 13px;
}
.lib-panel .lib-row.lib-desc a{
position: absolute;
width: 100%;
bottom: 10px;
left: 20px;
}
.row-margin-bottom {
margin-bottom: 20px;
}
.box-shadow {
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.10);
box-shadow: 0 0 10px 0 rgba(0,0,0,.10);
}
.no-padding {
padding: 0;
}
I made a three column accordion collapse using Bootstrap. I used images as backgrounds for my panels, but I am really stumped as to why the top picture is not lined up with the others. How do I get them all to line up? Also, is there a way to make the transitions not so awkward and shifty? Thanks in advance!
I have been building my website in Dreamweaver, but this is the code for what I have been working on and what is giving me issues.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4 bites-stings">
<div class="panel-heading" role="tab" id="headingSeven">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
<h2>Bites and Stings</h2>
</a>
</div>
<div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeven">
<div class="panel-body">
<h4>Mosquitoes</h4>
<h4>Ticks</h4>
<h4>Bees and Wasps</h4>
<h4>Animal Bites</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 pet-health">
<div class="panel-heading" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2>Pet Health and Safety</h2>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<h4>Pet Allergies</h4>
<h4>Toxic Plants</h4>
<h4>Pet and Wildlife Encounters</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 livestock-health">
<div class="panel-heading" role="tab" id="headingThree">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2>Livestock Health and Safety</h2>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 zoonotic">
<div class="panel-heading" role="tab" id="headingFour">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<h2>Zoonotic Diseases</h2>
</a>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<h4>Bacterial</h4>
<h4>Fungal</h4>
<h4>Parasitic</h4>
<h4>Prionotic</h4>
<h4>Rickettsial</h4>
<h4>Spirochetes</h4>
<h4>Viral</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 allergies">
<div class="panel-heading" role="tab" id="headingFive">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<h2>Allergies</h2>
</a>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<h4>Animal Allergies</h4>
<h4>Environmental Allergies</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 environment-health">
<div class="panel-heading" role="tab" id="headingSix">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<h2>Environmental Health</h2>
</a>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
my css
#accordion {
margin-top: 98px;
align-items: flex-start;
}
#accordion .panel {
border-width: 0;
padding: 0 !important;
border-radius: 0%;
}
#accordion .panel-heading {
height: 300px;
text-align: center;
color: #fff;
padding-top: 14%;
border-radius: 0%;
background-color: transparent !important;
align-items: flex-start;
}
#accordion .panel-heading h2 {
color: #fff;
}
#accordion .bites-stings {
background: url(http://chelmsfordmosquitocontrol.com/wp- content/uploads/2014/08/Mosquito-Bites.jpg) center center no-repeat;
background-size: cover;
}
#accordion .pet-health {
background: url(http://www.elainedecarlo.com/cats_dogs_2.jpg) center center
no-repeat;
background-size: cover;
}
#accordion .livestock-health {
background:
url(http://img11.nnm.me/0/f/c/2/2/849b5f5d84fed8199e0f71944dc.jpg) center
center no-repeat;
background-size: cover;
}
#accordion .allergies {
background:
url(http://www.westnebraska.com/cc-ChadronSP_FallColor_RickNeibel.jpg)
center center no-repeat;
background-size: cover;
}
#accordion .zoonotic {
background:
url(https://markingourterritory.files.wordpress.com/2015/01/20-92.jpg)
center center no-repeat;
background-size: cover;
}
#accordion .environment-health {
background:
url(http://www.keepmyplanetgreen.com/wp-content/uploads/2014/06/06-05-10- wind-turbines-stubble-field-and-storm-clouds-wtrmrk.jpg) bottom no-repeat;
background-size: cover;
}
#accordion .panel-collapse {
background-color: rgba(255,255,255,0.9);
}
#accordion .panel-body {
padding-top: 20px;
padding-bottom: 30px;
text-align: center;
}
http://codepen.io/aahmed2/pen/yOQvVz
Because this specific rule in bootstrap.min.css is being applied to all panels except your first one that is misaligned. Specifically because .panel+.panel means to apply to all .panel elements after another .panel element therefore, it being the first one has no predecessor .panel to target it.
.panel-group .panel+.panel{
margin-top: 5px;
}
As an alternative to #lamelemon's answer, you could try overriding the .panel + .panel rule in bootstrap.min.css by using this one instead.
.panel-group > .panel{
margin-top: 5px;
}
It means apply it to all first-level .panel that children of .panel-group.
You would add this rule at the end of your own CSS (as defined above)
(see updated code below - full page should show the desired effect)
#accordion {
margin-top: 98px;
align-items: flex-start;
}
#accordion .panel {
border-width: 0;
padding: 0 !important;
border-radius: 0%;
}
#accordion .panel-heading {
height: 300px;
text-align: center;
color: #fff;
padding-top: 14%;
border-radius: 0%;
background-color: transparent !important;
align-items: flex-start;
}
#accordion .panel-heading h2 {
color: #fff;
}
#accordion .bites-stings {
background: url(http://chelmsfordmosquitocontrol.com/wp-content/uploads/2014/08/Mosquito-Bites.jpg) center center no-repeat;
background-size: cover;
}
#accordion .pet-health {
background: url(http://www.elainedecarlo.com/cats_dogs_2.jpg) center center no-repeat;
background-size: cover;
}
#accordion .livestock-health {
background:url(http://img11.nnm.me/0/f/c/2/2/849b5f5d84fed8199e0f71944dc.jpg) center center no-repeat;
background-size: cover;
}
#accordion .allergies {
background:url(http://www.westnebraska.com/cc-ChadronSP_FallColor_RickNeibel.jpg) center center no-repeat;
background-size: cover;
}
#accordion .zoonotic {
background:url(https://markingourterritory.files.wordpress.com/2015/01/20-92.jpg) center
center no-repeat;
background-size: cover;
}
#accordion .environment-health {
background:url(http://www.keepmyplanetgreen.com/wp-content/uploads/2014/06/06-05-10-wind-turbines-stubble-field-and-storm-clouds-wtrmrk.jpg) bottom no-repeat;
background-size: cover;
}
#accordion .panel-collapse {
background-color: rgba(255,255,255,0.9);
}
#accordion .panel-body {
padding-top: 20px;
padding-bottom: 30px;
text-align: center;
}
.panel-group > .panel{
margin-top: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4 bites-stings">
<div class="panel-heading" role="tab" id="headingSeven">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
<h2>Bites and Stings</h2>
</a>
</div>
<div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeven">
<div class="panel-body">
<h4>Mosquitoes</h4>
<h4>Ticks</h4>
<h4>Bees and Wasps</h4>
<h4>Animal Bites</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 pet-health">
<div class="panel-heading" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2>Pet Health and Safety</h2>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<h4>Pet Allergies</h4>
<h4>Toxic Plants</h4>
<h4>Pet and Wildlife Encounters</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 livestock-health">
<div class="panel-heading" role="tab" id="headingThree">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2>Livestock Health and Safety</h2>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 zoonotic">
<div class="panel-heading" role="tab" id="headingFour">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<h2>Zoonotic Diseases</h2>
</a>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<h4>Bacterial</h4>
<h4>Fungal</h4>
<h4>Parasitic</h4>
<h4>Prionotic</h4>
<h4>Rickettsial</h4>
<h4>Spirochetes</h4>
<h4>Viral</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 allergies">
<div class="panel-heading" role="tab" id="headingFive">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<h2>Allergies</h2>
</a>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<h4>Animal Allergies</h4>
<h4>Environmental Allergies</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 environment-health">
<div class="panel-heading" role="tab" id="headingSix">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<h2>Environmental Health</h2>
</a>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
</div>
Im trying to get a bootstrap column to span 2 rows. I have been been looking at How can I get a Bootstrap column to span multiple rows? and it doesnt seem to work in the context of my project.
Could someone tell me what I need to do in order to make the column on the right span 2 rows?
<div class="container" style="background-color: #fff">
<div class="row" style="background-color: #fff">
<div class="col-md-4">
<img src="public/img/index/Hola_Sevila.png" style="width:180px">
<h6>Hola Sevilla!</h6>
<p>I recently had the pleaseure and the privilege of travelling to the ...</p>
<p>Read More</p>
</div>
<div class="col-md-4">
<img src="public/img/index/Trans_helps_children.jpg" style="width:180px">
<h6>Translation helps children</h6>
<p>De La Salle Solidarieta Internatazionale ONLUS is a non-profit organisation that fundraises ...</p>
<p>Read More</p>
</div>
<div class="col-md-4 two_row_column">
<div class="index-b-right-1"></div>
<div class="index-b-right-1">
<h3>Videos</h3>
</div>
<div class="index-b-right-1">
<h3>Be a Friend</h3>
</div>
<div class="index-b-right-2">
<h4>You can show your appreciation and support future development by becoming a friend of the Rosetta</h4>
</div>
<div class="index-b-right-3">
<h3>Donate</h3>
</div>
<div class="index-b-right-1"></div>
</div>
</div>
CSS
.index-b-right-1 {
background-color: #000;
height: 40px;
border-bottom: 2px solid white;
color: #fff;
text-align: center;
padding-bottom: 10px;
}
.index-b-right-2 {
background-color: #000;
border-bottom: 2px solid white;
color: #fff;
text-align: center;
padding: 30px 40px 30px 40px;
}
.index-b-right-3 {
background-color: #000;
height: 40px;
border-bottom: 2px solid white;
text-align: center;
padding-bottom: 10px;
}
.index-b-right-3 a {
color: #CC9900;
}
I guess this is what you wanted to do?
Simple way i would explain it is you create the top most row, create the columns in the row, then in the other column, create another row which you then divide up into individual columns.
Hope it helps!
<div class="container" style="background-color: #fff">
<div class="row" style="background-color: #fff">
<div class="col-md-4">
<img src="public/img/index/Hola_Sevila.png" style="width:180px">
<h6>Hola Sevilla!</h6>
<p>I recently had the pleaseure and the privilege of travelling to the ...</p>
<p>Read More</p>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4">
<img src="public/img/index/Trans_helps_children.jpg" style="width:180px">
<h6>Translation helps children</h6>
<p>De La Salle Solidarieta Internatazionale ONLUS is a non-profit organisation that fundraises
...</p>
<p>Read More</p>
</div>
<div class="col-md-4 two_row_column">
<div class="index-b-right-1"></div>
<div class="index-b-right-1">
<h3>Videos</h3>
</div>
<div class="index-b-right-1">
<h3>Be a Friend</h3>
</div>
<div class="index-b-right-2">
<h4>You can show your appreciation and support future development by becoming a friend of the
Rosetta</h4>
</div>
<div class="index-b-right-3">
<h3>Donate</h3>
</div>
<div class="index-b-right-1"></div>
</div>
</div>
</div>
</div>