Place the span in the upper right-hand corner within the MaterializeCSS Collection

I am facing an issue with positioning a span in a CollectionItem. I need it to be in the top right corner or aligned in the middle, but currently, it is staying in the bottom corner, and the problem seems to be with the first Item.

Below is the code snippet in question:

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
      <style media="screen">
      .wrap {
        position: relative;
        display: inline-block;
      }

      .wrap span {
        position: absolute;
        top: 0;
        right: 0;
      }
      </style>
  </head>
  <body>
      <div class="row">
        <div class="col s3 #01579b light-blue darken-4">
          <ul class="collection">
            <li class="collection-item" style="padding:5px;">
              Title
              <small><br />First Line</small><span class="secondary-content wrap">17</span>
          </li>
            <li class="collection-item">Texto2<span class="secondary-content">2</span></li>
          </ul>
        </div>
        <div class="col s9 #00b8d4 cyan accent-4" style="color:white;">
          bbb
        </div>
      </div>
   </body>
</html>

Answer №1

Give this a try:

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
      <style media="screen">
      .wrap {
        position: relative;
        display: inline-block;
      }

      .wrap span {
        position: absolute;
        top: 0;
        right: 0;
      }
      </style>
  </head>
  <body>
      <div class="row">
        <div class="col s3 #01579b light-blue darken-4">
          <ul class="collection">
            <li class="collection-item" style="padding:5px;">
              &nbsp; &nbsp; &nbsp;Title
              <small><br /> &nbsp; &nbsp; &nbsp;First Line</small><span class="secondary-content wrap">17</span>
          </li>
            <li class="collection-item">Texto2<span class="secondary-content">2</span></li>
          </ul>
        </div>
        <div class="col s9 #00b8d4 cyan accent-4" style="color:white;">
          bbb
        </div>
      </div>
   </body>
</html>

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

Content is positioned to the left in a horizontal layout without a set width

I am currently assisting a friend with the development of her website. While I consider myself somewhat of an amateur in web design, I usually manage to overcome challenges by dedicating hours to searching for solutions online. However, this time I have no ...

Foundation 4 - image hover effect to display alternate image

I am a newcomer to Foundation 4, but I have some coding experience. Currently, I am in the process of transitioning my photography blog (www.momentaryawe.com/blog) from Wordpress with a custom theme to a custom theme built on Foundation 4. Most aspects of ...

What is the best way to incorporate additional list items into a field input?

I have been working on developing a simple to-do app and I am encountering an issue. After the user clicks enter in the input box, nothing happens as expected. Despite trying various methods, the problem persists. Below is the recent code that I have been ...

What specific element is being targeted when a directive injects a ViewContainerRef?

What specific element is associated with a ViewContainerRef when injected into a directive? Take this scenario, where we have the following template: template `<div><span vcdirective></span></div>` Now, if the constructor for the ...

Stop the automatic hiding of the sticky header when reaching the bottom of the page

I have implemented the position: sticky property for my website's header. However, I am facing an issue where the header becomes hidden when I scroll halfway down the page (bottom on mobile devices). Can anyone suggest a solution to fix this problem? ...

Integrating CSS with Material-UI in a React project: A step-by-step guide

I am currently developing a project using React (along with TypeScript) and the Material-UI library. One of my requirements is to implement an animated submit button, while replacing the default one provided by the library. After some research, I came acr ...

Issue with mobile.changePage() function not executing as expected

I created a basic code that generates a "Splash screen". For storing my data, I am utilizing localstorage. When I first load it, I retrieve data from a URL and I am able to navigate to different pages using $.mobile.changePage(). However, if the data is a ...

Explore the diverse webpages on my website

My website is built in html+css and the main content is contained within a div with the id "content" on index.html. There's a link on the menubar that leads to page2.php, but I want the content of page2.php to be displayed inside the <div "content" ...

Safari causing rotated element to shift by 1px due to CSS3 Transition

Encountering a rendering issue in Safari with 180deg rotated elements. Two examples highlight the problem (tested on Safari 9.1): Odd width problem. The bottom element shifts to the right initially, and further on transition. Even width problem. It appea ...

Is it possible to incorporate two ng-repeat directives within a single td element in a table?

The results so far Expected outcome Please advise me on how to incorporate two ng-repeats within one td. When I use a span tag afterwards, the expected result is not achieved. I have used one ng-repeat in the td and the other in a span tag, which is why t ...

No changes occur within this JavaScript code

I am currently working on a piece of Java Script code: document.onreadystateChange = function() { if (document.readystate === "complete") { var menu = document.getElementsByClassName('menu'); var b0 = menu[0]; b0.addE ...

What is the best way to integrate JavaScript with my HTML command box?

I'm having some trouble with an HTML command box that is supposed to execute commands like changing stylesheets and other tasks. I thought I had everything set up correctly, but it doesn't seem to be working at all. Below is the HTML code with th ...

Methods for animating .jpg images using CSS

I'm currently working on animating an image, specifically moving it from left to right and back. However, before I dive into implementing CSS animation keyframes, I noticed that I am having trouble getting the HTML element to follow the CSS styles I a ...

Pondering in AngularJS - what is the best way to alter the DOM during an AJAX call?

I'm completely new to AngularJS and trying to transition from a jQuery background. After reading through "Thinking in AngularJS if I have a jQuery background?" on Stack Overflow, I understand the concept but am struggling to implement it without depen ...

Unable to activate tr:hover override feature in Dash app

Although I am new to Dash, I am well-versed in Python, HTML, and CSS. I have a simple structure that displays a DataTable. Here is the code snippet: def render_datatable(df=None, id=None): dt1= dash_table.DataTable( id=id, columns=[{&q ...

Python code snippet for transforming JSON data into an HTML table

Recently, I've been utilizing the JSON library in Python to extract data from JSON files through Python. extractedData = json.loads(jsonfile) While I have a solid grasp on handling JSON files with Python, I am now exploring ways to present JSON data ...

Modifying linked dropdown selections with jQuery

I'm trying to create a recurrent functionality where I have 3 select elements. When the first select is changed, it should update the second and third selects accordingly. If the second select is changed, then it should also affect the third select. ...

Adding Php code to a Wordpress form can be done by creating a custom

I'm struggling to incorporate a PHP code into a WordPress form that I created. Despite trying three different PHP plugins, I haven't been successful. Can anyone advise on where and how to properly integrate the PHP code in WordPress and call it t ...

What is the best way to distinguish a particular item in a <select> element and include a delete button for each row using jQuery?

1.) I've set up a nested table and now I want to ensure that when the 'Delete' button within the child table is clicked, its corresponding row gets deleted. 2.) I have a <select> tag. The issue is how can I implement validation to che ...

Submitting hidden values and multiple values with checkboxes in HTML

Is there a way to link multiple form fields with one checkbox for submission? For example: <input type=hidden name=code value="cycle_code" /> <input type=checkbox name=vehicle value="cycle" /> <input type=hidden name=code value="car_code" ...