I am displaying a list of PDF files using Flask and Materialize

<table class="highlight responsive-table">
    <thead>
        <th class="left-align"><i class="material-icons">call</i></th>
        <th class="left-align"><i class="material-icons">email</i></th>
        <th class="center-align"><i class="material-icons">picture_as_pdf</i></th>
    </thead>
    <tbody>
        {% for doc in docs %}
            <tr>
                <td>{{doc.phone if doc.phone}}</td>
                <td>{{doc.email if doc.email}}</td>
                <td>
                    <a href="#modal{{loop.index}}" class="modal-trigger"><i class="material-icons">open</i> Ouvrir</a>
                </td>
            </tr>
            <div class="modal" id="modal{{loop.index}}">
                <iframe src="/cv/{{doc.name}}" scrolling="no" width="100%" height="100%"></iframe>
            </div>
        {% endfor %}
    </tbody>
</table> 

The PDF is displayed in a modal window using the iframe.

When I open the page in mobile, and instead of showing the PDF in modal, it prompts me to download the pdf as if I was trying to download it directly. As I am using a for loop in Flask, I get a download prompt for each PDF. I would like to know if there's a way to check if the user agent is mobile, so that if that's the case, then I will display a link to the pdf instead of the modal window.

I am displaying a list of PDF files using Flask and Materialize

<table class="highlight responsive-table">
    <thead>
        <th class="left-align"><i class="material-icons">call</i></th>
        <th class="left-align"><i class="material-icons">email</i></th>
        <th class="center-align"><i class="material-icons">picture_as_pdf</i></th>
    </thead>
    <tbody>
        {% for doc in docs %}
            <tr>
                <td>{{doc.phone if doc.phone}}</td>
                <td>{{doc.email if doc.email}}</td>
                <td>
                    <a href="#modal{{loop.index}}" class="modal-trigger"><i class="material-icons">open</i> Ouvrir</a>
                </td>
            </tr>
            <div class="modal" id="modal{{loop.index}}">
                <iframe src="/cv/{{doc.name}}" scrolling="no" width="100%" height="100%"></iframe>
            </div>
        {% endfor %}
    </tbody>
</table> 

The PDF is displayed in a modal window using the iframe.

When I open the page in mobile, and instead of showing the PDF in modal, it prompts me to download the pdf as if I was trying to download it directly. As I am using a for loop in Flask, I get a download prompt for each PDF. I would like to know if there's a way to check if the user agent is mobile, so that if that's the case, then I will display a link to the pdf instead of the modal window.

• javascript
• css
• iframe
• flask
• mobile

• 1 Don’t ask basic “is there a way to do X” questions, that just es across as outsourcing the research you should be doing here, directly to us. – 04FS Commented Mar 27, 2019 at 10:50
• 1 You have an error in the HTML: the divs are between table rows rather than in table cells. Does it help if you fix that? – Mr Lister Commented Mar 27, 2019 at 10:53
• it works well on desktop the problem is that mobile prompts to download pdf every time it encounters an iframe with src – Amine Messaoudi Commented Mar 27, 2019 at 10:56

1 Answer 1

I solved the problem using Flask-Mobility. It allows to detect if the device is mobile

from flask_mobility import Mobility

...

app = Flask(__name__)
Mobility(app)

...

{% for doc in docs %}
    <tr>
        <td>{{doc.phone if doc.phone}}</td>
        <td>{{doc.email if doc.email}}</td>
        <td>
            {% if request.MOBILE %}
                <a href="/cv/{{doc.name}}" target="_blank"><i class="material-icons">open</i> Ouvrir</a>
            {% else %}
                <div class="modal" id="modal{{loop.index}}">
                    <iframe src="/cv/{{doc.name}}" scrolling="no" width="100%" height="100%"></iframe>
                </div>
                <a href="#modal{{loop.index}}" class="modal-trigger"><i class="material-icons">open</i> Ouvrir</a>
            {% endif %}
       </td>
    </tr>
{% endfor %}