Unable to combine two items within the same row in the cell

My current structure looks like this:

<td class="sorting_1" tabindex="0">
    <div class="form-check" data-user-id="1">
       <label class="form-check-label">
            <input class="form-check-input" type="checkbox" value=""> 
           <span class="form-check-sign">
               <span class="check"></span>
           </span>
       </label>
   </div>
   <div class="photo">
       <img src=".././uploads/images/avatar/1.png">
   </div>
</td>

I want to display both the checkbox and image in the same row, but currently the image is appearing on a separate line. How can I adjust the layout to fix this issue?

htmlcssbootstrap-4

Answer №1

Here is a solution using the CSS property display: inline-block:

<td class="sorting_1" tabindex="0">
    <div class="form-check" data-user-id="1" style="display:inline-block">
       <label class="form-check-label">
            <input class="form-check-input" type="checkbox" value=""> 
           <span class="form-check-sign">
               <span class="check"></span>
           </span>
       </label>
   </div>
   <div class="photo" style="display:inline-block">
       <img src=".././uploads/images/avatar/1.png">
   </div>
</td>

If you have multiple elements like this, you can create a CSS rule to apply display: inline-block:

.form-check, .photo {
display: inline-block
}
<td class="sorting_1" tabindex="0">
    <div class="form-check" data-user-id="1">
       <label class="form-check-label">
            <input class="form-check-input" type="checkbox" value=""> 
           <span class="form-check-sign">
               <span class="check"></span>
           </span>
       </label>
   </div>
   <div class="photo">
       <img src=".././uploads/images/avatar/1.png">
   </div>
</td>

Answer №2

The issue lies in the fact that div is a block element and automatically starts on a new line. If you switch it to a span, the problem should be resolved.

<td class="sorting_1" tabindex="0">
    <span class="form-check" data-user-id="1">
       <label class="form-check-label">
            <input class="form-check-input" type="checkbox" value=""> 
           <span class="form-check-sign">
               <span class="check"></span>
           </span>
       </label>
   </span>
   <span class="photo">
       <img src=".././uploads/images/avatar/1.png">
   </span>
</td>

Answer №3

Here are some steps you can take:

<td class="sorting_1" tabindex="0">
    <div class="form-check" data-user-id="2">
        <label class="form-check-label">
            <input class="form-check-input" type="checkbox" value=""> 
            <span class="form-check-sign">
                <span class="checkmark"></span>
            </span>
        </label>
        <img src=".././uploads/images/avatar/2.png" class="user-photo">
    </div>
</td>

Answer №4

The reason for this behavior is that the image element is contained within a "div" tag, which is considered a block-level element by default in browsers. To resolve this issue, you have two options: 1. Rearrange the elements so that the image is placed below the span. 2. Modify the styling of the div with the class "photo" either using inline styles or by adding a rule to your CSS file like so: .photo {display:inline-block}

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

migrate the HTML variable to PHP

Hello, as a beginner in php, I have a question regarding storing the var effort value from an html5 canvas code into a php session for transfer to mysql. Can someone provide guidance on how to achieve this? Your assistance is greatly appreciated. <di ...

phphtmlcanvas

Navigating Your Way Through the Center (ASP.NET MVC)

My navbar has elements that I want to center within it, but using margin hasn't been successful. Do you have any suggestions on how I can achieve this alignment using CSS? This is the code snippet: <div class="navbar "> <div class="cont ...

htmlcssasp.netasp.net-mvctwitter-bootstrap

JavaScript Tutorial: Extracting the text content of a drop event

Curious about extracting the text value from a drop event, I set out to find an answer. To my surprise, I discovered that it's not as straightforward as I thought. Check out the demo below: <script src="https://ajax.googleapis.com/ajax/libs/jquer ...

javascriptjqueryhtmlajax

Struggling with a scrolling problem in Bootstrap 4 horizontal cards?

Recently, I utilized a bootstrap card to display an image with text below it. I opted for the card class because of its solid structure and to avoid excessive CSS styling to horizontally align div lists. I envisioned creating an image gallery with a horizo ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Footer displaying page numbering

I recently installed dompdf 0.83 and have been able to generate documents successfully. However, I am struggling to create a footer that displays the page number out of the total number of pages. Both css and script methods have not been effective for me s ...

cssdompdf

Retrieve data from a MySQL table based on a specific condition in PHP

Can someone assist me with fetching data from a table where the valid_from date is less than a specified date (excluding the current date)? I have a table that looks like this: view my table here For instance, if my date is 02-04-2015, I would want to re ...

phphtmlmysqlcss

How to remove an extra horizontal scroll bar from a fixed-header HTML table?

While working on updating my HTML tables to have fixed headers, I followed online examples that suggest making table-layout fixed, thead and tbody blocks, setting height constraints for tbody, and applying overflow-y to tbody. The result is functional as m ...

htmlcss

How can I prevent an HTML element from losing focus?

Currently, I am developing an online editor that requires accurate character inputs. To achieve this, I have implemented the jQuery.onKeyPress event on a textarea element. This approach was chosen because obtaining character inputs from the body directly p ...

javascriptjqueryhtmltextarea

When incorporating a CDN in an HTML file, an error message may appear stating that browserRouter is not defined

I am attempting to create a single HTML page with React and React-router-dom. Initially, I used unpkg.com to import the necessary libraries, and I was able to load the page with basic React components. However, when I tried incorporating React-router-dom ...

javascripthtmlreactjsreact-router-dom

Using multiple background images in CSS on mobile devices

I decided to experiment with creating a grid pattern using css background-images in this way: .grid { width:720px; height:720px; background-color: #333333; background-image: linear-gradient(rgba(255,255,255,0.1), 1px, transparent 1px), ...

ioscssbackground-image

The Bootstrap carousel slider is functioning properly, however, the images are not displaying

I am experiencing an issue with my carousel. I have been developing a project and utilizing the bootstrap-4 carousel slider. It functions properly when I run it on my localhost, displaying all the images as expected. However, after publishing the project o ...

imageserverbootstrap-4slidercarousel

What causes the disparity in the rendering of iframe content height when using "src" compared to "srcdoc"?

After comparing the behaviors of iframes with src and srcdoc, I stumbled upon a puzzling difference: a div set to 100% height renders as the full height of the iframe when using src=[data uri], but not with srcdoc. The issue can be easily replicated with ...

htmlcssiframe

Troubleshooting problem with sorting in Angular 4 material header

Using Angular 4 material for a table has presented me with two issues: 1. When sorting a table, it displays the description of the sorting order in the header. I would like to remove this. https://i.sstatic.net/5bHFO.png It displays "Sorted by ascending o ...

javascripthtmlangulartypescriptangular-cdk

Concatenating strings with JavaScript

I am currently working on building a web page using a combination of html and javascript. I have a json file that provides inputs for some specific content I need to display. My main goal is to set up an address variable in order to show the Google Maps AP ...

javascripthtmljsongoogle-maps

Upon clicking the 'Add Image' button, TINYMCE dynamically incorporates an input

I am in search of creative solutions to address an issue I'm facing. Currently, I am utilizing TINYMCE to incorporate text into my webpage. However, I would like to enhance this functionality by having a feature that allows me to add an image along w ...

javascriptphpcssajaxtinymce

View the Outcome of the Latest Form Submission on a Fresh Page

I have created a form that stores input values in a database table. Now, I want to display these results on another page once the form is submitted. However, I am struggling with how to retrieve and display all the values from the database record on the ne ...

phphtmlmysqlforms

A guide to storing data within the client's HTML: Tips and tricks for optimal storage placement

As I develop my website, I am using a technique where I store a simplified version of the web page within the HTML itself. This allows me to send efficient Ajax requests back to the server, as it can analyze what the client's page looks like and send ...

htmlcompressionclient-server

How can CSS3 be used to target the initial or final visible element in a selection?

Looking to style form fieldsets with margins, while removing the margin-top for the first non-hidden fieldset and margin-bottom for the last non-hidden fieldset (any fieldset can be dynamically set as hidden by a script). I attempted the CSS below without ...

htmlcsscss-selectors

Improving User Experience with HTML 5 Progress Bars

Has anyone ever tried implementing a progress bar on a Marketo Landing page? The concept is that the progress bar would increase with each completed field until all fields are done, reaching 100% completion? Here is my current code: <progress max="100 ...

javascriptjqueryhtmlprogress-barmarketo

What is the trick to creating uneven sides (lower left and lower right) with varying heights?

Struggling to articulate my design vision, I'm attempting to achieve a unique look. Although I've explored the transform function, it's not quite what I'm looking for. Instead of rotating the div, I want a diagonal ending. Can this des ...

css