I am trying to get two divs to appear side by side when looping through props (which happen to be an array) in VueJS.
When I use a single element, it works fine. Immediately when I add the v-for tag it doesnt appear side by side anymore.
<div class="row">
<div v-for="(data,index) in data" :key="index" class="col-12">
<div v-if="data.image" class="col-xs-12 col-md-3 image-div">
<img class="image" :src="data.image" alt="image">
</div>
<div class="col-xs-12 col-md-9">
<p class="title">{{data.title}}</p>
<p class="description">{{data.description}}</p>
<p class="bottom">
<span class="left"><span class="tag">{{data.tag}}</span><span class="time"> | {{data.time}}</span></span>
<span class="right"><v-icon>bookmark</v-icon><v-icon>share</v-icon></span>
</p>
</div>
</div>
</div>
Above is the code i am using
Seems you're just missing the required .row for grid nesting
<div v-for="(data,index) in data" :key="index" class="col-12">
<div class="row"> <!-- 👈 this one -->
<div v-if="data.image" class="col-xs-12 col-md-3 image-div">
<img class="image" :src="data.image" alt="image">
</div>
<div class="col-xs-12 col-md-9">
<!-- etc -->
</div>
</div>
</div>
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 1 year ago.
The code:
$('.del').click(function(e){
$(this).parents('.order-item').remove();
if($('.order-item').length == 0){
$('#order-items').append(Data.order_item_clone)
}
})
What am I doing wrong? As you can see, I am trying to remove the parent element '.order-item' based on the '.del' element clicked. Nothing is happening. This is what the html looks like:
<div class="col-md-3" id="order-items">
<div class="order-item">
<div class="col-md-1 nhp" id="side">
</div>
<div class="col-md-7 nhp">
<div class="col-md-3 obox-num obox">
</div>
<div class="col-md-9 obox-purity obox">
</div>
<div class="col-md-4 obox-info obox-price obox">
</div>
<div class="col-md-4 obox-info obox-weight obox">
</div>
<div class="col-md-4 obox-info obox-total-price obox">
</div>
</div>
<div class="col-md-2 nhp">
<button class="del" style="width:100%; height:77px"> Del </button>
</div>
<div class="col-md-2 nhp">
<button class="print" style="width:100%; height:77px"> Print </button>
</div>
</div>
</div>
For the most part, this html is generated dynamically with javascript/jquery. Can anyone help? Thanks in advance
Edit: When I do $('.del').eq(0).parents('.order-item').remove() things work find, so there is something wrong with $(this)
$(document).on('click','.del', function(e){
$(this).parents('.order-item').remove();
if($('.order-item').length == 0){
alert("append now");
// $('#order-items').append(Data.order_item_clone)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3" id="order-items">
<div class="order-item">
<div class="col-md-1 nhp" id="side">
</div>
<div class="col-md-7 nhp">
<div class="col-md-3 obox-num obox">
alpha
</div>
<div class="col-md-9 obox-purity obox">
beta
</div>
<div class="col-md-4 obox-info obox-price obox">
gamma
</div>
<div class="col-md-4 obox-info obox-weight obox">
yellow
</div>
<div class="col-md-4 obox-info obox-total-price obox">
blue
</div>
</div>
<div class="col-md-2 nhp">
<button class="del" style="width:100%; height:77px"> Del </button>
</div>
<div class="col-md-2 nhp">
<button class="print" style="width:100%; height:77px"> Print </button>
</div>
</div>
</div>
Since you mentioned, the html are loaded dynamically, you need to bind the click to document and capture the element.
$(document).on('click','.del', function(e){
thumbnail screenshot also attachedi have created thumbnail in my dashboard.but these thumbnails are collapsing each others and the last thumbnail in a row showing up full screen.kindly help me
<div class="container">
<h1>Trending Groups</h1>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
</div>
</div>
Try giving height and width to your image also dearch in google little bit and then post your questions on this that will help you.
I've got a html/php website and I want to load multiple images in a slideshow when I click on one. How can I do this? This is my code now:
<div class="row">
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w1.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>Herent</h2>
<h4>Renovatie badkamer</h4>
</div>
</div>
</div>
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w2.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>Mechelen</h2>
<h4>Plaatsen van keuken</h4>
</div>
</div>
</div>
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w3.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>Antwerpen</h2>
<h4>Verbouwingen</h4>
</div>
</div>
</div>
</div>
I searched for some templates and answers but I can't start with it.. It looks not that difficult...
Hi Apparently my toggle function does not work. I need to Hide a div "photography" when clicking the word "photography" that is located in another div. Please see my code below
HTML:
<div class="bar">
<div="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
Photography
Graphics
</div>
</div>
</div>
</div>
<section id="photograhpy" class="photograhpy">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-6">
<div class="photograhpy-item">
<a href="#">
<img class="img-photograhpy img-responsive" src="imgs/pics/car1.jpg">
</a>
</div>
</div>
JS:
$(document).ready(function(){
$("#hideshow").click(function(){
$("#photography").toggle(1000);
});
});
Looks like a spelling error:
<section id="photograhpy" class="photograhpy">
Should be:
<section id="photography" class="photography">
There is nothing else outstandingly wrong with your code.
Also, you may not reference elements with the same id exclusively via JavaScript. It is poor practice to give multiple elements the same id.
I'm trying to display the details of an email side by side (this is only a section of the full page) but the details from the row containing the from/to and date/cc/bcc information overlap a lot before stacking when the page resizes and I'd like them to stack before this problem arises. The following is the simplified version of what I have:
<div>
<div class="row">
<div class="col-xs-10">
<span style="font-weight:bold;" data-bind="text:Subject"></span>
</div>
<div class="col-xs-2">
<button class="btn btn-default" style="float:right; height:30px;">
<img src="..." style="max-height:20px; border:none;" />
</button>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">FromName</div>
<div class="col-xs-12">email</div>
<div class="col-xs-12">ToName</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">Date: </div>
<div class="col-xs-12">Cc: </div>
<div class="col-xs-12">Bcc: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">date</div>
<div class="col-xs-12">Cc address</div>
<div class="col-xs-12">Bcc address</div>
</div>
</div>
</div>
</div>
</div>
<div>
Bootply Example
Columns overlap because the col-xs-2 is too small for the content in it:
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
Inspect with Dev tools the <div class="col-xs-2"> which contains From: to see that when the text overlaps the content area is smaller than the text length.
To solve it you can change the col-xs-NUMBER for a bigger NUMBER (try with 4) also changing the detailed column (to 8, if you replace the previous with 4).