I have this problem in which i generate images by classical foreach method.
<div v-for="messageGroup in conversation" class="messagegroup" :class="{ recieved: messageGroup.recieved }">
<div v-if="messageGroup.recieved" class="iconcontainer">
<div class="iconcontainerinner">
<img class='usericoncontacts' :src="selectedContact.userPhotoURL" alt="">
</div>
</div>
<div class="textmessages" :class="{ recieved: messageGroup.recieved }">
<div class="message" v-for="message in messageGroup.messages">
<span>{{ message }}</span>
</div>
</div>
</div>
The images then have it's source at Google repo which looks for an example like this
The images then either or sometimes don't like
My guess is that it has something to do with vue rendering.
Thanks in advance
Related
I am using Bootstrap to design my React project and all of a sudden the grid system doesn't work properly.Basically I need to have the first div with the className of row above the Card components, and centered.I have added more code but nothing that had to do with that particular main page or styling.I have pasted below my code.Does anyone know why this could've happened and how to fix it?
return (
<div>
<section id="service">
<div className='container'>
<div className='row'>
<div className='col-12'>
<h3 className='fs-5 text-center mb-0'>Our Services</h3>
<h1 className='display-6 text-center mb-4'>Our <b>Awesome</b> Services</h1>
<hr className='w-25 mx-auto'/>
</div>
</div>
<div className='row'>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Easy Usage' content='Access your assigned task with only one click and start testing your code right now.'/>
</div>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Instant Feedback' content='Run your solution using only one submit button with the help of our online compiler.'/>
</div>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Optimize your time' content='Reduce your time spending on uploading assignments with our easy dashboard method.'/>
</div>
</div>
</div>
</section>
</div>
)
I'm using vue-slick-carousel in my app. I have the following code:
<template>
<div id="app">
<div class="banner-container">
<div>
<VueSlickCarousel v-bind="settings">
<div v-for="item in items" :key="item.id">
<!-- ALTERNATIVE 1 (WORKS) -->
<div>
<a href="abc" target="_blank">
<img id="picture1" src="./assets/carouse-item.png" />
<div class="position-relative">
<div class="banner-description">
<span class="banner-title">
<a v-bind:href="'#'" class="header-anchor">#</a>
TITLE<br />
</span>
<span class="banner-alternative-text">
<a v-bind:href="'#'" class="header-anchor">#</a>
DESCRIPTION<br />
</span>
</div>
</div>
</a>
</div>
<!-- ALTERNATIVE 2 (DOESN'T WORK) -->
<!-- <Child :item="item"/> -->
</div>
</VueSlickCarousel>
</div>
</div>
</div>
</template>
There are 2 alternatives. Alternative 1 works fine:
Alternative 2 is basically the code under Alternative 2 extracted into a new component - Child. It produces this output:
I can't understand why just extracting the part of code into a new component changes the layout like that.
The source code of the app is available at https://github.com/marcinjahn/vue-carousel-issue.
I am using swiper slider in meteor but it's taking too much time to load images and videos in slider on the home page. On my home page posts are coming and each posts videos and images are coming in the slider. But after taking too much time to load it crash the page. This is code to show posts videos and images in swiper slider.
{{#if imagesArguments}}
<div class="argu-scroller" id="argumentImages" style="border:1px solid #d4d6d8; margin-top:10px;" data-userProfile="{{getImage plaintiff._id}}">
<div class="swiper-wrapper">
{{#if meta.thumbnail_url}}
<div class="swiper-slide swiper-card">
<div class="evidencecard">
<div class="evidencecard-inside">
<header>
<a href="{{plaintiff_bitlyurl.url}}" target="_blank">
<img src="{{meta.thumbnail_url}}" />
<div class="text-wrap">
<h2>{{meta.title}}</h2>
</div>
</a>
</header>
<main>
<div class="info-wrap">
<h5>{{plaintiff_bitlyurl.url}}</h5>
<!--<p>{{evidenceFull plaintiff_evidence}}</p>-->
<p>{{meta.description}}</p>
</div>
</main>
</div>
</div>
</div>
{{/if}}
{{#each imagesArguments}}
<div class="swiper-slide swiper-image">
<div class="argumentimageshome argument2 tem-miniargument">
<a data-toggle="modal" data-target="#imageZoomview" class="imgZoom" data-id="{{this}}" >
<img class="img-thumbnail" src="{{this}}" />
</a>
</div>
</div>
{{/each}}
{{#each videoArguments}}
<div class="swiper-slide swiper-video">
<div class="argumentvideoshome">
<div class="video">
<video height="150" controls>
<source src="{{this}}" type="video/mp4">
</video>
</div>
</div>
</div>
{{/each}}
</div>
</div>
{{/if}}
code to call slider in js file
Template.miniArgument.onRendered(function(){
var swiper = new Swiper('.argu-scroller', {
slidesPerView: 3,
spaceBetween: 30,
slidesPerGroup: 3,
loop: true,
loopFillGroupWithBlank: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
});
I think this is not related to Meteor. Did you try to use the virtualization component in the Swiper? You would need to lazy-load extra slides. If not too many, you can preload all of them with the ones in view being prioritized. If you have many, you need to make use of the lazy load. Check this discussion: https://github.com/nolimits4web/swiper/issues/1279 . In your Network tab in Chrome developer tools, do you see a lot of MBs being downloaded? If you have huge assets ... it will indeed take time.
I'm implementing a Jumbotron element like this:
<div className="jumbotron">
<div>
<h6 className="display-6">Reset Password</h6>
<p className="lead">We've just emailed you password reset instructions at <u>{this.email && this.email}</u></p>
<hr className="my-4" />
</div>
</div>
Unfortunately, the content overflows the jumbotron, like this:
How do I fix this?
EDIT: Here's another one. The compiled HTML appears like this in my browser:
<div class="container">
<div class="jumbotron">
<h6 class="display-6">Activate account</h6>
<p class="lead"><!-- react-text: 215 -->Please confirm the verification code we've just emailed you at <!-- /react-text --><u>b_kogan#hotmail.com</u></p>
<button class="btn btn-primary">Resend email verification code</button>
</div>
</div>
And, again, it's overflowing:
Here is a quick example of what you have in your HTML and with using bootstrap 4 and everything looks as expected,I think you have different style applied or this is not the rendered html on the browser.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div>
<h6 class="display-6">Reset Password</h6>
<p class="lead">We've just emailed you password reset instructions at <u>{this.email && this.email}</u></p>
<hr class="my-4" />
</div>
</div>
I have this:
{{#config.buildings:building}}
<div class="building" id="building-item-{{building}}">
<div class="image-container">
<div class="thumbnail" style="background: transparent url({{staticUrl}}/game_images/town/buildings/{{building}}/{{building}}-1-thumbnail.png) no-repeat center center;"></div>
<div class="cover"></div>
<div class="undercover"></div>
<div class="level">{{village.buildings[building].level + alreadyInQueue(building)}}</div>
</div>
<div class="big_title">{{lang('buildings',building)}}</div>
<p class="{{buildingMaxed(building) ? 'maxed' : ''}}">{{lang('buildings',building+'_description')}}</p>
<div on-tap="upgradeBuilding:{{building}}" class="upgrade-button" tooltip="{{lang('general','upgrade_building')}}"></div>
<div on-tap="downgradeBuilding:{{building}}" class="downgrade-button disabled" tooltip="{{lang('general','downgrade_building')}}"></div>
<div class="resources">
<div class="resource">
<img class="thumbnail" src="{{staticUrl}}/game_images/resources/woodB.png">
<label class="res-count-wood">{{config.buildings[building][village.buildings[building].level].wood}}</label>
</div>
<div class="resource">
<img class="thumbnail" src="{{staticUrl}}/game_images/resources/ironB.png">
<label class="res-count-iron">{{config.buildings[building][village.buildings[building].level].clay}}</label>
</div>
<div class="resource">
<img class="thumbnail" src="{{staticUrl}}/game_images/resources/clayB.png">
<label class="res-count-stone">{{config.buildings[building][village.buildings[building].level].iron}}</label>
</div>
<div class="resource">
<img class="thumbnail" src="{{staticUrl}}/game_images/resources/workersB.png">
<label class="res-count-builders">{{config.buildings[building][village.buildings[building].level].people}}</label>
</div>
<div class="resource">
<img class="thumbnail" src="{{staticUrl}}/game_images/resources/timeB.png">
<label class="res-count-time">{{secsToString(config.buildings[building][village.buildings[building].level].time)}}</label>
</div>
</div>
<div class="hr"></div>
</div>
{{/config.buildings:building}}
When I'm using
contentTPL.set('village.buildings[1].level',4)
The only things that update are
<div class="level">{{village.buildings[building].level + alreadyInQueue(building)}}</div>
// and
<label class="res-count-time">{{secsToString(config.buildings[building][village.buildings[building].level].time)}}</label>
I don't seem to understand why the other values don't update on update() as they should. There's no error in the code and I'm using the edge version (same result with the lastest version from 8th of April, 0.4.0).
UPDATE
I have stripped all the unnecessary data, and added a console.log in the alreadyQueued function. It gets called on init, but, when i call contentTPL.update() it doesn't get called anymore. Nothing updates in the file, when pressing the startQueue button. There's another contentTPL.update() when the queue expires, which updates only the level and the time needed as stated above. I'm asking Rich or Marty to advise on this problem as I'm stuck here for about 4 hours and can't seem to understand wether it is my misuse of the library or it's a bug.
It turns out this was a bug, which is now fixed in dev.