Why bootstrap collapse is automatically collapsing(shrinking) the element? - javascript

Hi I am using the AngularJs with HTML to have dynamic content.
I am also making use of bootstrap for collapse feature.
I have created question answer page which is similar to Stackoverflow.
When page loads, it shows up the all questions and when I click on any particular question then it expands that question and with answers but answers are again collpased and there is one anchor tag to expand all answers.
My problem is that when I am clicking on answer's anchor tag the answers are showing up for few seconds and again it is collapsing automatically.
Below is my code:
<div style="" class="row ans-txt left-margin-img">
{{ answer.a_list.as.length }} ANSWERS
<a data-target=".demo" data-parent="" data-toggle="collapse">
<img src="assets/svg/downarrow_active.svg" class="img-responsive" style="height: 24px; width: 24px; display: inline; float: right; right: 18px; position: absolute;"></img>
</a>
</div>
<div class="row " style="padding-top:14px;height:auto;" ng-repeat-start="(key, value) in answer.a_list.as">
<div class="col-xs-2 col-sm-1 col-md-1 content-padding2 collapse demo">
<div>
<button type="submit" class="searchStyle bgStyle btn-Style vote-btn-border" ng-click="vote(value.raw, 1)">
<i class="glyphicon glyphicon-chevron-up"></i>
<img src="assets/svg/uparrow.svg" class="img-responsive" style="height:24px;width:24px;"></img>
</button>
</div>
<div><button type="text" class="searchStyle bgStyle btn-txt" disabled>{{ value.raw.netvotes }}</button></div>
<div>
<button type="submit" class="searchStyle bgStyle btn-Style vote-btn-border" ng-click="vote(value.raw, 0)">
<i class="glyphicon glyphicon-chevron-down"></i>
<img src="assets/svg/downarrow_active.svg" class="img-responsive" style="height:24px;width:24px;"></img>
</button>
</div>
</div>
<div class="col-xs-11 col-sm-10 col-md-11 padding-rightPane collapse demo">
<p class="ex2">{{ value.raw.content }}</p>
<p class="bottom-margin14">
<div class="askedBy-txt">
Answered by {{ value.raw.handle ? value.raw.handle : value.raw.email }} on {{ value.raw.created * 1000 | date:'MMMM dd, yyyy'}}
</div>
<img src="assets/svg/tick_icon.svg" style="height:20px;width:20px;" class="img-responsive pull-right" title="Best answer"
ng-if="value.select_text === 'Best answer'"></img>
</p>
</div>
</div>

Try to toogle the class .collapse.in. It toogles the css state of collapse element.
<div class="...collapse..." ng-class="{'in': !isCollapsed}">
</div>

Related

Vue js edit content according to its ID

I’m starting with vue js and I’m listing some data from database. More specifically posts with title, description and images.
I have Edit and Delete buttons. All posts are loaded using v-for. So when I click to edit one post, all the posts are “openning” to be edited.
I need to open the editing only in one post at a time. I mean, the specific post I really want to edit.
I made some progress with title input and with image delete badge but still need to work on Save and Cancel buttons (they open in all posts) and input files (when I choose files in second post for example, they load into first post).
<div id="app" class="row mb-50">
<div v-for="(item, index) in tours" v-bind:key="item.id" id="tours" class="col-md-12 mb-30">
<div class="tour-list">
<div class="tour-list-title">
<p>
<!-- here I can block input title to be disabled on other posts not than the specific one and I intend to do the same with textarea -->
<input class="inputEdit" type="text" ref="item.id" v-model="item.title"
:disabled="editingTour !== item.id" :class="{inputEditOpen: !editingTour}" />
</p>
</div>
<div class="tour-list-description">
<p>
<textarea class="inputEdit" :disabled="!editingTour" v-model="item.description"
:class="{inputEditOpen: !editingTour}">
{{ item.description }}
</textarea>
</p>
</div>
<div class="tour-list-pics">
<div class="row mb-20">
<div class="col-md-12">
<ul class="pics-list">
<li v-for="(image, index) in item.images">
<!-- here I could hide badge -->
<span :hidden="editingTour !== item.id" class="badge"
#click="$delete(item.images, index), deleteImage(image.imageID)">
<i class="fa fa-fw fa-times-circle"></i>
</span>
<div class="pics-list-image-container img-fluid cursor-pointer"
v-bind:style="{'background-image': 'url(http://localhost/tours/'+image.image + ')' }"
#click="openModal = true, showModal(image.image)">
</div>
</li>
<li v-if="urls" v-for="(url, key) in urls" :key="key">
<div id="preview" :ref="'url'" class="pics-list-image-container img-fluid"></div>
</li>
<li v-if="editingTour" class="add-pics-item">
<div :hidden="editingTour !== item.id" class="mt-10">
<label for="file-upload" class="custom-file-upload">
<img class="img-fluid" src="./img/plus-icon.png">
</label>
<input id="file-upload" type="file" #change="onFileChange"
name="files[]" multiple />
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="tour-list-options">
<div class="row">
<div class="col-md-6">
<span>
<button #click="editingTour = item.id" v-if="!editingTour"
class="btn border btn-circle tour-list-edit-btn">Edit</button>
</span>
<span>
<button #click="editTour(item)" v-if="editingTour"
class="btn border btn-circle tour-list-edit-btn">Save</button>
</span>
<span>
<button #click="clearInput" v-if="editingTour"
class="btn border btn-circle tour-list-delete-btn">Cancel</button>
</span>
<span>
<button #click="deleteTour(item.id, index)" v-if="!editingTour"
class="btn border btn-circle tour-list-delete-btn">Delete</buton>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
Update
If I use
<button #click="editTour(item)" v-if="editingTour == item.id" class="btn border btn-circle tour-list-edit-btn">Save</button>
all others Save buttons get hidden.
I think you can use add to each object of list new property isEditing and look for it in each item of the loop to check Save/Edit show.
Now your one prop editingTour can't be used for multiple edit, it can't store array of edited items id.
Template of buttons would look like:
<span>
<button #click="item.isEditing = item.id" v-if="!item.isEditing"
class="btn border btn-circle tour-list-edit-btn">Edit</button>
</span>
<span>
<button #click="editTour(item)" v-if="item.isEditing"
class="btn border btn-circle tour-list-edit-btn">Save</button>
</span>
<span>
<button #click="clearInput(item)" v-if="item.isEditing"
class="btn border btn-circle tour-list-delete-btn">Cancel</button>
</span>
<span>
<button #click="deleteTour(item.id, index)" v-if="!item.isEditing"
class="btn border btn-circle tour-list-delete-btn">Delete</button>
</span>

how to stop iterating my like button inside my post

I am working on a post system with likes where the user can toggle the post`s like I have done everything correctly except the last step, the problem inside my v-for loop I fetch likes table from post-like relation(many to many since likes table has user_id and post_id) but it is iterating my button even when I add a condition look here-> duplicated like button, I have tried many things v-if, v-show I think the problem is with my algorithm I hope someone can fix that for me thanks.
<div class="panel panel-white post panel-shadow" v-for="post in posts" >
<div class="post-heading">
<div class="pull-left image">
<img v-bind:src="'img/profile/' + post.user.photo" class="img-circle avatar" alt="user profile image">
</div>
<div class="pull-left meta">
<div class="title h5">
<b>{{post.user.name}} </b>
made a post.
</div>
<h6 class="text-muted time">{{post.created_at | hour}}</h6>
</div>
</div>
<div class="post-description">
<p>{{post.content}}</p>
<div class="stats">
<button class="btn btn-default stat-item" #click.prevent="addLike(post.id)">
<i class="fa fa-thumbs-o-up" aria-hidden="false" style="color: blue" v-for="(like) in post.likes" v-bind:style="like.user_id===id && like.post_id===post.id?'color: blue;':'color: gray;'" > Like {{post.likes.length}}
</i> <!-- here is the duplicate problem-->
</button>
<a class="btn btn-default stat-item" #click.prevent>
<i class="fa fa-reply-all"> {{post.comments.length}}</i> Comments
</a>
</div>
</div>
<comment-input :post="post" :userId="id" :userPhoto="userPhoto"></comment-input>
<ul class="comments-list" v-for="comment in post.comments?post.comments:''">
<comments :comment="comment" :userId="id" :userPhoto="userPhoto"></comments>
</ul>
</div>
<hr>
</div>
</div>
Don't loop through the button element, try to use a method likedBythisUser to check if the current user liked the post in order to bind it to the button style :
methods:{
likedBythisUser(post,id){
return post.likes.find(like=>{
return like.user_id===id && like.post_id===post.id;
}) // return a boolean value
}
}
template :
<button class="btn btn-default stat-item" #click.prevent="addLike(post.id)">
<i class="fa fa-thumbs-o-up" aria-hidden="false" style="color: blue" bind:style="likedBythisUser(post,id)?'color: blue;':'color: gray;'" > Like {{post.likes.length}}
</i> <!-- here is the duplicate problem-->
</button>

Button's message pop up without click

This is a screenshot of a normal google search
I'm trying to get the tiny message box when you go to the mic icon on Google search engine. I want to incorporate that to my bootstrap buttons. Following is the code where i want to add a similar message box on Connect and Disconnect button.
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-6">
<br>
<img style="width:30%" src="icon1.jpg">
<br>
<br>
<button type="button" class="btn btn-success" >
<a style="color:white;" href= "options.html" >
Connect
</a>
</button>
</div>
<div class = "col-12 col-sm-6 col-md-6 ">
<br>
<img style="width:30%" class="float-right" src="icon1.jpg" >
<br>
<br>
<br>
<br>
<br>
<div class ="text-right">
<button type="button" class="btn btn-danger ">
<a style="color:white;" href= "options.html" >
Disconnect
</a>
</button>
</div>
</div>
</div>
</div>
What you're looking for are tooltips. Check out bootstrap's documentation about them here.
You can follow this code with bootstrap. use data-toggle="tooltip" to your button from where you want hover, title is the tooltip/popup and add below script to the footer. For more follow the link https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp
Hover over me
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>

NightwatchJS Unable to locate element using CSS Selector

I've currently got a section of a web site that looks like so:
<form id="product_form" method="POST" action="/cart/add" role="form">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div>
<img class="product-image" src="/static/images/products/4388801543.jpg" width="500px" alt="">
</div>
</div>
<div class="col-md-3 product-variants other_options">
<h1 itemprop="name" class="product-single__title h3 uppercase">Samburu Shorts - Mens</h1>
<p class="product-single__price product-single__price-product-template">
<span id="ProductPrice" itemprop="price" content="$55.95">$55.95</span>
</p>
<input type="radio" name="variant_id" class="hidden" id="14903870471" value="14903870471" onclick="enableSubmit()"><label for="14903870471" class="option text-center selector size-value">29x11 Sand-Grey</label>
<input type="radio" name="variant_id" class="hidden" id="16304664135" value="16304664135" onclick="enableSubmit()"><label for="16304664135" class="option text-center selector size-value">29x11 Aubergine-Grey</label>
<input type="radio" name="variant_id" class="hidden" id="16304665799" value="16304665799" onclick="enableSubmit()"><label for="16304665799" class="option text-center selector size-value">34x7-5 Sand-Grey</label>
<div class="product-add">
<button id="add-to-cart" class="addItemToCart btn addToCart-btn product-form__cart-submit" disabled="" type="submit">Add to Cart</button>
</div>
<div class="social-sharing">
<a target="_blank" href="#" class="btn clear btn--share share-facebook" title="Share on Facebook">
<img src="//cdn.shopify.com/s/files/1/0281/7544/t/59/assets/img_share_fb.png?3517946130637841476">
<span class="visually-hidden">Share on Facebook</span>
</a>
<a target="_blank" href="#" class="btn clear btn--share share-twitter" title="Tweet on Twitter">
<img src="//cdn.shopify.com/s/files/1/0281/7544/t/59/assets/img_share_twitter.png?3517946130637841476">
<span class="visually-hidden">Tweet on Twitter</span>
</a>
<a target="_blank" href="#" class="btn clear btn--share share-pinterest" title="Pin on Pinterest">
<img src="//cdn.shopify.com/s/files/1/0281/7544/t/59/assets/img_share_pin.png?3517946130637841476">
<span class="visually-hidden">Pin on Pinterest</span>
</a>
</div>
</div>
</div>
</form>
I'm scripting out a test through NightwatchJS where I am trying to select one of the radio buttons so I can automate a user experience. The code test block that I have written out is as follows:
'Check that widget loaded on new product page' : function(browser) {
browser
.waitForElementVisible('#monsoon-inline-reco-div-ul', longWait, () => {
})
.elements('css selector', '#monsoon-inline-reco-div-ul li', (results) => {
browser.assert.equal(results.value.length, 4);
})
.click('#product_form > div > div:nth-child(2) > input[type=radio]')
.pause(longWait)
.end();
}
The line in question is the click command. I keep getting errors about how the script cannot find the element given the css selector. I've tested this in the console in the browser itself using document.querySelector('#product_form > div > div:nth-child(2) > input[type=radio]').click() and the radio button is clicked. Could use some thoughts on something I might be doing wrong because I've been working this for a couple hours now and have tried a variety of different things.

Unable to add vertical scroll bar in html?

<body ng-app="myApp" ng-controller="myCtrl">
<div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >
<div class="tittle" style="width: 25%;">
<a href="" ng-click="showDiv = ! showDiv" style="text-decoration: none;" ># {{x.title}} </a>
# No title
<hr style="color: red">
</a>
</b>
</div>
<div class="text">
<div style="width: 70% ;float:right; background-color: white;">
<div ng-show="showDiv">
<div style="float: right;">
<img id="currentPhoto" src="{{x.thread.main_image}}" onerror="this.src='noimageavailable.png'" width="300px" height="250px" style="float: right;">
</div>
<div style="color: purple;text-align: center;font-size:21px">
{{x.title}}
</div><br>
<div>
{{x.text}}
</div>
<b>
URL:-
</b>
To see in details, click here! <br> <br>
</div>
</div>
</div>
</div>
i am working on news feed module . I have two div's ,in first div (left-side) list of all news title is displayed and on right side div the description and image about that title is shown.But i am not able to add vertical scroll bar on left-side div(title-div),if i apply div then it goes to every particular title only.and second one is when page is load the first title, description will automatically load, so how to do this two things?
Add a wrapper.
The overflow scroll goes to all tittle because the title class is inside ng-repeat and thus is repeated for every individual title.
Add another wrapper div outside ng-repeat and apply overflow scroll to that.
<div class="wrapper">
<div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >
<div class="tittle" style="width: 25%;">
<a href="" ng-click="showDiv = ! showDiv" style="text-decoration: none;" ># {{x.title}} </a>
# No title
<hr style="color: red">
</a>
</b>
</div>
<div class="text">
<div style="width: 70% ;float:right; background-color: white;">
<div ng-show="showDiv">
<div style="float: right;">
<img id="currentPhoto" src="{{x.thread.main_image}}" onerror="this.src='noimageavailable.png'" width="300px" height="250px" style="float: right;">
</div>
<div style="color: purple;text-align: center;font-size:21px">
{{x.title}}
</div><br>
<div>
{{x.text}}
</div>
<b>
URL:-
</b>
To see in details, click here! <br> <br>
</div>
</div>
</div>
</div>
</div><!-- .wrapper -->
And add overflow:scroll to wrapper.
.wrapper {
overflow:scroll;
}
Note that this will create scroll for both title and text combined. Since they are in single wrapper. If you want different then, you will have to create two different wrappers with two different ng-repeat.

Categories