I’m trying to show a hit section from a Algolia Instant Search as simple as a dropdown-item from bootstrap:
one result per line as a <a> link, without images.
But I only get this one:
How can I get the dropdown-item (above) style , One item per line, without that borders and overlapping ?
Code HTML for seachbox:
<form class="form-inline md-form my-0 mr-5 text-white ">
<i class=“fas fa-search white-text” aria-hidden=“true”></i>
<div id=“searchbox” class="text-white "></div>
<div id=“hits” class=“dropdown-menu text-white” ></div>
</form>
Code JS :
search.addWidget(
instantsearch.widgets.searchBox({
container: “#searchbox”,
placeholder: “Search”,
showSubmit: false,
autofocus: false
})
);
search.addWidget(
instantsearch.widgets.hits({
container: "#hits",
templates: {
empty: "None.",
item: function(item) {
return `<a class="dropdown-item" href="/question/${item.id_question}">${item.str_question}</a>`;
}
}
})
);
Without being able to see the inside of <div id=“hits”></div>
I am guessing there is a ul and li
you need to make those display: block
and a few more css properties
probably white-space: pre;
Can you provide the inside html for <div id=“hits”></div>? so we can provide a better answer.
Related
I'm trying to use Clusterize.js component to display large amount of data in my vue app.
It's showing the dataset perfectly, however, while the clusterize element contains a button or something else which contains a click event, It's not working. I understand this component requires special click event fashion(described in docs FAQ), but can't find a way to use with dynamic data in vue app.
Here is the code sample
<div
id="scrollArea"
class="clusterize-scroll"
style="height: 300px; overflow: auto"
>
<div id="contentArea" class="clusterize-content">
<div v-for="item in dataSet" :key="item">
<button #click="onClick(item)" data-action="onClick">
button {{ item }}
</button>
</div>
</div>
</div>
<script>
mounted() {
new Clusterize({
scrollId: "scrollArea",
contentId: "contentArea",
});
},
</script>
Sandbox link: https://codesandbox.io/s/eloquent-tereshkova-wisf1?file=/src/App.vue
I have a font awesome icon inside an anchor tag and a input type text field. When clicking on that anchor tag i want to show that icon in the input field's model value. Is it possible? Like commenting someone and add some similes with the comment.
Also if submit the form can I store the entire value in the database?
Component HTML -
<div class="stories-content">
<input type="text" [(ngModel)]="inputval">
<a href="javascript:void(0)" (click)="setEmoji()">
<span style="width: 30px; height: 30px;display: block;" class="far fa-grin"></span>
</a>
</div>
Component.ts -
setEmoji(){
this.inputval = //What To do
}
You can do it with cheatsheet of fontawesome. Demo
change font family of input to show icon in input
input{
font-family: "Font Awesome 5 Free";
}
and use cheatsheat code as input value
<div class="stories-content">
<input type="text" [(ngModel)]="inputval">
<a (click)="setEmoji('')">
<i class="fa fa-smile"></i>
</a>
</div>
and if you want to show this in somewhere you need to change its fontfamily also to show icon again
Every Emoji will be associated with one unique Unicode code (Decimal or Hexa Decimal). In Order to use that code, you are supposed to map into the inner HTML value like below.
<div class="stories-content">
<textarea [innerHTML]=inputVal></textarea>
<a href="javascript:void(0)" (click)="setEmoji()">
<span style="width: 30px; height: 30px;display: block;" class="far fa-grin"></span>
</a>
</div>
import { Component } from '#angular/core'
#Component({
selector: 'my-app',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
inputVal = '😂😄';
setEmoji(){
this.inputval = '😄'; //What To do
}
}
you can find the some of the sample emoji codes : https://www.w3schools.com/charsets/ref_emoji_smileys.asp
Wanted to have cleave.js to format text input on the fly.
I have 2 text inputs
HTML text input and
also a pop over text input whenever search icon is clicked.
The issue is on popover text input where cleave text formating is not
working.
I believe it could be related to the element hasn't exist somehow? I have try to listen to listener but no luck so far. .on('shown.bs.popover)
My code as as per below
https://jsfiddle.net/fairul82/y3kf92oq/
Libraries used : cleave,js , bootstrap popover , jquery
HTML
<div class="container">
<h3>Bootstrap 3 Popover HTML Example</h3>
<input type="text" class="input-element"><br>
<ul class="list-unstyled">
<li><a data-placement="bottom" data-toggle="popover" data-
container="body" data-placement="left" type="button" data-html="true"
href="#" id="login"><span class="glyphicon glyphicon-search" style="margin:3px 0 0 0"></span></a></li>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<h1>
My Content
</h1>
<input type="text" class="input-element"><br>
</div>
</form>
</div>
//JS
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
$("[data-toggle=popover]").on('shown.bs.popover', function() {
// alert('called back');
const cleave = new Cleave('.input-element', {
numeral: true,
numeralThousandsGroupStyle: 'thousand'
});
});
const cleave = new Cleave('.input-element', {
numeral: true,
numeralThousandsGroupStyle: 'thousand'
});
Here is solution https://jsfiddle.net/ztkv8w60/19/
According to authority document https://github.com/nosir/cleave.js, it has a note .input-element here is a unique DOM element. If you want to apply Cleave for multiple elements, you need to give different css selectors and apply to each of them.
It is tricky question, because the bootstrap popover creates the same element as your specific div when the icon gets a click. Therefore there are two the same element, you have to point it out which element is in a popover.
I gave up on Bootstrap popover, and went looking. I found WebUI Popover which has all the functionality i am looking for.
But I am having trouble setting the title of the popover using the html content of an element on the page. I get undefined in console.log() and the title loads empty. The html I am trying to access is dynamically created.
Where I think there is a bug in the plugin is that the content loads perfectly from another element on the page.
I have a FIDDLE here.
My WebUI Popover code is:
// Popover Menu initialize
$('.icon-popover-menu').webuiPopover({
placement: 'left',
trigger: 'click',
closeable: true,
multi: false,
animation: 'pop',
cache: 'false',
type: 'html',
width: '220',
title: function() {
return $(this).closest('td.row-icon').find('.btn-row-popover-menu-head').html();
},
content: function() {
return $(this).closest('td.row-icon').find('.btn-row-popover-menu-body').html();
}
});
// Hide popover when screen changes size
$(window).on('resize', function() {
WebuiPopovers.hideAll();
});
$(window).on('scroll', function() {
WebuiPopovers.hideAll();
});
A sample of my HTML is:
<table class="fiddle">
<tr>
<td class="row-icon">
<button class="icon-popover-menu ion-fw btn-row-popover-menu">BTN</button>
<div style="display:none;">
<div class="btn-row-popover-menu-head">
<span>THIS IS THE TITLE</span>
</div>
<div class="btn-row-popover-menu-body">
<div class="input-group" role="group">
<a class="btn btn-app btn-icon-menu btn-popover-first" href="#">
EDIT
</a>
<a class="btn btn-app btn-icon-menu-danger" href="#">
DELETE
<br>
<span class="transaction-menu-legend">DELETE</span>
</a>
</div>
</div>
</div>
</td>
</table>
Any help is appreciated.
title: function() {
return $(event.target).closest('td.row-icon').find('.btn-row-popover-menu-head').html();
},
This works fine. By doing $(this) you are trying to access the title element of the popover which obviously has no closest td.row-icon. Hence it is undefined.
My site has all elements displayed by default.
Isotope has the inbuilt method 'filter' - ie show ONLY this.
I'd like to make a function where I hide/show an element based on clicking on a button on screen - ie hide ONLY this (and show the others) / unhide this (and show the others).
Here's what I'm doing code-wise.
var music = $('#music').isotope();
$('nav button').on('click', function () {
music.isotope({
filter: "div." + $(this).attr("class")
});
With filtering, the filter parameter must match items in your HTML markup, if not the filter will not return anything.
FIDDLE DEMO: http://jsfiddle.net/XWVhc/1/
I can only provide an alternate example as you have not provided any html markup so that we could debug your current code, however, I'll explain how this works.
HTML FOR FILTERS:
Here we have a few simple buttons that will filter our items with the data-filter attribute attached to each button.
<div id="filter-buttons-holder">
<div class="filter-button" data-filter=".dog">DOG</div>
<div class="filter-button" data-filter=".cat">CAT</div>
<div class="filter-button" data-filter=".foo">FOO</div>
<div class="filter-button" data-filter=".bar">BAR</div>
<div class="filter-button selected" data-filter=".dog, .foo, .cat, .bar">SHOW ALL</div>
</div>
HTML FOR ISOTOPE ITEMS:
Here's the markup for our isotope items, notice that each item has a class of isotope-item and also has a class of what 'category' it belongs too, you can add multiple classes and it will still filter as expected.
<div id="module-columns-holder" class="isotope">
<a href="/" class="dog isotope-item">
<div><h1>DOG</h1></div>
</a>
<a href="/" class="cat foo isotope-item">
<div><h1>CAT</h1></div>
</a>
<a href="/" class="dog isotope-item">
<div><h1>DOG</h1></div>
</a>
<a href="/" class="foo isotope-item">
<div><h1>FOO</h1></div>
</a>
<a href="/" class="bar isotope-item">
<div><h1>BAR</h1></div>
</a>
</div>
JAVASCRIPT FILTERING
Here we set up our isotope container, notice the last data attribute is a filter, this is effectively what you're after, however you can specify which 'category' you want to filter on initially.
//Setup isotope for filters
var isotopeContainer = $('#module-columns-holder');
isotopeContainer.isotope({
itemSelector: '.isotope-item',
layoutMode : 'fitRows',
animationOptions : {
queue : false,
duration : 750,
easing: 'linear'
},
filter: '.dog, .cat, .foo, .bar'
});
CLICK EVENT FOR FILTERS
You can attach a filter to the buttons we created earlier so that you can have live filtering
$('#filter-buttons-holder .filter-button').on('click',function(){
var filters = $(this).data('filter');
var parent = $(this).closest('#filter-buttons-holder');
parent.find('.selected').removeClass('selected');
$(this).addClass('selected');
isotopeContainer.isotope({ filter: filters });
return false;
});
Hope this helps