This works, but the moment I add Bootstrap 3, (which I need to as it's required in an existing project) it no longer fades in and out.
<!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.0" />
<style type="text/css">
.flashcard
{
opacity: 1;
transition: opacity 2s;
}
.flashcard.hidden
{
opacity: 0;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', (event) =>
{
var d = document.getElementById('code-yes-text');
d.classList.add("hidden");
document.getElementById('code-yes').addEventListener("change", function()
{
if (this.checked && d.classList.contains("hidden"))
{
document.getElementById('code-yes-text').classList.toggle('hidden');
}
});
document.getElementById('code-no').addEventListener("change", function()
{
if (this.checked && !d.classList.contains("hidden"))
{
document.getElementById('code-yes-text').classList.toggle('hidden');
}
});
});
</script>
</head>
<body>
<div class="radio">
<label>
<input type="radio" name="code" id="code-yes" />
<span>Yes</span>
</label>
</div>
<div id="code-yes-text" class="flashcard hidden">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam quibusdam suscipit culpa voluptatem nulla. Rerum explicabo in quo commodi ad laudantium nam ratione consectetur beatae, sint dolore molestias assumenda soluta.
</div>
<div class="radio">
<label>
<input type="radio" name="code" id="code-no" />
<span>No</span>
</label>
</div>
</body>
</html>
Related
im use bootstrap 4.3.1 version along with the vue.js version 2
my code
<div class="container">
<div class="row">
<div class="col-md-7">
<div
class="tooltip-icon"
#click="show = !show"
id="tooltip-button-1"
></div>
<b-tooltip
:show.sync="show"
target="tooltip-button-1"
custom-class="tooltip-custom"
placement="bottom"
triggers="click"
>
<div class="tooltip-text-title">
Тест
</div>
</b-tooltip>
</div>
<div class="col-md-5"></div>
</div>
</div>
JS:
<script>
export default {
name: "Test",
data() {
return {
show: false,
};
},
};
</script>
and in this case, if I change the style of the tooltip, I increase its max-width on 1000px or more (.tooltip-inner), and if its width is greater than that of the parent (col-md-7), it changes the placement to the left
it turns out that the tooltip cannot go beyond the column
Your code is working fine. I did not see any issue in that. Tooltip is behaving correct as per the col width (col-md-7) provided.
Live Demo :
new Vue({
el: "#app",
data: {
show: false
}
});
<script src="https://unpkg.com/vue#2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.12.0/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.5.0/dist/bootstrap-vue-icons.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.12.0/dist/bootstrap-vue.css"/>
<div id="app">
<div class="container">
<div class="row" style="text-align: center">
<div class="col-md-7" style="background-color: yellow">
<div #click="show = !show" id="tooltip-button-1">
Click Me
</div>
<b-tooltip target="tooltip-button-1" triggers="click" placement="bottom">Тест</b-tooltip>
</div>
<div class="col-md-5"></div>
</div>
</div>
</div>
new Vue({
el: "#app",
data: {
show: false
}
});
<script src="https://unpkg.com/vue#2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.12.0/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.5.0/dist/bootstrap-vue-icons.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.12.0/dist/bootstrap-vue.css"/>
<div id="app">
<div class="container" style="max-width: 1024px;">
<div class="row" style="text-align: center">
<div style="background-color: yellow; width: 55%; overflow-y: scroll">
<div #click="show = !show" id="tooltip-button-1">
Click Me
</div>
<b-tooltip target="tooltip-button-1" triggers="click" placement="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</b-tooltip>
</div>
<div style="background-color: red; width: 45%;">
<div style="height: 40px"></div>
</div>
</div>
</div>
</div>
<style>
.tooltip-inner {
max-width: 300px!important
}
</style>
I found a more correct interpretation of my error
it appears if the block has scrolling
I am not sure what is happening here, but seems like I can't change the class of the active-class prop of my v-expansion-panels dynamically.
I am trying to change it between green and red depending on a model state (changed by a click on a button), but even though the model changes the v-expansion-panels doesn't pick the new active class.
Might be doing something wrong here, but can't figure it out.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
edited: false,
}
},
computed: {
activeClass() {
return this.edited ? 'active-panel-edited' : 'active-panel-normal';
}
}
})
<style scoped>
.active-panel-edited {
background-color: #ff000038 !important;
}
.active-panel-normal {
background-color: #00ff1438 !important;
}
</style>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</head>
<body>
<div id="app">
<v-app>
The current active class: {{activeClass}}
<v-expansion-panels :active-class="activeClass">
<v-expansion-panel
v-for="(item,i) in 5"
:key="i"
>
<v-expansion-panel-header>
Item
</v-expansion-panel-header>
<v-expansion-panel-content>
Lorem ipsum dolor sait amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<v-btn #click="edited = !edited">Change Color</v-btn>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-app>
</div>
</body>
</html>
Thank you in advance!
apply the active class v-expansion-panel instead of v-expansion-panels
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
edited: false,
}
},
computed: {
activeClass() {
return this.edited ? 'active-panel-edited' : 'active-panel-normal';
}
}
})
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<style>
.active-panel-edited {
background-color: #ff000038 !important;
}
.active-panel-normal {
background-color: #00ff1438 !important;
}
</style>
</head>
<body>
<div id="app">
<v-app>
The current active class: {{activeClass}}
<v-expansion-panels>
<v-expansion-panel
:active-class="activeClass"
v-for="(item,i) in 5"
:key="i"
>
<v-expansion-panel-header>
Item
</v-expansion-panel-header>
<v-expansion-panel-content>
Lorem ipsum dolor sait amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<v-btn #click="edited = !edited">Change Color</v-btn>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-app>
</div>
</body>
</html>
I'm trying to create a sidebar which can slide-in and -out by clicking on a trigger element. The trigger-element should be sticked to the sidebar.
However, in my current fiddle, the triggler-element only changes position after the sidebar completed its transition.
How can I accomplish the expected behavior?
new Vue({
el: "#app",
data: {
exposed: true
}
})
.sidebar {
width: 200px;
height: 200px;
}
.toggler {
height: 30px;
}
/**********************
* Transition classes *
**********************/
.slide-leave-active,
.slide-enter-active {
transition: 1s;
}
.slide-enter {
transform: translate(-200px, 0);
}
.slide-leave-to {
transform: translate(-200px, 0);
}
<script src="https://vuejs.org/js/vue.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app" class="px-0 py-4">
<div class="d-flex">
<!-- Sidebar content -->
<transition name="slide">
<div v-if="exposed" class="sidebar bg-dark text-white p-1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</transition>
<!-- Sidebar toggler -->
<div class="toggler px-2 bg-secondary">
<a href="#" v-on:click="exposed = !exposed" class="text-white">
<span v-if="exposed">[X]</span>
<span v-else>(?)</span>
</a>
</div>
</div>
</div>
jsfiddle
I made minor css change as below
.slide-enter {
margin-left:-200px;
}
.slide-enter-to {
margin-left:0px;
}
.slide-leave-to {
margin-left:-200px;
}
Please check if it works.
https://jsfiddle.net/z43xug9n/3/
If you want to slide both the sidebar and the toggle at the same time, it is better to slide their parent (container).
https://jsfiddle.net/4mju0rzt/31/
<div id="app">
<div v-bind:class="{'minimized': hide}" class="sidebar-container">
<div class="sidebar bg-dark text-white p-1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<!-- Sidebar toggler -->
<div class="toggler px-2 bg-secondary">
<a href="#" v-on:click="hide = !hide" class="text-white">
<span v-if="!hide">[X]</span>
<span v-else>(?)</span>
</a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
hide: false
}
})
</script>
Found a solution with Velocity.js. The trick is to move the sidebar away instead of removing it from the DOM.
new Vue({
el: "#app",
data: {
exposed: true
},
methods: {
slideIn (el, done) {
Velocity(el, {
marginLeft: 0
}, {
duration: 500
}, {
complete: done
});
},
slideOut (el, done) {
Velocity(el, {
marginLeft: -200
}, {
duration: 500
}, {
complete: done
});
}
}
})
.sidebar {
width: 200px;
height: 200px;
}
.toggler {
height: 30px;
width: 36px;
}
<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.3/velocity.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app" class="px-0 py-4">
<div class="d-flex">
<!-- Sidebar content -->
<transition v-on:enter="slideIn" v-on:leave="slideOut">
<div v-show="exposed" id="sidebar" class="sidebar bg-dark text-white p-1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</transition>
<!-- Sidebar toggler -->
<div class="toggler px-2 bg-secondary">
<a href="#" v-on:click="exposed = !exposed" class="text-white">
<span v-if="exposed">[X]</span>
<span v-else>(?)</span>
</a>
</div>
</div>
</div>
I am starting out with bootstrap and am trying to create a simple column within a row, within a container.
The aim is to make the content within the column take up approximately a quarter the width of the page (or 3/12 of the grid).
Here is my code...
<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrap.com/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<title>Creating Columns</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<h1>8.Creating Columns</h1>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Ab libero, cupiditate veniam
officiis itaque in porro iure fugit iusto
reprehenderit commodi earum cum blanditiis quos
error similique quod, facere! Hic.</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
When I run this code in the browser, The Lorem Ipsum text just spans the whole
width of the browser regardless of the size of the browser.
I have also tried using the class ".col-xs-3" with no success... same result.
I would appreciate any help, as I am not to far into using bootstrap yet already
stuck.
Thank you you all very much.
I looked arround and I think I am using correctly the jumbotron element, but for some reason bootstrap is not working properly. I tried copy&pasting a working jumbotron from another page and it does not work here. Bootsrap css file is correctly connected because col-sm-6 is working properly. Thanks in advance!
P.S. style.css is an empty css file
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Lorem</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="./css/normalize.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<header></header>
<div class="jumbotron login_main" >
<div class="col-sm-6 vertical-center">
<h1 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
<h2 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</h2>
</div>
<form>
<p>hello</p>
</form>
</div>
<footer>
</footer>
</body>
</html>
<div class="container">
<div class="col-sm-6 col-sm-offset-3 vertical-center">
<div class="jumbotron login_main" >
<h1 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
<h2 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</h2>
<form>
<p>hello</p>
</form>
</div>
</div>
</div>
You're going to want to wrap it all in an element with the class "container". The bootstrap grid system uses 12 columns, so if you're going to have an element that is 6 columns wide, to center it, you'll need to offset it by 3. The code here should work.