I have the following simple component:
<template>
<div class='d-flex justify-content-center'>
<g-image src='~/assets/bitcoin.svg' width='36' height='36' />
<h2 class='mx-2'>{{ block_count }}</h2>
<g-image src='~/assets/bitcoin.svg' width='36' height='36' />
</div>
</template>
(the .svg is around 64 in width and height)
Which in small widths gives nice square images:
but as soon as I start increasing the window size in width it streches out the .svg
I've tried to use a couple of g-image's fit parameters but with no luck.
What am I not getting here?
EDIT Live URL to showcase bitcoin-blocks-info-site.s3-website-eu-west-1.amazonaws.com
EDIT
It seems that when I apply b-container scaffolding then the problem goes away:
<template>
<b-container>
<b-row>
<b-col class='d-flex justify-content-center align-items-center'>
<g-image src='~/assets/bitcoin.svg' width='36' />
<h2 class='mx-3 d-inline'>{{ block_count }}</h2>
<g-image src='~/assets/bitcoin.svg' width='36' />
</b-col>
</b-row>
</b-container>
</template>
Related
I'm learning Tailwind CSS and Svelte, and to practice my skills I decided to make a widget layout with different components. I'm trying to make the grid's item's height flexible - like on the DaisyUI homepage under the components preview - so that other components can fit immediately beneath it. I've tried using flexbox but that lead to the same outcome. My code so far:
App.svelte:
<script>
import './app.css'
import Temp from './components/Temp.svelte'
import Login from './components/Login.svelte'
import Quiz from './components/Quiz.svelte'
import ShoppingList from './components/ShoppingList.svelte'
import Quote from './components/Quote.svelte'
import Date from './components/Date.svelte'
</script>
<main class="w-[calc(100vw - 120px)] max-w-[calc(100vw - 120px)] h-screen grid grid-flow-row grid-cols-5 gap-5 m-5">
<Temp />
<Login />
<Quiz />
<ShoppingList />
<Quote />
<Date />
</main>
All of the other components follow the same simple layout:
<script>
import '../app.css'
</script>
<section class="max-w-xs min-w-xs bg-slate-50 rounded-xl p-5 h-fit">
<!-- other HTML here -->
</section>
Any help or tips would be appreciated!
I am using SwiperJS for some galleries in my custom build Wordpress website. I am also using a plugin for lazy loading all my images, so the SwiperJS' own lazy load is disabled. However, now when the images are swiped and loading, there isn't any spinner to indicate that something is happening. Question is, how can I add this spinner with javascript myself.
Lets say now there is this rendered in the DOM:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="1" role="group" aria-label="3 / 7" style="width: 624px;">
<img src="path/to/src.jog" alt="" class="lazyloaded" data-ll-status="loaded">
</div>
<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="2" role="group" aria-label="4 / 7" style="width: 624px;">
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" data-lazy-src="//localhost:3000/wp-content/uploads/2021/04/K0924-900x1200.jpg">
</div>
</div>
</div>
Slide, that is currently showing has the class class="swiper-slide-active" and the next one has class="swiper-slide-next"
When I swipe (or press the next arrow), the class class="swiper-slide-next" changes to class="swiper-slide-active" and its child, img tag receives the class class="lazyloading" and data-ll-status="loading"
After the image is loaded it changes to class="lazyloaded" data-ll-status="loaded"
Now, how can I track with javascript the moment, when the img tag inside the div with the class class="swiper-slide-active" receives the class class="lazyloading" or data-ll-status="loading", when that happens render inside <div class="swiper-wrapper"> </div> a spinner and when the class="lazyloading" changes to class="lazyloaded" remove the spinner?
I would greatly appreciate any help! Thank you!
I'm not sure that i understood your problem right :
You need to get a spinner when the image is loading ?
Check on https://swiperjs.com/swiper-api#lazy-loading for the "swiper-lazy-preloader".
It should look like this :
<div class="swiper">
<div class="swiper-wrapper">
<!-- Lazy image -->
<div class="swiper-slide">
<img data-src="path/to/picture-1.jpg" class="swiper-lazy" />
<div class="swiper-lazy-preloader"></div>
</div>
</div>
</div>
There is a question just like this, but the answer wasn't very clear and I don't have enough "points" to comment on it.
I read https://react-bootstrap.github.io/components/buttons/ and some other documents but am unable to find my answer.
I used this article as my guide: https://www.pluralsight.com/guides/how-to-position-react-bootstrap-popover
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
.
.
.
render() {
const popover = (
<Popover id="popover-basic">
<Popover.Title as="h3">Popover title</Popover.Title>
<Popover.Content>
Popover content <strong>some strong content</strong> Normal content again
</Popover.Content>
</Popover>
);
return (
<div className='toggle container '>
<div className='form-row justify-content-center'>
<div className='col-6'>
<section class='inline-block'>
<span class="badge badge-pill badge-primary ml-2">1</span>
<h3>
Choose System Type:
</h3>
<div id="element1">
<OverlayTrigger trigger="hover" placement="right" overlay={popover}>
<Button variant="outline-primary" circle><i class="fas fa-question"></i></Button>
</OverlayTrigger>
</div>
</section>
</div>
</div>
</div>
I'd like my popover button to be a circle, but I can't find documentation on how to do that.
Can someone explicitly help me using the ? Perhaps something else? Examples help immensely. Here is a screenshot of what it looks like now...
You can set className="rounded-circle" to your button component and it will be circle.
More about similar border classes:
Bootstrap documentation
Using Vue 2 on Laravel 5.3
I would like to add a loading icon which covers the whole page for 3 seconds allowing all rendering happened, then showing the content after 3 seconds. However, without or with adding the div v-show="!loading" as shown below, the content actually flashed for around half second before it gone disappeared, then after 3 seconds it appears again. So I think there is an unexpected flash at the start when the page is loaded. I read a bit about v-cloak online but it seems only solve short flash of {{}} ?
<template>
<div>
<transition name="fade">
<div v-if="loading" class="loading">Loading…</div>
</transition>
<div v-show="!loading">
<slot>
<!-- Main Content -->
</slot>
</div>
</div>
</template>
<script>
export default {
data(){
return{
loading:true
}
},
props:[
],
mounted(){
var vm = this
vm.loaded()
LoadingEvent.$on('loading', function(loading){
vm.loading = loading
})
},
updated(){
},
methods:{
loaded(){
setTimeout(function(){
LoadingEvent.$emit('loading',false);
}, 1000);
},
}
}
</script>
Try putting both v-if and v-else inside transition like following:
<template>
<div>
<transition name="fade">
<div v-if="loading" class="loading">Loading…</div>
<div v-else>
<slot>
<!-- Main Content -->
</slot>
</div>
</transition>
</div>
</template>
I am looking for a hint on how to handle a strange effect on rerendering a datagrid. I have the following grid structure:
<rich:dataGrid id="allProductsGrid" value="#{allProducts}" var="_product">
<s:div styleClass="grid-element">
<s:link view="/product.xhtml">
<s:div styleClass="product-element">
<h:graphicImage value="/content/images?id=#{_product.image.id}&width=170"/>
</s:div>
<div id="title">
<h:outputText value="#{_product.name}" />
</div>
<f:param name="productId" value="#{_product.id}" />
</s:link>
</s:div>
</rich:dataGrid>
The grid gets reRendered on a onkeyup-event fired by an search input field. No magic so far. Now the problem is that the reRendering changes the structure of the html produced (DOM). As a result the links are not working anymore.
The firebug-html-inspect on the first rendering of the page is as follows:
<div id="j_id86:allProductsGrid:0:j_id124" class="grid-element">
<a id=".. " onclick=".." href="/portal/product.vc?productId=22&cid=69">
<div id="j_id86:allProductsGrid:0:j_id126" class="product-element">
<img src="/portal/content/images?id=&width=170">
</div>
<div id="title">Sample Product</div>
</a>
</div>
After reRendering the grid the html output is that:
<div id="j_id86:allProductsGrid:0:j_id124" class="grid-element">
<a id=".." onclick=".." href="/portal/product.vc?productId=22&cid=76"></a>
<div id="j_id86:allProductsGrid:0:j_id126" class="product-element">
<img src="/portal/content/images?id=&width=170">
</div>
<div id="title">Sample Product</div>
</div>
The result is that the a-tag is not wrapping the product-element anymore. Can anybody give me a hint on what might be wrong here??
Any help appreciated.
Thanks in advance.
josh
ps: using Seam 2.2.2 / JSF Mojarra 2.0.3 / RichFaces 3.3.3
Make sure your allProducts bean has ViewScope instead of RequestScope. So in rerender the data will persist in the call.