Owl carousel height issue

Hi all,
link to  link to demo page
The large empty green area on the right should show an owl carousel however for whatever reason the 100% height of each carousel item is not working.
The image attached shows how it should look.
Assistance appreciated.
Cheers,
N
screen-shot.jpg
LVL 5
Neil_BradleyWeb UX/UI DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,
it seems that you are missing the element where you want to bind the Google map to (map-canvas).
Therefore JavaScript errrors out BEFORE it can run the carousel.

Either add the element for the map with the id "map-canvas" OR remove the ref to map.js.

HTH
Rainer
0
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
I removed the map for demo purposes. It still does not work even with the map. In place.. If you inspect the code you will see that the carousel is working but the 100% height element is not doing its job..
0
sajayj2009Commented:
Check all these css;

.main-slider-4 {
    position: absolute;
    top: 0px;
    left: 50%;
    right: 0%;
    bottom: 0%;
    height: 100%;
    z-index: 9999999;
}
#single-carousel, #single-carousel-sidebar {
    /* overflow: hidden; */
}
.owl-carousel {
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
    -ms-touch-action: pan-y;
    overflow: hidden;
}
.owl-carousel .owl-wrapper-outer {
    /* overflow: hidden; */
    position: relative;
    width: 100%;
}
.vertical-top {
    /* position: absolute; */
    left: 0px;
    top: 0px;
    width: 100%;
}
.weth-icon.style-2 {
    margin-top: 0px;
    margin-right: 50px;
    width: 108px;
    padding-top: 23px;
    padding-bottom: 18px;
    text-align: center;
}
.vertical-align {
    -webkit-transform: translateY(99%);
    -moz-transform: translateY(99%);
    -o-transform: translateY(99%);
    -ms-transform: translateY(99%);
    transform: translateY(99%);
    /* top: 50%; */
    position: absolute;
    width: 100%;
    /* height: 100%; */
    left: 0px;
}

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Rainer JeschorCommented:
Hi,

sorry but both in IE 11 as well as Chrome it is not working at all - there is still the reference to the map.js and no element with the id "map-canvase", therefore one Sub function of Google maps returns an error:
 Cannot read property 'offsetWidth' of null

HTH
Rainer
0
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Sayjay, I added your css and its had some effect. See demo page again.
Rainer, map code removed..
N
0
sajayj2009Commented:
Did you try all css lines to existing one...can you paste in end of current css file and see?
0
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Hi Sajayj,
can you clarify your last posting?
N
0
sajayj2009Commented:
I tried the css in inspect element of the demo page you posted above and it worked fine. Only thing was image was not appearing because of wrong path maybe....

Could you please include the same css lines in current css file end of line just to make sure it works?
0
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
I can confirm that the image path is 100% correct. See screen shotScreen shot showing image via Chrome inspector..
0
sajayj2009Commented:
.main-slider-4 {
    position: absolute;
    top: 0px;
    left: 50%;
    right: 0%;
    bottom: 0%;
    height: 100%;
    z-index: 9999999;
}
#single-carousel, #single-carousel-sidebar {
    /* overflow: hidden; */
}
.owl-carousel {
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
    -ms-touch-action: pan-y;
    overflow: hidden;
}
.owl-carousel .owl-wrapper-outer {
  /* overflow: hidden; */
  position: relative;
  width: 100%;
  height: 100%;
}
.owl-carousel .owl-wrapper {
  /*display: none;*/
  position: relative;
  /*width: 100%;*/
  height: 100%;
  -webkit-transform: translate3d(0px, 0px, 0px);
  -webkit-perspective: 1000;
}
.owl-carousel .owl-item {
  float: left;
  height: 100%;
}
.vertical-top {
    /* position: absolute; */
    left: 0px;
    top: 0px;
    width: 100%;
}
.weth-icon.style-2 {
    margin-top: 0px;
    margin-right: 50px;
    width: 108px;
    padding-top: 23px;
    padding-bottom: 18px;
    text-align: center;
}
.vertical-align {
    /*-webkit-transform: translateY(99%);
    -moz-transform: translateY(99%);
    -o-transform: translateY(99%);
    -ms-transform: translateY(99%);
    transform: translateY(99%);*/
    top: 50%;
    position: absolute;
    width: 100%;
    /* height: 100%; */
    left: 0px;
}
.swiper-slide {
  float: left;
  height: inherit !important;
  position: relative;
  width: 100%;
}
.bg-bg-chrome {
  background: url(http://beaconhilldesign.co.nz/~airchathams/dev/img/home_4/slide_3.jpg);
  background-position: 0%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  -moz-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
}

Open in new window


About bg, you need to bring back image to full path...

Hope above code will bring some difference...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
You did it! Fantastic! Thanks you so much for your persistence with this.
Great job..
Neil
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.