I'm experiencing a bug while using Boostrap(4)-Vue.
Namely, when transitioning between slides the image scrolls up and the page 'jumps' as can be seen below. I've copied exactly the source code in the reference provided.
The bug persists in both Chromium and Firefox, both for desktop (large) view and for mobile.
Any idea would be appreciated.
Vue component:
<template>
<b-carousel id="carousel1"
style="text-shadow: 1px 1px 2px #333;"
controls
indicators
background="#ababab"
:interval="4000"
img-width="1024"
img-height="480"
v-model="slide"
#sliding-start="onSlideStart"
#sliding-end="onSlideEnd">
<!-- Text slides with image -->
<b-carousel-slide caption="First slide"
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
img-src="https://picsum.photos/1024/480/?image=52"
></b-carousel-slide>
<!-- Slides with custom text -->
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
<h1>Hello world!</h1>
</b-carousel-slide>
<!-- Slides with image only -->
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58">
</b-carousel-slide>
<!-- Slides with img slot -->
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
<b-carousel-slide>
<img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
src="https://picsum.photos/1024/480/?image=55" alt="image slot">
</b-carousel-slide>
<!-- Slide with blank fluid image to maintain slide aspect ratio -->
<b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
eros felis, tincidunt a tincidunt eget, convallis vel est. Ut pellentesque
ut lacus vel interdum.
</p>
</b-carousel-slide>
</b-carousel>
</template>
<script>
import data from '#/data'
export default {
name: 'Home',
data () {
return {
slogan: data.slogan,
welcome: data.welcome,
servicesList: data.servicesList,
slide: 0,
sliding: true,
selected: ''
}
},
methods: {
expand (sect) {
sect.expanded = !sect.expanded
},
onSlideStart (slide) {
this.sliding = true
},
onSlideEnd (slide) {
this.sliding = false
}
}
}
</script>
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.selected {
background-color: aquamarine;
}
</style>
Related
I am trying to learn Vue.js and doing a basic fade. I have an list of links that always stay on the page. On clicking the link, I wish to fade in and out the visibility of a div. By default the div isn't seen. This div contains several components. I tried to follow the documentation. However, the element only fades out while leaving, but nothing happens to it when enters. I've removed excess parts of this document and kept the relevant elements.
<template>
<div class="list">
<ul>
<li #click="openWindPoetry">☞ Wind Poetry</li> // button that toggles div show
</ul>
</div>
<div style="width: 97%;" class="project container">
<transition name="fade" mode="out-in">
<div v-if="showWP" class="backdrop" #scroll.passive="handleScroll"> // div needed to transition
<Header theme="WP" header="Wind Poetry" :types="['Interaction','Data Visualisation','2020']"></Header>
<BodyText theme="WP" heading="ABOUT"
body="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nulla magna, consectetur quis tellus eget, ultricies mattis nisi. Duis dictum dolor in ante placerat, non ultricies dui faucibus. Vivamus lobortis sapien porttitor, molestie urna ut, varius neque. In eu dapibus lectus. Etiam consequat, massa ut consequat lacinia, velit dui molestie dolor, id dapibus sem justo a ante. In pellentesque, odio ut pharetra congue, quam tellus efficitur arcu, non mattis risus nibh ac turpis.">
</BodyText>
<div class="introImg">
<video alt="GIF DEMO" loop autoplay="autoplay" src="./assets/wind/wind_poetry-demo-1.mp4"></video>
</div>
</transition>
</div>
</template>
<script>
export default {
name: "App",
components: {
Header,
Gradient,
BodyText
},
data() {
return {
title: "LIST OF WORKS",
ProjTitle: "Wind Poetry",
showWP: false
};
},
methods: {
openWindPoetry() {
(this.title = "BACK TO HOME"),
(this.showWP = true),
(this.showRec = false);
}
}
}
</script>
<style>
#app {
font-family: "Roboto Mono";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease-out;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
In Vue 3, the transition class name has changed from -enter to -enter-from, so your classes should be renamed accordingly to allow the transition calculation to work properly:
/* .fade-enter {/*...*/} ❌ Vue 2 class name */
.fade-enter-from {/*...*/}
demo
im developing first vuejs application with bootstrap vue and actually im stuck on one thing. My master page contains left fixed sticky sidebar where i have two icons as menu link. The goal is when i click on any menu link i need the left sidebar to pop up (animation from left to right). Something like submenu with 100% height and custom width.
For the left fixed sidebar I used whole bootstrap grid system. Now im trying to implement bootstrap sidebar which will be animated with offset left margin so that it starts from the right edge of the fixed sidebar. The problem what i have now is that the animation goes through the fixed sidebar.
How to achieve this? Should i used sidebar component from bootstrap vue or implement pure html div element and control its animation? Should i play with z-index?
MasterView.vue
<template>
<b-row class="h-100 m-0">
<Menubar msg=""></Menubar>
<b-col id="content">
<router-view />
</b-col>
</b-row>
</template>
<script>
import Menubar from '#/components/Menubar.vue'
export default {
name: 'master',
components: {
Menubar
}
}
</script>
Menubar.vue
<template>
<b-col id="menubar" class="align-self-center"
>{{ msg }}
<div :class="[currentPage.includes('sms-template') ? activeClass : '', 'text-center py-3']">
<b-button variant="link" v-b-toggle.sidebar-footer>
<feather type="message-square" class="menu-icons"></feather>
</b-button>
<b-sidebar id="sidebar-footer" aria-label="Sidebar with custom footer" no-header>
<template v-slot:footer="{ hide }">
<div class="d-flex bg-dark text-light align-items-center px-3 py-2">
<strong class="mr-auto">Footer</strong>
<b-button size="sm" #click="hide">Close</b-button>
</div>
</template>
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
</div>
</b-sidebar>
</div>
</b-col>
</template>
<script>
export default {
name: 'Menubar',
props: {
msg: String
},
data() {
return {
activeClass: 'menu-active'
}
}
}
</script>
App.vue (css)
<style>
#import '../node_modules/roboto-fontface/css/roboto/roboto-fontface.css';
* {
outline-style: none;
}
html,
body,
.tooltip-inner {
font-family: 'Roboto';
/*font-size: 0.87em;*/
font-size: 0.875rem;
font-weight: 400;
}
#menubar {
-ms-flex: 0 0 80px;
flex: 0 0 80px;
padding: 0;
z-index: 1000px;
}
#content {
background-color: #f5f5f5;
}
/* Icon links behavior */
.menu-icons {
width: 20px;
height: 20px;
vertical-align: middle;
}
.menu-active {
background-color: #f5f5f5;
}
.icon-link {
color: #aab0b7;
}
.icon-link:hover {
color: #2699fb;
}
.router-link-exact-active {
color: #0060a1;
}
.b-sidebar:not(.b-sidebar-right) {
left: 80px;
}
.bg-light {
background-color: #fcfcfc !important;
}
.b-sidebar-outer {
z-index: 5;
}
</style>
I code a simple react-native messaging application with kind of message baloons containing 2 text elements: a message text and message time. A message text can be multiline and the time text has fixed width.
However, i ran into the problem that I could not arrange the time text element in the same level as the last bottom line of message text.
My goal is to get a component with behavior similar to easy-to-do HTML example but I don't know how to implement such in flex-box model in RN.
.container {
width: 300px;
background-color: #ff0000;
border-radius: 10px;
padding: 10px;
}
.time {
width: 50px;
text-align: right;
background-color: #00ff00;
display: inline-block;
float: right;
}
.separator {
height: 10px;
}
.clear{
clear: both;
}
<p>when the bottom line of message is not long enough that time can be fit into the same line</p>
<div class="container">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida tristique arcu, malesuada dignissim dui porttitor id. Praesent id posuere tortor. </span>
<span class="time">12:37</span>
<div class="clear"></div>
</div>
<div class='separator'></div>
<p>when the bottom line of message takes more space, the time text takes additional line at bottom</p>
<div class="container">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida tristique arcu, malesuada dignissim dui porttitor id. </span>
<span class="time">12:37</span>
<div class="clear"></div>
</div>
Any help would be appreciated.
This might not be the answer you were looking for but I'd suggest using a UI component library such as Nativebase if you're getting started, it's good practice and you surely don't want to build everything from scratch. They have lots of components you can take advantage of and have lots of example on how to implement them. You should also check out material design - https://material.io/
I'm trying to use bootstrap.js in one of my components, but find that I need to wrap(document) for it to work (correct?).
So far I have:
// Script to work around bootstrap.js not working in Web Components. From https://github.com/Polymer/polymer/issues/625
(function(document){
jQuery.getScript('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js', function() {
console.log('getScript bootstrap.js run successfully!')
});
})(wrap(document));
But it does not seem to work - document is still the original page with my shadow-DOM in, which is inaccessible to bootstrap.js - how can I wrap document so it points to my components DOM for bootstrap.js?
My assumption, that I needed to wrap document, was wrong!
Working example: http://plnkr.co/edit/qRXoiG?p=preview
<link rel="import" href="https://polygit2.appspot.com/components/polymer/polymer.html">
<dom-module id="proto-element">
<link rel="import" type="css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<template>
<style>
</style>
<div class="container">
<h2>Simple Collapsible</h2>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
</div>
</div>
</template>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
// register a new element called proto-element
Polymer({
is: "proto-element",
// add a callback to the element's prototype
ready: function() {
console.log('bootstrap3_enabled:', (typeof $().emulateTransitionEnd == 'function'));
}
});
</script>
</dom-module>
Visit this URL using Safari or Chrome browser:
http://aspspider.net/sunlight1000/two_col_div_layout_w3valid.htm
Set the width of the browser’s window to make sure the height of the Green box is greater than the height of the Red box. Then grab the lower edge of the browser’s window and drag it to the lower edge of the Green box and play around it. You will notice the Red box disappears when the lower edge of the browser’s window goes higher than the lower edge of the Green box. Then continue to shrink up the height of the browser’s window and the Red box will appear again. You will notice the Red box appears again exactly at the moment the lower edge of the browser’s window reaches the low edge of Red box. The Red box never disappears in other browsers (IE, FF and Opera). Is this a bug in Safari or some kind of “feature”? In any case I will be highly appreciated if someone suggests me a workaround to avoid disappearing of the Red box in Safari.
Here is the code of above mentioned page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2 Column Fixed Liquid CSS Layout</title>
<style type='text/css'>
.wrapper
{
width: 100%;
min-width: 300px;
}
.wrapright
{
float: left;
width: 100%;
background-color: Blue;
}
.right
{
margin-left: 160px;
background-color: Lime;
}
.left
{
float: left;
width: 150px;
margin-left: -100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="wrapright">
<div class="right">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, SED DIAM NONUMMY NIBH
EUISMOD TINCIDUNT UT LAOREET DOLORE MAGNA ALIQUAM ERAT VOLUTPAT.
</div>
</div>
<div class="left">
<div style="background-color: red;">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, ...
</div>
</div>
</div>
</body>
</html>
I'm not sure if this would work for your final layout, but based on the demo layout: seems like the negative 100% margin could be causing the issue. The behavior appears to be the same if you take away the float and margin declarations and do a position: absolute on the .left div. As long as the container is relatively positioned, I think you'll get the same end result.