Show items in a row inside a div

This section is about a specific div element:

 <div class="PictureContent1" style="display:inline-block" value="1"> </div>

Here is the actual content:

for(var i = 0; i<ui.item.productpictureurl.length; i++){
                        $('div.PictureContent1').append("<img width='100px' height='100px' src='" + ui.item.productpictureurl[i] + "' />");
                        var radioBtn = '<input type="radio" name="'+ui.item.label+'" data-urlId="'+ui.item.productpictureurl[i]+'" />';
                        $('div.PictureContent1').append(radioBtn);                                  
                    }

I'm looking for guidance on how to display <img> and radiobuttons in one line within this div. Any suggestions?

javascriptjqueryhtmlcss

Answer №1

To solve the issue, consider adding float: left to the images. However, be cautious as this may lead to a new problem of unclear floats causing buggy code placement after the images.

For more information on clearing floats effectively, check out this link.

Answer №2

To integrate this styling into your HTML document, you can use the following CSS code: 

.PictureContent1 img{ float:left}
, or you can modify the code as shown below:

for(var i = 0; i<ui.item.productpictureurl.length; i++){
    $('div.PictureContent1').append("<div style='float:left'>");
    $('div.PictureContent1').append("<img width='100px' height='100px' src='" + ui.item.productpictureurl[i] + "' />");
    var radioBtn = '<input type="radio" name="'+ui.item.label+'" data-urlId="'+ui.item.productpictureurl[i]+'" />';
    $('div.PictureContent1').append(radioBtn); 
    $('div.PictureContent1').append("</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

Align both the image and text in the center with no space between

How can I center two blocks containing both images and text vertically and horizontally while using flexbox? I notice that when the text is longer, padding appears between the image and the text. How can I remove this padding?1 .product-teaser { width ...

htmlcss

Postman is showing a 404 error message when trying to access an Express JS route that uses a POST request

Currently, I am working on creating APIs in Node.js with express and body-parser. While GET requests work fine using Postman, there seems to be an issue with POST requests as it consistently throws a 404 error saying Cannot GET / Express Version: @4.17.1 ...

javascriptnode.jsexpressbody-parser

Display a success message in a div when the form is submitted

I am facing an issue with the submission of multiple forms on a page using AJAX. The problem is that when I submit a particular form, it displays success messages in all the divs instead of showing it only in the relevant div. I want each form to trigger ...

javascriptjqueryhtmlajax

Spin a vector using a perpendicular in Three.js

I need help with vector rotation in Three.js {x: 0, y: 0, z: 1} I also have a normal vector: {x: 1, y: 0, z: 0} How can I rotate the first vector based on the direction of the normal to achieve this result? {x: 1, y: 0, z: 0} Your assistance in this ...

javascriptmathvectorthree.js

Customizing Dropdown Icon in Bootstrap

Previously in Bootstrap 3, changing the dropdown icon was straightforward by adjusting the span and inserting the desired icon. However, it appears to be a bit trickier with Bootstrap 4. Am I overlooking something? Regardless, here is the basic code snipp ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

The Chrome browser is experiencing delays with processing ajax requests, causing them

When I make a series of 8 requests in quick succession, they load successfully. However, any requests made after that get stuck in a "pending" state. Below is my basic HTML template: <!DOCTYPE html> <html> <head> <meta charset= ...

javascriptajaxgoogle-chrome

Retrieve each individual element from an array sequentially using jQuery

I am looking to retrieve elements from an array one at a time and only display each element after completing a certain action with the previous one. Here’s an example: var elems = ['Apple','Orange','Banana'], i = 0; ...

javascriptjqueryarrayscallback

How to extract the last five words from a .txt file in PHP by utilizing the file_get_contents

Is there a way to efficiently read the last 5 words from a .txt file using file_get_contents during long-polling? I attempted to implement a solution using the code below, but it interferes with the long-polling process – which functions properly when di ...

javascriptphpstringoutputfile-get-contents

Error: expecting the ] token to come after the element in ajax.get function

I've been encountering an error message in the debugger that says "SyntaxError: missing ] after element list." The first request always functions correctly, but every subsequent request results in a syntax error. Can someone clarify what I'm doi ...

javascriptjqueryajax

Centering DIVs both vertically and horizontally within parent DIVs that have a height and width of 100%

I am facing a challenge with my nested parent DIVs that occupy 100% of the browser window in terms of height and width. I am struggling to center secondary DIVs inside their respective parent containers. Here are the definitions for my stacked parents: # ...

csshtml

What steps do I need to follow to get this AngularJs Gallery up and running

As I delve into expanding my knowledge in AngularJS, I've encountered some issues while trying to run code on Plunker. Could someone take a look at the code and point out what I might be doing incorrectly? The code snippet is provided below: var a ...

javascriptjquerycssangularjs

The requested route for [POST] "/store/index" cannot be found

I am currently learning RoR through the book "Agile web development with rails 4.0" and I have encountered an issue with the localization selector (ch. 15.4). In the file ~/app/views/layouts/application.html.erb: <!DOCTYPE html> <html> <he ...

htmlruby-on-railsruby

Utilizing PostgreSQL with Node JS Express for Powerful Datatables

Seeking guidance as a newbie here. I've taken on the challenge of creating my first full-stack app. My goal is to connect my express app and PostgreSQL database with Datatables. The API successfully fetches the data and logs it in the console, but the ...

javascriptnode.jspostgresqlexpressdatatable

Separately extract the input values from the divs

Here is a snippet of my HTML code: <div id="Section1" class="divFiles"> <input type="text" name="file"> <input type="text" name="file"> <input type="text" name="file"> <input type="text" name="file"> </div> < ...

javascriptjqueryarraysjsonfunction

Remove the source code upon accessing the inspector tool

I recently encountered a page with encrypted source code. The content is being loaded from two separate sources stored in JavaScript files. My question is: Is it feasible to completely remove the HTML source code when a user opens the inspector (F12, etc ...

htmldomblocksource-code-protection

Issue with Angular 6 Animation not showing up

Looking to incorporate an animation spinner into my Angular app Found this spinner example: https://codepen.io/z-/pen/OPzNLz spinner.component.html import { Component, OnInit } from '@angular/core'; @Component({ selecto ...

htmlcssangularanimation

Is it possible for me to use any text as a JSON key?

Is it acceptable to use any utf-8 string as a property name in JSON? For example, is the following valid: var personData = { 'Matti Möttönen': { "FirstName": "Matti", "LastName": "Möttöne ...

javascriptjson

Proper positioning of try/catch block in scenarios involving delayed async/await operations

For the past six months, I have been utilizing async/await and have truly enjoyed the convenience it provides. Typically, I adhere to the traditional usage like so: try { await doSomethingAsync() } catch (e) {} Lately, I've delved into experimenti ...

javascripttypescriptasync-await

The request to http://localhost:5000/error resulted in a 404 (Not Found) error message. I encountered difficulties connecting

When attempting to retrieve information about a product from Amazon using their productId with Express.js and ScraperAPI, an error is encountered: Error message: "{name: "RequestError", message: "Error: Invalid URI "${baseUrl}&url=https://www.amazon.com/d ...

javascriptnode.jsapiexpressweb-scraping

JavaScript allows for selecting individual IDs by their corresponding numbers

Looking to retrieve numerical IDs <div class="user-view"> <div class="show_user_div"> <div class="disp"> <a href="/profile/name1/">name1</a><br /> <span id="show_a_3"> <a id="ref_show(3)">Show Details</ ...

javascripthtmljquery