When using Semantic UI, displaying a list item with an image causes the text to be

I recently came across an interesting example on the Semantic UI website showcasing lists with items containing images positioned to the left.

To view the example, visit:

Everything seemed to work fine until I noticed that when using a long block of text, it would sometimes get hidden under the image.

This issue did not occur when replacing the image with an icon instead.

You can compare the two versions here:http://codepen.io/anon/pen/GjLGVx

<div class="ui list">
  <div class="item">
    <img class="ui avatar image" src="http://semantic-ui.com/images/avatar2/small/rachel.png">
    <div class="content">
      <a class="header">Rachel</a>
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
  </div>  
</div>

Image version:

https://i.sstatic.net/4UMwP.png

Icon version:http://codepen.io/anon/pen/pEBKrX

<div class="ui list">
  <div class="item">
    <i class="ui apple icon"></i>
    <div class="content">
      <a class="header">Rachel</a>
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
  </div>   
</div>

https://i.sstatic.net/Zcp0z.png

Is there a way to adjust the image version so that the text is displayed correctly next to the image similar to how it appears in the icon version?

The browser I am using is Chrome 54.0.2840.71 (64-bit)

htmlcsssemantic-ui

Answer №1

Here's another way to accomplish the same thing:

.item{
  border:1px solid red;
  width:300px;
  position:relative;
}
img{
  position:absolute;
  top:0;
  left:0;
}
a{
  color:blue;}
.content {
 margin-left:50px;
  
}
<div class="ui list">
  <div class="item">
    <img src="http://www.apple.com/home/images/og.jpg?201608151252" height=50px width=50px>
 
    <div class="content">
      <a class="header" href="#">Rachel</a>
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
  </div>  
</div>

Give this a try!

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

I am having trouble displaying all the div elements with the same #id simultaneously

Click here for the code snippet The code provided seems to have a problem where hello2 and hello3 are not displaying. Is this issue related to the fact that '#id can only be used once'? Making it a class does not seem to work either. How can thi ...

javascriptjqueryhtmlcss

I am looking to sort the salary information based on the radio button selected

When I click on the radio button in the code, I want to filter the data of the salary Array. The rendered data should be filtered according to the text on the radio button. The check box Array filtering is working fine, but after applying the same concept, ...

javascripthtmlcssreactjsnode.js

Switch between underlining and not underlining matInput inside mat-form-field with a click

Is there a way to turn the underline on and off for a matInput within a mat-form-field using CSS or TypeScript? I came across this post which demonstrates that the underline can be removed with CSS like this: ::ng-deep .mat-form-field-underline { dis ...

htmlcssangularangular-material

Center the two consecutive <div> elements within the container

There is a situation where <div id="container"> <div id="div2">Title</div> <div id="div3">text text</div> </div> and in this scenario, #container { height:500px; width:100%; text- ...

csshtmlcenter

The dimensions of my textarea and input field are different

Just starting out with HTML and CSS here. I'm trying to use flexbox to create a form, but the width of my input fields and text area is off for some reason. Any ideas on what might be missing from my code? Thanks in advance! Here's the CSS I&apo ...

htmlcss

Using .htaccess to Conceal Directories with Documents

It seems that my website is being targeted by individuals seeking to obtain all the code. I have implemented an .htaccess file that will display nothing when someone visits domain.com/images, but if they specifically request domain.com/images/logo.png, the ...

htmlcss.htaccessdirectory

The libmagic library detects the MIME type of files as text/plain rather than text/javascript or

In my web project's interface, I am using libmagic to retrieve the MIME type of a file. Interestingly, I am encountering issues where css and js files are being identified as text/plain MIME type. When using Chromium, the following warnings are displ ...

javascriptcssclibmagic

Simple steps to create a stylish modal popup using CSS and JavaScript

I recently created a simple code snippet to generate a modal highlight for an element. card.click(function(){ cloak.show(); var cardClone = card.clone(); cloak.append(cardClone); cardClone.css({ position: 'absolute', ...

javascripthtmlcss

How to Validate Comma-Separated Email IDs Using Regex in Angular 5 Template?

I am currently working on a project utilizing Angular 5. Within this project, there is an input field designated for E-Mail IDs. The main goal I aimed to achieve was: To enable the user to input a maximum of 3 E-Mail IDs, with each E-Mail ID being subject ...

regexangularhtmltypescriptangular5

Creating a Multilevel Dropdown Menu: A Step-by-Step Guide

I am curious about how to create a multilevel dropdown menu using Bootstrap 5 and vanilla JavaScript. I created an example based on the Bootstrap 5 dropdowns component documentation, but it did not display when I clicked on it. The issue seems to be relat ...

javascripthtmlcssbootstrap-5

What is the recommended method for adjusting the size of MyWSAT pages - using CSS, code, or a combination of both?

When accessing the default MyWSAT page on a computer, you'll notice that it is perfectly centered within the page. However, resizing the page may cause the content to become too small to read without manual adjustment. This issue seems to primarily af ...

javascriptcssresizehtml

Troubleshooting the issue: AngularJS not functioning properly with radio button selection to show specific div containing input field

Looking for some help with radio buttons: I need the selection of radio buttons to display their respective input boxes. I have included a snippet of my HTML and controller code below. In my controller, I am using ng-change to call a function that uses jQu ...

javascriptjqueryangularjshtml

Show results from selecting multiple dropdown options

I am looking to create a search function that displays results based on multiple dropdown selections. I have 4 dropdown menus and a submit button, but I am unsure how to show the search results upon clicking the submit button. The desired outcome is to dis ...

phphtmlmysqlcodeigniterdrop-down-menu

Align two images to the center while displaying them in individual rows

<div class="client-logo-wrapper"> <a href="some link"><img class="client-logo" src="images/logo.png" alt="client-logo"></a> <a href="some link"><img class="contract-logo" src="images/logo.png" alt="contr ...

htmlcsssass

HTML slider overlaps fixed buttons

I have a fixed button on my HTML site that redirects to another link. It appears correctly on most pages, but overlaps with the slider on my index page. $(document).ready(function(){ // hide #back-top first //$(".back-top").hide(); // fade in # ...

javascripthtmlcss

Navigation bar expansion issue in Boostrap needs fixing

Hello, currently I am in the process of creating my portfolio website. This is my first time working with bootstrap so I am still figuring things out. Right now, I am trying to create a navbar that expands using navbar-expand, but for some reason it's ...

htmlcssbootstrap-4

spacing between text and bottom border

Is there a way to add space between text and the border below, as shown in the image linked? I'd like the space to be 5px with a font-size of 15px. My attempt: .selected { color: #284660; } .selected:after { content: ''; position: a ...

htmlcss

Having trouble dynamically applying css properties on the element

I am facing an issue where I want to display a popup without the scroll bar showing up. The popup is being displayed using an iframe. var addPartnerDialog = App.addDialog("AddExistingPartner", 500, 250); $(addPartnerDialog.getId()).css('overfl ...

javascriptjqueryhtmlcssdom

Ways to implement a table column as a slider

My goal is to create a single-page website with a table as the main content. The first column of this table should be toggleable by a button. I specifically want to display the first column of the table only on the slidebar and not both the table and the ...

javascriptjqueryhtmlcssbootstrap-4

How to apply CSS styling to all class instances except for the selected ones

Imagine you have an application with numerous instances of a class called .element. What if we could achieve the following effect: .element:hover rest { opacity: 0.5 } In this scenario, "rest" would represent all other instances of .element except fo ...

htmlcss