I am trying to add an Image from my src folder, however it just displays a broken image on my website.
<b-col class="details" md="8">
<b-img src="../assets/southBank.png"></b-img>
</b-col>
I have been able to load the image via a card using this code
<b-card :img-src="require('../assets/southBank.png')"
style="max-height: 120px; width:550px; background-color: white; border:none; margin-top:-50px;">
</b-card>
However, I do not want to store it in a card.
Related
My card hights is not displaying consistently as I intended. I was thinking to set the max-height to my v-card-text
<v-col cols="3" v-for="note in notes">
<v-card :loading="loading" max-width="374">
<template slot="progress">
<v-progress-linear color="deep-purple" height="10" indeterminate></v-progress-linear>
</template>
<v-img height="250" :src="note.img"></v-img>
<v-card-title>{{ note.name }}</v-card-title>
<v-card-text height="200px">
<div>{{ note.description }}</div>
</v-card-text>
<v-card-text>
<v-chip-group v-model="selection" active-class="deep-purple accent-4 white--text" column>
<v-chip v-for="tag in note.tag">
{{ tag }}
</v-chip>
</v-chip-group>
</v-card-text>
</v-card>
</v-col>
I see no effect
Any suggestions for me ?
You can achieve it with:
.v-card-text {
height: 200px;
overflow-y: auto;
}
If you don't want a scrollbar and you're fine with the text being cropped:
overflow-y: hidden;
Shortcomings:
.v-card-text will always have this height, even if all items on a row end up not using all of it
you might want to customise the scrollbar appearance on browsers which display a wide scrollbar (17px) on desktop (e.g: Chrome).
Alternatively, if you want the tallest card in each row to set the height (resulting in rows with cards of different heights) and not have any overflow, but have some white space on some cards instead, I can help you achieve it if you create a runnable snippet, so I can test. In principle, you need to give the card container display: flex; flex-direction: column; and give .v-card-text { flex-grow: 1 }.
In practice, the card might have more than one wrapper, which is why I need to see a live snippet, if you're interested in this solution.
<style src="./LoginButton.scss" lang="scss"></style>
<i18n src="./LoginButton.txt"></i18n>
<script src="./LoginButton.js"></script>
<template>
<div class="header-login component-same ml-10">
<span v-if="showLoggedIn">
<router-link :to="{ name: 'user' }" data-test="login-info-name">
<i class="dl-icon-user12"></i>
<span class="target-text hidden-xs hidden-sm">{{
$t('myAccount')
}}</span>
</router-link>
</span>
<!-- <span v-if="showLoggedIn" class="hidden-xs">
<a #click="logout" data-test="logout-button">
<span>{{ $t("signOut") }}</span>
</a>
</span>-->
<span v-else data-test="login-button">
<router-link :to="{ name: 'login' }">
<i class="dl-icon-user12"></i>
<span class="target-text hidden-xs hidden-sm">{{ $t('Register') }}</span>
</router-link>
</span>
</div>
</template>
I have written the above code for login, Where in this particular line
User has a register button, As soon as the user clicks on the register button, the User will be redirected to another page where he can fill up the basic details, So Instead of redirecting into another page, I want the Register button as a Popup, wherein the popup user can enter details.
also, I tried bootstarp-vue but I wasn't able to find the solution.
It's easier than what you think and mostly you won't need a special CSS lib for that, so the thing to do is just to make another component and call it whatever you want(but modal.vue makes sense here):
//inside modal.vue:
<template>
<div className="modal__wrapper">
<div className="modal">
<slot/>
</div>
</div>
</template>
<style lang="scss" scoped>
.modal{
width: 300px;
height: 100px;
border-radius: 10px;
background-color: white;
padding: 20px 20px;
z-index: 1200;
&__wrapper{
background-color: rgba(0,0,0,0.4);
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
position: absolute;
top: o;
}
}
</style>
in its simplest form, it's just a component with some styling to make it look like a modal (a transparent background(to make it look it's over the previous page) and an absolute position for its wrapper(the transparent one) and some centering techniques for its actual content),I didn't put any script in it(because it's just a simple modal I'm showing you to give the idea how to make yours) and then there is this slot part meaning you can pass your registration form to this modal component, from your parent component and use a boolean flag to just show it on register click
(sure you might need to add some more CSS to the .modal class):
<i18n src="./LoginButton.txt"></i18n>
<script src="./LoginButton.js"></script> <!-- the cleaner thing would
be to import them in your script section somehow -->
<template>
<div class="header-login component-same ml-10">
<span v-if="showLoggedIn">
<router-link :to="{ name: 'user' }" data-test="login-info-name">
<i class="dl-icon-user12"></i>
<span class="target-text hidden-xs hidden-sm">{{
$t('myAccount')
}}</span>
</router-link>
</span>
<span v-else data-test="login-button">
<!-- no need to rerouting to another path -->
<Modal>
<!--your template for registration will go here-->
<i class="dl-icon-user12"></i>
<span class="target-text hidden-xs hidden-sm">{{ $t('Register') }}</span>
</Modal>
</span>
</div>
</template>
//you gotta import the modal component so in your script section you have sth like this(BTW what type of structure are you using for your project? are you using vue-cli's scaffold or what? Are you using babel? cuz I'm gonna assume you are!)
<script>
import Modal from 'The_Relative_Path_to_the_Modal_you_just_created';
export default {
components:{
Modal
},
data(){
return{
showLoggedIn: false
}
}
}
</script>
<style src="./LoginButton.scss" lang="scss"></style>
I would like to have a floating at the bottom right side of the image inside a card.
here's my sample https://codepen.io/chunallen/pen/bPGJOP?editors=1000
The problem here is the button is behind of the v-card-title
Expected Result
If you add style="height: 100px; position: relative" to v-card-title, move the btn beneath the h3, and change bottom to top then it'll work.
<v-card-title primary-title style="height: 100px; position: relative">
<div>
<h3 class="headline mb-0">Kangaroo Valley Safari</h3>
<v-btn color="pink" dark small absolute top right fab>
<v-icon>add</v-icon>
</v-btn>
</div>
</v-card-title>
Sample
A bit late to the party, but for people with the same issue:
a button placed inside v-img will cut the button of.
a seperate card around the image and the button in the card (after the image) does the trick
I'd like to have text below the icon in a v-btn and can't seem to find how to do this. How is this possible?
To achieve this look with Vuetify, you just need to overwrite the flex direction in the v-btn__content class. Don't forget to give a unique class (for me flexcol) to your button so the style change won't affect other Vuetify buttons.
<template>
<v-btn class="flexcol" icon height="100" width="100">
<v-icon> mdi-tools </v-icon>
<span> Tools </span>
</v-btn>
</template>
<style>
.flexcol .v-btn__content {
flex-direction: column;
}
</style>
You don't really need vuetify to do that.
You can just use css and flexbox.
Say you have:
<div class="wrapper">
<div>Text Above</div>
<div>Text Below</div>
</div>
You want the "Text Below" to stand below the "Text Above".You can do it like this:
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
However click here to see your solution
Try this
<div class="d-flex flex-column align-center">
<v-btn icon height="30">
<v-icon>mdi-history</v-icon>
</v-btn>
<p class="mb-0">abc</p>
</div>
We are using Bootstrap 2 on a Joomla 3.2.2 site. See: http://test.stuntlist.com/west
The first slide works perfectly, but when the second slide comes in, it disappears. You can see it start to transition between the slides, but then the area where the slide should be just disappears and the content is moved up into the slide area.
I don't see any JS errors on the site. We have used the same carousel code on other sites without this issue.
Here is the carousel code:
<div class="slideshow">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<a href="/component/joomgallery/action-photos?Itemid=88"><span data-picture data-alt="">
<span data-src="/images/hero/slide01.jpg"></span>
<span data-src="/images/hero/portrait/slide01mobile.jpg" data-media="(max-width: 768px) and (orientation:portrait)"></span>
<noscript><img src="/images/hero/slide01.jpg" alt=""></noscript>
</span></a>
<div class="carousel-caption">
<div class="container">
<h4>Slide Caption Goes Here.</h4>
</div>
</div>
</div>
<div class="item">
<span data-picture data-alt="">
<span data-src="/images/hero/slide02.jpg"></span>
<span data-src="/images/hero/portrait/slide02mobile.jpg" data-media="(max-width: 768px) and (orientation:portrait)"></span>
<noscript><img src="/images/hero/slide02.jpg" alt=""></noscript>
</span>
<div class="carousel-caption">
<div class="container">
<h4>Second Caption.</h4>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
Any idea what could be causing the problem?
Thank you.
This is caused due to a conflict with Mootools, download the following plugin and apply your preferences and it'll resolve this problem:
https://extensions.joomla.org/extension/mootools-enabler-disabler
The problem is Joomla adds another DIV (We will call it JDIV) outside the Carousel container, when second/EVEN Numbered Slides are viewed some script sets the height of the JDIV equal to "0px", see my code below
<div class="col-sm-12 pharma">
<!-- this is the div which joomla is adding (JDIV) -->
<div style="margin: 0px; position: relative; overflow: hidden; height: 0px;">
<!-- this is the div which joomla is adding (JDIV) -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin: -203px 0px 0px; overflow: hidden;">
<div class="carousel-inner">
....
</div>
<div class="ind-div">
<ol class="carousel-indicators">
....
</ol>
</div>
</div>
</div>
</div>
The Solution
This solution worked for me and should also work for you too.
Add a CSS class named "#myCarousel" ( ID of the carousel) and sets its margin to 0px with important,
#myCarousel{ margin:0px !important; }
Secondly add another CSS class like
.pharma>div{ height:204px !important; }
where .pharma is the class which I have used on the DIV which is outside the JDIV. The height will be different from what I have used and might have to use media queries if using responsive.
To find the height simply inspect the element and note the height of the first slide and use that height in CSS class.
I do not have a fix for you but I was able to find a few issues. The first and biggest issue being that you have inline styling that is causing the image to "disappear". The image is really just moved 572px upwards and is off the screen. Notice the two images below. The first link is the image that does work. The second link is the image that does not display.
http://tinypic.com/r/hthi4y/8
http://tinypic.com/r/2hoix35/8
Using chrome, I opened the developer console and manually changed the margin to 0px instead of -572px and it fixed the issue. I would take a look at your JS again and see what values are being applied to each image because the entire display is being rendered dynamically, I assume for mobile devices.