I have a bootstrap tooltip which I have custom styled. There seems to be an issue with it. Whenever we hover over it, it opens and then immediately closes.
HTML -
<div class="container" style="padding-top:300px">
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" data-html="true" title="" data-original-title="Tooltip Text">i</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" data-html="true" title="" data-original-title="Tooltip Text">i</span>
</div>
</div>
Here's an inline link to jsFiddle
UPDATED
I made a few changes. Try this: https://jsfiddle.net/2h7jbt9n/6/
HTML
<div class="container" style="padding-top:30px">
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" title="YoHo Ho Ho" data-placement="top" data-toggle="tooltip">i</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" title="YoHo Ho Ho" data-placement="top" data-toggle="tooltip">i</span>
</div>
</div>
JS
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
container: '.info-circle'
});
});
The issue was with padding for the info-circle. I wrapped it in a container. It doesn't flicker now.
Hope it helps.
You are no longer using the tooltip-arrow as the visual arrow you are using the :before and :after after as the visual arrow. The problem is that you have made the arrow bigger and made your own triangles. When you make your css arrow you are using borders. You have set your top border colors to white and blue to make it seem like the arrow has a border as well. In doing this you have forgotten that your arrow still has a bottom transparent border and this transparent border is covering up the element that you are hovering over to deploy the tooltip. So set your :before and :after psuedo elements for your .tooltip-arrow to have a bottom border of none. Like so:
.tooltip.top .tooltip-arrow:after {
content: " ";
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
left: -17px;
top: -5px;
border-width: 12px;
border-top-color: #003f6e;
border-bottom:none;
}
.tooltip.top .tooltip-arrow:before {
content: " ";
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
left: -15px;
top: -5px;
border-width: 10px 10px 0;
border-top-color: #fff;
border-bottom:none;
z-index: 1;
}
Related
I want to switch between two slides by using a scroll and I want to have an indicator
to show which of the two slides that are being shown.
Building the scroll part was not very difficult and has been done.
My problem is:
How can I extract the idx value from the for loop to know which one of the to slides that is being shown?
This so that I can present which slide I am on with the indicators.
Scrolling
This is the code for scrolling between the two images.
HTML
<div class="container_large">
<div v-for="(i,idx) in this.slider_header " class="scroll" :key="idx" >
<div :style="{height:'82px', width:'100%'}" v-if="idx==0" >
Slide 1
</div>
<div v-if="idx==1" :style="{height:'92px', width:'100%'}" >
Slide 2
</div>
</div>
</div>
CSS
.container_large{
width: 100%;
/* width: 90%; */
display: flex;
overflow-x: scroll;
margin-left: 0%;
height: 99px;
position: absolute;
margin-top: 27%;
z-index: 2;
}
.scroll{
min-width:388px;
position: relative;
margin-top: 0%;
border-radius: 8px;
display: flex;
height: 92px;
z-index: 1;
margin-left: 2%;
object-fit: cover;
}
Indicators
This code is for the indicators to show which of the two images that are being shown at the moment.
<div :style="{height:'15px', position:'absolute',marginTop:'51%',borderRadius:'8px',zIndex:'3', width:'30px',marginLeft:'43%',backgroundColor:'grey'}">
<div id="slide1" :style="{borderRadius:'50%',height:'13px',marginLeft:'8%',marginTop:'1.5%', width:'13px', zIndex:'4',backgroundColor:'white'}">
</div>
<div id="slide2" :style="{borderRadius:'50%',height:'13px',marginLeft:'51%',marginTop:'1.5%', width:'13px', zIndex:'4',backgroundColor:'white'}">
</div>
</div>
I would like to add v-if="idx==0" and v-if="idx==1" to id="slide1" and id="slide2" respectively to show which one of them that is being seen but
since they fall outside of the for loop this doesn't work.
Question
How can I catch the idx value or solve this in some other way to present which slide that I am on?
Ok so I think you have too much v-if inside your v-for.
There is no need to create all of your slides with to then only render one of them with series of conditions.
Have you considered something like this?
<div class="container_large">
<div
class="slide"
:style="slides[activeSlide].style">
{{slides[activeSlide].text}}
</div>
</div>
I have added a jumbotron to my webpage, my page is now displaying the bottom and right scroll bar! Not sure how to resolve this.
Any tip's or pointers much appreciated.
url http://tyrescanner.net/contact-us
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h1><span style="color: #ffffff;">Welcome to Tyrescanner</span></h1>
<p></p>
<h2>Contact us.</h2>
</div>
</div>
</div>
</div>
what are you asking for? I assume you just don't want bottom scrollbar ,is that right?
If so, below is your CSS for HTML . change that as below it's in your bootstrap.css file and line number 1071
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
overflow: auto;
overflow-x: hidden;
}
Your jumbotron is wrapped with divs row and col-md-12:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
Delete them and leave only jumbotron.
or remove paddings from your css:
.container-fluid {
width: 100%;
padding-top: 0px;
/* padding-left: 0px; */
/* padding-right: 0px; */
padding-bottom: 0px;
}
It overwrites bootstrap css and cause problem with page width.
After viewing your site I see some issues:
You're using a container-fluid and a nested container-fluid as the jumbotron parent element, the nested one is redundant.
Then I see you've overridden container-fluid and .col--12 classes default bootstrap left/right padding to 0px but you didn't change the default margin of the .row class to have 0px left/right margin hence your bottom scroll bar.
For the footer, remove the margin-top and make the footer a direct child of the body element then add the following css to the form, body and html elements: height:100%;, the rest is margins that you added to the elements.
I am working with a third party website which allows me to modify code to suit my needs. I have a product page with responsive columns. Administrative users can upload images for the products which end users can order. I've set it so the images are responsive as well, but because the product images are not all the same aspect ratio, I have some items which are taller than others, making the page leave spaces in the column blank. I want the images to stay responsive and keep their aspect ratio, but have the containers they are in all have the same height and responsive width. Changing max-height and min-height just gives the same response as setting height. How do I do that while keeping the width correct?
<div class="col-xs-12 text-center">
<div class="well text-center">
<href="product/{{LineItem.Product.InteropID}}">
<figure ng-show="LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl" >
<img class="img-responsive" style="max-height: 200px; min-height: 200px; width: auto; margin: auto;" ng-src="{{LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl}}"/>
</figure>
<div class="empty" ng-hide="LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl">
<span class="fa empty"><i class="fa fa-camera"></i></span>
</div>
</a>
</div>
</div>
The best solution would be to force users to upload an image of a certain height/width, but barring that, you could just put the responsive images inside of a div that has a fixed size and it's css overflow property set to hidden.
<figure ng-show="LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl" >
<div style="height:200px; width:200px;overflow:hidden;">
<img class="img-responsive" ng-src="{{LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl}}"/>
</div>
</figure>
Now, the image is fully responsive, but any portions of it that are bigger than its container will be clipped.
HTML
<div class="img-wrap ratio-4-3">
<div class="img-content">
<img src="https://picsum.photos/200" />
</div>
</div>
SCSS
.img-wrap{
position: relative;
.img-content{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
> img{
max-width: 100%;
max-height: 100%;
width: auto;
}
}
&.ratio-4-3{
padding-top: 75%;
}
&.ratio-16-9{
padding-top: 56.25%;
}
&.ratio-3-2{
padding-top: 66.66%;
}
&.ratio-8-5{
padding-top: 62.5%;
}
}
https://jsfiddle.net/huypn/pcwudrmc/25813/
I tried to place an h1 element above a div element using the css property z-index, but it's not working!
Here's my html:
<div id="header">
<div id="headerblock">
</div>
<h1>This is my header text</h1>
</div>
The #headerblock has a black surface including some transparency.
I want the h1 to be appearing above the #headerblock. As I mentioned the z-index property isn't working. Does someone have a solution for this? Or at least a reason why it's not working?
Thanks.
Gotta have a position on the h1.
h1 {
position:relative;
z-index: 500;
}
#header{
background-image: url(img/head.jpg);
background-size: 100%;
height: 520px;
width: 100%;
top:49px;
position: absolute;
margin:0 auto;
text-align:center;
}
#headerblock{
background-color:#444444;
opacity:0.7;
filter:alpha(opacity=70);
width:100%;
position:absolute;
height:200px;
}
<div id="header">
<div id="headerblock"></div>
<h1 style="color:white">This is my header text</h1>
</div>
I want to create a header similar to facebook where position:fixed. and when you zoom-out the whole page centers itself and when I zoom-in the header also streches..
When I use position:fixed and zoom-in some contents disappear due to lack of space on the window..
<div id="header_line" ></div>
<div id="header">
<div id="heading_name" >Home </div>
<div id="heading_name" style="left:28%;">Advertisement Board</div>
<div id="heading_name" style="left:46%;">Advertise</div>
<div id="heading_name" style="left:60%;">Sign In</div>
<div id="heading_name" style="left:76%;">About Us</div>
</div>
<style>
#header_line{
position:fixed;
top:0%;
left:0%;
width:1370px;
height:7px;
z-index:20;
background-color:#F60;
}
#header{
position:fixed;
left: 0px;
z-index:20;
top: 7px;
width:1370px;
height: 30px;
background-color:#003;
border-bottom:thick;
border-bottom-color:#000;
box-shadow:2px 5px 5px 1px #033;
}
</style>