Avoid the wrapping of text below the icon

I am currently working on compiling a list of items, each requiring an icon to be displayed on the left-hand side. However, I have noticed that for items with long names, the text wraps under the icon which is not the desired outcome. Is there a way to prevent this from happening?

In the image below, you can see an example where the text "Created" is wrapping under the file icon:

https://i.sstatic.net/8lMxs.png

The method I am using to create each item in Bootstrap is as follows: 

var renderActivity = function(a) {
  var html = "";
  html += "<a title='" + a.title + "' href='" + a.path +"' class='list-group-item clearfix" + a.type + "'>";
  html +=   "<span class='glyphicon glyphicon-"+a.icon+" pull-left fa-3x'></span>";
  html +=   "<div>";
  html +=       "<h3 class='list-group-item-heading'>" + a.type + ": " + a.title + "</h3>";
  html +=       "Created: " + a.created
  html +=   "</div>";
  html += "</a>";

  return html
}
htmlcsstwitter-bootstrap

Answer №1

To fix the layout issue, you need to apply a float: left to the div following the p tag. This will ensure that the floating element behaves as expected, just like images in newspaper articles that are floated to the left or right with text wrapping around them.

Additionally, you should give the floated div a specific width. Here is an example code snippet to remedy the problem:

    a {
        display: block;
        float: left;
        max-width: 400px;
        border: 1px solid cyan;
        padding: 2px;
    }
    
    a > p {
        float: left;
        border: 1px dotted green;
        margin-right: 2px;
    }
    
    a > div {
        float: left;
        max-width: 350px;
        border: 1px dotted red;
    }
       <a href="">
            <p>
                <img src="https://i.sstatic.net/8lMxs.png" width="24" height="24" alt="">
            </p>
            <div>
                <span>
      <h3>File my gcr labour relations, greiviences, improvements and desiplnies and on and on</h3>
       Created: monday morning for al of em.
</span>
            </div>
        </a>

P.S: For easier implementation, consider using the media object component from Bootstrap, which provides better compatibility across different browsers.

Answer №2

Here is a solution that may help:

https://jsfiddle.net/1a8b2c3d/ 

.text-box{
  float: left;
  padding: 0 0 0 10px;
  display: inline-block;
}

.icon {
  float: left;
  font-size: 30px;
  display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<a title="title" href="path" class="list-group-item clearfix type">
  <span class="icon glyphicon-open pull-left fa-3x"></span>
  <div class="text-box">
    <h3 class="list-group-item-heading">    
      type:title
    </h3>
    <span class="created">created</span>
  </div>
</a>
<a title="title" href="path" class="list-group-item clearfix type">
  <span class="icon glyphicon-remove pull-left fa-3x"></span>
  <div class="text-box">
    <h3 class="list-group-item-heading">    
      type:title
    </h3>
    <span class="created">created</span>
  </div>
</a>

This method may not work well with long content or on small screens. For better responsiveness on smaller devices, consider adding the class "hidden-xs" (or "hidden-xs-down" for Bootstrap v4) to the icon span.

Alternatively, you can try placing the icon using a :before style like this:

https://jsfiddle.net/d1e4g5hi/

a > h3, a > span {
  padding-left: 15px;
}
.created {
  font-size: 80%;
}
h3 {
  position: relative;
}
h3:before {
  font-family: 'Glyphicons Halflings';
  position: absolute;
  left: 2px;
}
h3.icon-glyphicon-open:before {
  content: '\e167';
}
h3.icon-glyphicon-remove:before {
  content: '\e014';
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<a title="title" href="path" class="list-group-item clearfix type">
  <h3 class="list-group-item-heading icon-glyphicon-open">    
    type:title
  </h3>
  <span class="created">created</span>
</a>
<a title="title" href="path" class="list-group-item clearfix type">
  <h3 class="list-group-item-heading icon-glyphicon-remove">    
    type:title
  </h3>
  <span class="created">created</span>
</a>

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

The wget tool is capable of downloading CSS files that contain @import rules, however it overlooks

Currently utilizing the following command with wget: wget --page-requisites --convert-links -e robots=off \ --span-hosts --restrict-file-names=windows \ --directory-prefix=$ASSETS_DIR --no-directories http://myhost/home The HTML page ...

csswget

Mastering the Art of Line Breaks in WordPress

I am looking for a way to break a WordPress site title over two lines at a specific point in the text. Since the WordPress content filter 'wpautop' disables the ` ` tag (also known as ` ` or ` `), I'm wondering what the best alternative ...

htmlcsswordpresstexthref

A versatile Material UI paper that adjusts its dimensions dynamically

Utilizing Material-UI's Paper component (https://mui.com/components/paper/), I've encountered a scenario where the content within the Paper element needs to be dynamic. <Paper className="modal" elevation={3}> ...Content </Paper ...

javascriptcssreactjstypescriptmaterial-ui

Only conceal the table column if space is limited

A scenario involves an HTML table with two columns that need to be displayed fully, with the second column aligned to the right. Currently, this has been achieved by setting the width of the first column to 100%. However, a challenge arises where the words ...

htmlcss

directive behaves unexpectedly in bootstrap grid

I'm a new AngularJS user:). Having an issue with my directive that controls popovers for icons. It's functioning properly in one location but malfunctioning in another (blinking and causing the popup to shift down and cover the icon). HTML temp ...

javascripthtmlangularjsangular-ui-bootstrap

"Dynamic" visual in a Vue.js development scheme

Utilizing Vue.js for the development of a hybrid mobile application has been my current focus, with the Quasar framework serving as a key component. Recently, I incorporated an image into the application using the <img /> tag and utilized the followi ...

javascriptcssvue.js

Calculating the dimensions of a CSS element based on its content

Is there a way to achieve this using only CSS, without needing JavaScript? I am working on a project with a lot of relative and absolute positions, where elements must be centered dynamically without specifying static widths. While I have managed to minimi ...

css

When converting to HTML, LibreOffice Writer fails to display footers on even-numbered pages

I'm currently facing an issue with converting my HTML form to PDF using LibreOffice. I need to include a footer in the document, but for some reason, only odd-numbered pages display the footer. Even-numbered pages are not showing anything at all. Int ...

htmlfooterlibreoffice

CSS - Undesirable Line Break

My goal is to display a grid of videos on my website, maximizing the number of videos per row. I envision a navigation area on the left side and the videos positioned next to it. However, I'm facing an issue where the videos are being placed below th ...

htmlcssbreak

How can I incorporate a .shtml file into a .php webpage?

Is there a way to include a .shtml file within a .php page? I know it can be done, as I have successfully achieved this in the past (although I cannot remember the exact code). Can someone please assist me with this? ...

phphtmlshtml

Placing a division inside another division element

I am currently having trouble containing a color wheel element within the boundaries of its parent div (speech_bubble_middle_bar). I understand that the correct approach is to use absolute positioning within a relative positioned div, so I attempted to cr ...

css

Is a single f.select impacting another f.select in the same form? (undesired)

I am facing an issue where adding a new HTML element like: <%= f.date_select :date, { id: "date-select"} %> is impacting my existing collection select: <%= f.collection_select :id, Customer.where(business_id: current_c ...

javascripthtmlruby-on-railsrubyajax

Centering Multiple Lines of Items in an Unordered List with Horizontal Alignment

Looking for a solution to center an unordered list horizontally within the containing UL, especially when the list wraps onto a second line. Each LI has a set width and height. I've tried various methods that work for a single line but have had no luc ...

csslistcenteringhtml-lists

What could be causing the sudden glitch in my sidebar animation?

I'm encountering issues with the sidebar opening smoothly. The width of the column seems to change as it opens and there's a choppy jump. I've attempted to resolve this by applying transitions to the CSS and using flex-grow / shrink. Unfort ...

htmlbootstrap-5

The <button> tag and the <a> tag have different display properties

I am in the process of creating unique custom buttons using CSS. Below is the code snippet that I have created for this purpose. Interestingly, when I apply the CSS to a <button> element, it behaves as expected. However, when I use it with an <a& ...

htmlcsstwitter-bootstrap

Show the HTML content fetched from the database using PHP

After pulling html source code from a database and storing it in a PHP variable, I noticed that the content consists of table rows structured like this: <tr><td>10:00 AM</td><td class="success">Available</td></tr> < ...

phphtml

- bullet point: tabulated

I need to create an unordered list with URLs included and indented, while keeping all lines justified to the left. * line one text text ted more text text text * line two text ted more text text text * line three text ted more text text text ...

css

What is the best way to extract user input from a web form and utilize it to perform a calculation using jQuery?

Is it possible to retrieve user input from a web form and use it to perform calculations with jquery? I am interested in extracting a numerical value entered by a user in a web form. Upon clicking "NEXT", I intend to multiply this number by a predefined c ...

jqueryhtmlwebforms

HTML and CSS are two separate languages that work together to create web pages

I'm experiencing an issue with my CSS file not responding to my HTML file. I have imported the CSS file into my HTML file and both files are located in the same directory. It was working fine when they were written in the same file, but after separati ...

htmlcss

Click to dynamically change the input number variable

I'm in the process of creating a special calculator, where you input the number of years into a field, hit submit, and see different results displayed below without the page reloading. All my calculations are working properly at the moment. However, ...

javascriptjqueryhtmlfunction