Struggling with html tag formatting with the help of hogan.js and typeahead.js

I'm currently using the script below:

    $('#Entity_Wall').typeahead({
        name: 'walls',
        remote: "http://localhost/getsomestuff?text=%QUERY',
        limit: 10,
        template: '{{value}}<div class="template-wall-front-farthest" 
             style="background:url(\'{{image}}\');</div>',
        engine: Hogan
    });

Additionally, I have this stylesheet in place:

 .template-wall-front-farthest {
        float: left;
        margin-right: 5px;
        background-position: -132px -2px;
        width: 16px;
        height: 19px;
        background-repeat: no-repeat;
  }

The issue arises when my typahead template is applied, as the background image does not position correctly. While I've found a workaround by adjusting the template directly, is there a way to utilize my existing CSS styles without modifying the template itself?

Answer №1

Found the solution! I simply swapped out background with background-image, like so:

    template: '{{value}}<div class="template-wall-dropdown" 
          style="background-image:url(\'{{image}}\');"></div>'

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Alignment of elements in a list at the bottom

I am looking to create multi-level tabs using <li> that grow from bottom to top. Here is the current code I have: div{ width: 200px; border: 1px solid black; } ul{ margin: 0px; padding: 0px; } li{ margin: 2px; width: 20px; display: ...

Adjusting webpage zoom based on different screen sizes

Hey there, I ran into an issue with my web page design. It looks great on my desktop monitors, but when I checked it on my laptop, things went haywire. Strangely, adjusting the zoom to 67% seemed to fix the problem. Both screens have a resolution of 1920 ...

Hovering over the Star Rating component will cause all previous stars to be filled

I'm in the process of creating a Star Rating component for our website using Angular 11. I've managed to render the 5 stars based on the current rating value, but I'm having trouble getting the hover styling just right. Basically, if I have ...

Is there a way to turn off alerts from Aspx files for HTML and CSS?

Dealing with annoying warnings in my aspx files has been a constant struggle. The "CSS Value is not defined" message pops up when I reference CSS files from different projects, causing unnecessary frustration. Even more frustrating are the warnings about i ...

Eliminating the glow effect, border, and both vertical and horizontal scrollbars from a textarea

Dealing with the textarea element has been a struggle for me. Despite adding decorations, I am still facing issues with it. The glow and border just won't disappear, which is quite frustrating. Could it be because of the form-control class? When I rem ...

Mudblazor - Tap or click within the designated area to trigger the drag and drop functionality

I have incorporated the Mudblazor CSS framework into my Blazor WebAssembly project. Within the drag and drop zone, I have included a button that is supposed to remove each uploaded image. However, when I click on the remove button, it only opens up the fi ...

The daterangepicker reigns supreme above all other elements

Just a heads up, I am utilizing daterangepicker from this link: . Recently, I encountered an issue where the input field was overlapping with other elements like bootstrap Modals or menus. <div class="col-md-3 form-group"> <div class=&qu ...

JQuery's find() method followed by length/size() is resulting in a return

I'm running into an issue with dynamically created divs. Here's how they are created: // Loop through and append divs to #result_main_search $("#result_main_search").append('<div class="singleresult_main_search"> <a href="http:// ...

Unable to make the Show/Hide Loading GIF function work as intended

Could someone please help me with my code? I'm trying to display a loading GIF image while waiting for an ajax request to complete. When the button is pressed, I want the loader to be shown until the data is returned from the server. I would greatly ...

Is it possible to add animated text using anime.js?

var elements = document.querySelectorAll('.content'); anime({ targets: elements, content: 100, }); <script src="https://raw.githubusercontent.com/juliangarnier/anime/master/lib/anime.min.js"></script> <span class="content"> ...

How can I ensure that my boxes are aligned in a straight line?

I'm having trouble with applying the style="display: inline-block" to each div. Can someone please assist me? https://i.sstatic.net/Gi75l.png Below is my HTML code: <div class="hobby" style="display: inline-block"> <di ...

Error with an absolutely positioned element within a link in the Firefox browser

I'm experimenting with a unique effect for my links that involves making it look like the upper left corner has been bitten off. To achieve this, I am using absolute positioning of a square element with the same background color as the link itself. W ...

caption sliding into the incorrect div box

As I continue my journey of learning CSS, I've encountered a puzzling issue involving slide-in captions within a different div element. The problem arises when I try to customize the appearance of the caption to better fit the overall design of my web ...

Prevent clicks from passing through the transparent header-div onto bootstrap buttons

I have a webpage built with AngularJS and Bootstrap. It's currently in beta and available online in (German and): teacher.scool.cool simply click on "test anmelden" navigate to the next page using the menu This webpage features a fixed transparent ...

Tips for achieving printing with the "Fit sheet on one page" option in JavaScript

Is there a way to print a large table of data with 200 or 300 rows all on one page, similar to the Online MS Excel print option 'Fit Sheet on One Page'? I attempted the code below: var tble = document.createElement("table"); tble.id = "tble"; d ...

Obtaining a single element from a hidden display while dragging using Jquery UI

Is there a way to move an element outside of a container with overflow hidden when using drag and drop functionality in CSS? Currently, when I drag an element with the "item" class, it stays within the confines of the container with overflow set to hidden. ...

``There seems to be an issue with Firefox's background position percentage

After combining multiple images into one to reduce HTTP requests, I utilized background-position in percentage values to control which image was displayed. Since the width of the images is dictated by the parent element, using percentages rather than pixel ...

Troubleshoot: Inability to highlight a column and row in a table using ::after and ::before

To create a hover effect where the corresponding column and row are highlighted when the mouse is on a cell, as well as highlighting the row for player 1's actions and the column for player 2's actions, I attempted the following code: /* CSS Cod ...

What can be done to ensure that the a href tag is functioning as clickable?

Having an issue with my HTML and CSS code for a notification dropdown box. I am unable to click the tag, even after attempting to use JavaScript. Can't seem to figure out what's causing this problem. Any advice on how to make the tag clickable? ...

Creating a progress bar that includes hyperlinks: A step-by-step guide

Currently, I am in the process of developing an application form that consists of 9 pages of questions. Initially, I had implemented a progress bar which indicated completion by filling up 1/9 for each page completed. However, I have been informed that thi ...