I am using Angular 2 for my project.
I came across library: http://valor-software.com/ngx-bootstrap/#/popover to display popover when clicking on an item. Basically I have several images displayed on the page using the ngFor loop as follows:
<span *ngFor="let item of items;">
<img class="itemClass" [src]="item.image"
</span>
where items is the array returned from the controller class.
Now, for each image displayed above, when I hover, I want to display a popover and the content to be displayed on the corresponding popover depends on various values stored in item object above. How do I achieve this? The popup contents need to be very specific to the 'item' object which is for the specific image clicked.
The examples in the link above does not seem to give information on how to display data in the popover based on the specific item clicked from a list of items.
According to the documentation http://valor-software.com/ngx-bootstrap/#/popover#dynamic-content this should works:
<span *ngFor="let item of items;">
<img class="itemClass" [popover]="getItemContent(item)" [popoverTitle]="getItemTitle(item)" [src]="item.image"
</span>
And in the controller:
getItemContent(item){return `The content is ${item.someProp} some other text`}
and do the same for the method getItemTitle(item)
Related
For example I have scenes array drawn in v-for. If I change the first element of scenes Vue will redraw each element of scenes and if those elements are objects - each field will be redrawn as well.
My v-for:
<div
class="scene"
v-for="scene of scenes"
:key="scene"
>
<p>{{scene.name}}</p>
<iframe
style="border: 0"
:src="scene.frameURL"
></iframe>
</div>
In my case each scene element contains data to load specific page with iframe and also to show it's name. And now if I change some scene's name - each another scene objects will be redrawn and iframe pages will be reloaded.
How to tell Vue to redraw only field's been changed and to not touch another fields and elements?
how can i make a photos grid (each photo is a card) with custom overlay.
when the user hover the photo, he will see the details overlay.
so the user will see the photo and details on it.
i tried to do this with "Beautify" and "Bootstrap-Vue"
and did not succeed.
example for what i look for: example website
Just build your grid of items - styling them with bootstrap "Card" component and grid system to make it as a grid.
Then just use this custom vue component with v-for and then bind #mouseover + #mouseleave on this element to change the state of hovered property or whatever you like to call it. Then just change your text or structure in your component according to hovered state.
Simple demo here:
http://jsfiddle.net/e8y0hLps/
How do I exclude menu items from my nav when collapse takes place?
To be more explicit, I have some list items as such:
<li>|</li>
Used as a spacer between other menu items. The pipes inside of the "li" tags are showing as items in the collapsed nav menu, and I want to ignore these on collapse.
Is there a property available that I can add to the element to make bootstrap completely ignore adding my "spacers" to the nav list of menu items?
Yes, refer here http://getbootstrap.com/css/#responsive-utilities-classes for the available classes.
For your example, you would use something like this:
<li class="hidden-xs">|</li>
hi i created bootstrap navbar for my wordpress theme my navbar fit to the window
but i used container and row class to set the texts within the container width but when i click on Collection Dropdown text the dropdown menu appear fit to the window why? i want the dropdown menu fit to the container menu or fit to the yellow div.
HOW I CAN DO THIS?
for show my navbar see this link
http://jsfiddle.net/rerraw/bs2wke9r/4/
After some attempt for solving my problem only i added new grid class to my code and i solved my problem
i added <div class='col-sm-12'>codes here</div>
after this the dropdwon menu fit to the container
I am using Bootstrap 3.2.0, and I have a checkbox with the label: Show hidden posts.
On small screens (xs) I would like the label to be Show Hidden to save some screen space.
Can I do this within Bootstrap? Do I need to use JavaScript?
Wrap the word Posts in a hidden-xs
Show Hidden <span class="hidden-xs">Posts</span>