Is there an easy (non-hackish?) way to make a Bootstrap button lookalike that's not clickable (and I don't mean a disabled button). Basically a <div class="btn btn-default">Something</div> that doesn't behave like a link.
Thanks in advance
I've done this before using a new class btn-static:
.btn-static {
background-color: white;
border: 1px solid lightgrey;
cursor: default;
}
.btn-static:active {
-moz-box-shadow: inset 0 0 0px white;
-webkit-box-shadow: inset 0 0 0px white;
box-shadow: inset 0 0 0px white;
}
And use it like the following:
<div class="btn btn-static">Static</div>
<!-- btn-default for comparison -->
<button type="button" class="btn btn-default">Default</button>
So now it looks like a button, but doesn't act like one when you click it.
Bootply Link for Example
As #benrwb mentioned in the comments, the most elegant solution would be to set the elements style property "pointer-events" to "none".
E.g.
<button type="button" class="btn btn-primary">My Button</button>
becomes
<button type="button" class="btn btn-primary" style="pointer-events: none;">My Button</button>
This doesn't only work on Bootstrap buttons, but also every other HTML element that has some kind of hover actions.
This seems to work too:
<div class="btn btn-default disabled" style="cursor:default;">Something</div>
.btn-block+.btn-block{margin-left:0}
Related
I have two divs that i transition between using transition-group, which works as it should - however, the content below the divs transitioning, is "jumping" depending on the height of the divs.
What I want it that jumping being prevented, and instead it animates somehow, so I get a nice smooth transition when switching between elements without it "pushing" down to content with a "jump"..
Hope it makes sense :)
I've setup an example on codesandbox here: https://codesandbox.io/s/reverent-stallman-8ixhp?file=/src/components/HelloWorld.vue
The template looks like:
<div class="hello">
<button #click="groupShowOne">Show first {{ gShowFirst }}</button>
<button #click="groupShowTwo">Show second {{ gShowSecond }}</button>
<transition-group name="fade-group" tag="div" mode="out-in" appear>
<div
class="group-element"
v-if="gShowFirst"
style="background-color: yellow"
>
<h3>This is a headline</h3>
<p>This is a text</p>
</div>
<div
class="group-element"
v-if="gShowSecond"
style="background-color: red"
>
<h3>
This is a headline <br />This is a headline <br />This is a headline
This is a headline This is a headline This is a headline
</h3>
<p>
This is a text This is a text This is a text This is a text This is a
text v This is a text v <br />This is a text This is a text This is a
text This is a text This is a text v This is a text v <br />This is a
text This is a text This is a text This is a text This is a text v
This is a text v
</p>
</div>
</transition-group>
<div style="background-color: blue; min-height: 500px; color: #FFF">
Prevent this div from jumping<br />
</div>
</div>
The animation looks:
<style scoped>
.group-element {
width: 100%;
min-height: 100px;
max-height: 20000px;
transition: all 0.5s;
}
.fade-group-enter,
.fade-group-leave-to {
opacity: 1;
}
.fade-group-leave-active {
opacity: 0;
position: absolute;
}
</style>
Try this
Setting the transition property in the passive div:
.ele {
background-color: blue;
min-height: 500px;
color: #fff;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
Let it do some animation
eleStyle() {
return {
transform: this.gShowSecond ? "translate3d(0, 100px, 0)" : "none",
};
},
The div:
<div class="ele" :style="eleStyle">Prevent this div from jumping<br /></div>
What you can try:
Vue has a *-move class for group transitions. However, the transition-group has to be applied to all the elements including the one that has the v-move class, to work.
Here's the article link if you need it for more details: https://vuejs.org/guide/built-ins/transition-group.html#move-transitions
(*-move basically animates items from their original position to their new position, making it smooth, rather than jumpy)
You could still work with what you have and dynamically bind a separate CSS transition for the blue box when showSecond or showFirst equate to a certain value.
I have:
<li class="nav-item">
<b-popover
target="search-button"
placement="topleft"
title="Search"
triggers="click"
content="Placement"
container="nav-container"
>
<template slot="title">Interactive Content</template>
<template slot="content">Interactive Content</template>
</b-popover>
<a class="nav-link" href="#" title="Popover Title" id="search-button">
<i class="material-icons md-48">search</i>
</a>
</li>
I want to add a class to the popover, but ideally have it scoped to this component. When I try to do:
<style scoped>
.nav {
background: white;
border-top: 0.1px solid silver;
}
.nav-pills .nav-link {
border-radius: 0;
}
.popover {
width: 100%;
background: red;
}
</style>
It seems to have no impact on the actual popover.
Version 2.0.0-rc.26 (which is to be released soon) adds support for tooltip/popover variants as well as applying custom classes to the tooltip/popover root element.
You can see a preview at https://bootstrap-vue.netlify.com/ (and will appear at https://bootstrap-vue.js.org/ once released)
Its not possible to give class to <b-popover>, you can read here.
But as I mentioned in comment you can use querySelector and give class or styling.
Cheers.
From what I've learned about <amp-carousel> it has only 2 types of carousel interface: carousel and slides, which you can see on the AMP example website. I need to create something like this, multiple columned carousel. Is AMP carousel able to achieve this?
You can't customize amp-carousel the way you want, you need to check out amp-base-carousel which allows you to set visible-count, advance-count and other useful properties.
The documentation.
Example :
<amp-base-carousel
loop="true"
height="450"
layout="fixed-height"
visible-count="(min-width: 1150px) 3, (min-width: 700px) 2, 1"
advance-count="(min-width: 1150px) 3, (min-width: 700px) 2, 1"
>
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<button slot="next-arrow" class="carousel-next" aria-label="Next">
<i class="fas fa-chevron-circle-right"></i>
</button>
<button slot="prev-arrow" class="carousel-prev" aria-label="Previous">
<i class="fas fa-chevron-circle-left"></i>
</button>
</amp-base-carousel>
With some style for the buttons :
.carousel-prev, .carousel-next {
filter: drop-shadow(0px 1px 2px #4a4a4a);
width: 40px;
height: 40px;
padding: 20px;
background-color: transparent;
border: none;
outline: none;
font-size: 24px;
opacity:0.7;
}
In a way, yes.
You can use the slide interface, in under each section, but 4 entries.
<amp-carousel height="300" layout="fixed-height" type="slides">
<div>
<div class="blue-box"> 1 </div>
<div class="red-box"> 2 </div>
<div class="green-box"> 3 </div>
<div class="yellow-box"> 4 </div>
</div>
<div>
<div class="blue-box"> 9 </div>
<div class="red-box"> 8 </div>
<div class="green-box"> 7 </div>
<div class="yellow-box"> 6 </div>
</div>
</amp-carousel>
I understand it won't be shifting with one entry at a time, but I suppose it would be near to what you want
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;
}
I'm using ng2-file-upload (single upload example) and I want to use: ng2FileSelect with a button or a div instead of a file input. How can I do this?
I want this to do something like this:
<button ng2FileSelect [uploader]="uploader">Choose file</button>
Instead of:
<input type="file" ng2FileSelect [uploader]="uploader" />
If does not exist a clean way using ng2-file-upload, do you know an alternative?
One possible solution is to leverage Angular 2's template variables, and to assign a template variable to the input element; once done, you can directly invoke methods defined on that input from another element, such as a button.
I did the following in one of my applications; it works on IE11, Firefox, and Chrome:
<button (click)="fileInput.click()" class="btn btn-default">Upload</button>
<span style="visibility: hidden; position: absolute; overflow: hidden; width: 0px; height:0px;border:none;margin:0; padding:0">
<input type="file" #fileInput ng2FileSelect [uploader]="uploader" />
</span>
So as you can see, the button is simply calling the #fileInput's click event within its own click event.
Note that I'm burying the input within a span, and then hiding the span from view via a bunch of styles, such that only the button is visible. Also note that applying these styles to the input element directly seemed to cause problems in IE11.
Yon can wrap input[file] element with label element and hide it. See this answer and this example
Here's the code.
HTML:
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Custom Upload
</label>
<input id="file-upload" type="file"/>
CSS:
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
In a simple way, you can do it with label, you just have to hide the input.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<label class="btn custom-input-btn">
<input type="file" name="photo" style="display:none" accept="*" multiple>
<i class="fa fa-cloud-upload"></i> Upload Files
</label>