Home/ Questions/Q 7707973
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T00:29:31+00:00

I am building a mobile webapp with jquery mobile. Now what I have. I

  • 0

I am building a mobile webapp with jquery mobile. Now what I have. I have a collabsible element like you can see on this link. Now for each record that I get back from the database it is gonna make a new collabsible element. Here is my code for the collabsible element.

<div data-role="collapsible">
            <h3>~ITEM.FIRSTNAME~ ~ITEM.NAME~</h3>
                <div id="buttons">
                    <a href="mailto:~ITEM.MAIL~?subject=vul%20hier%20onderwerp%20in!&body=De%20body!" data-role="button">Mail: ~ITEM.MAIL~</a>
                    <img style="position:absolute;top:290px;right:45px;" src="images/mailIcon.png" width=32 height=32 />
                    <a href="tel:~ITEM.PHONENUMBER~" data-role="button">Bel ~ITEM.PHONENUMBER~</a>
                    <img style="position:absolute;top:360px;right:45px;" src="images/phoneIcon.png" width=32 height=32 />

                </div>
            </div>

I have 2 images a phone icon and a mail icon. Like the positioning above they are only on the first two buttons in my first collabsible element. But what do I need to do so that these buttons also appear on my following buttons?

So my question is, how can I position these 2 buttons to the div with ID=”buttons”.

–EDIT–
Here is a link to the actual page.

Kind regards,

Stef

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As I suspected, the absolute positioning of the icons is the culprit. You’re positioning the two icons using position:absolute and a top offset, but there’s no element around it with a position:relative. This means the positioning starting point falls back to the top of the page.

    In other words, your second (and third, fourth, etc if you have more results) set of icons are there, but they are positioned at the same place as the first two icons: at exactly 290px and 360px from the top of the page.

    Instead, place the img with the icon inside the <a> element that is each item, and position relatively to it’s surroundings. This would work probably:

    <div data-role="collapsible">
   <h3>~ITEM.FIRSTNAME~ ~ITEM.NAME~</h3>
       <div id="buttons">
          <a href="mailto:~ITEM.MAIL~?subject=vul%20hier%20onderwerp%20in!&body=De%20body!" data-role="button">Mail: ~ITEM.MAIL~
              <img style="float:right;margin:5px 15px" src="images/mailIcon.png" width=32 height=32 />
          </a>

          <a href="tel:~ITEM.PHONENUMBER~" data-role="button">Bel ~ITEM.PHONENUMBER~
              <img style="float:right;margin:5px 15px" src="images/phoneIcon.png" width=32 height=32 />

          </a>
            </div>
        </div>
    • 0