Loading pdf's from a drop down menu

Here’s my goal: I have a drop down menu (I originally was using Select/Option until I realized that is not what I wanted, so now it is a bootstrap dropdown menu), I want to be able to drop down the menu and display the items in it which are populated using a CMS we are using. Then select the item I want and have the page load the pdf. I know that I can do this because if I put them in a simple list, they work fine. However, we really would like to put them in a drop down. When I was using Switch/Option, I could get the names of the objects from the cms to populate, but they were not clickable to load. Below is the code I have now, does anyone know a way to do this?

@{
    ViewBag.Title = "HRForms";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using MyLink.Models
@model IEnumerable<HRForms>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<h1 class="title" style="color: white; margin-top: 5%" align="center"> HR Forms</h1>


<body>
<div class="container">                                     
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Printable Forms
            <span class="caret"></span></button>
        <ul class="dropdown-menu">
        @foreach (var form in Model)
        {
            <li><a href="@form.Form.File.Url">@form.Title</a></li>
        }
        </ul>
    </div>
</div>

Ok, so I was messing around with this, trying all types of different ways to do this and I inadvertently came across a partial solution. I added a different type of drop down but forgot to delete the code for the other drop down, so when it opened, I noticed that the stuff that should be in the drop down menu was showing as hyperlinked text, but also the drop down menu worked perfectly! So when I went back and saw what I did, I have now been messing with it to figure out how to correctly combine the two to make the hyperlink text go away, but make the drop down menu still work, but can’t figure it out! Hopefully someone else understands whats going on here!

   <div class="dropdown">
        <button class="dropbtn">Dropdown</button>
        <div class="dropdown-content">
        @foreach (var form in Model)
        {
            <a href="@form.Form.File.Url">@form.Title</a>
        }
        </div>
    </div>
    

<div class="container">
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Printable Forms
            <span class="caret"></span></button>

        <ul class="dropdown-menu">
            @foreach (var form in Model)
            {
                <li><a href="@form.Form.File.Url">@form.Title</a></li>
            }
        </ul>

    </div>
</div>

The top drop down is the one I added second.

Here is an image of what is going on:

I want to keep the drop down that is open, but want to get rid of the button that says “dropdown” on it and the blue hyperlinked text.

I’m still having problems with this if anyone can figure it out. The problem seems to be with the drop down menu itself, not loading the pdf’s. If I remove any line of code, even the simple span that adds the caret, it breaks my working drop down menu. If I right click and inspect the html while the site is running though, I can see that the pdf’s are loaded and the links there work, even though they won’t display for some reason.

UPDATE: I removed the button that I don’t want, and left the good drop down menu. It still does nothing if I click it, however if I right click and hit inspect and then go to the view and click the button it works fine? What changes when the inspect screen is open?

UPDATE: After checking all my code, I finally determined that it doesn’t seem to be a code error but an actual browser issue. This code works fine in Microsoft Edge or Internet Explorer, but does not work in Chrome. Any ideas how to deal with a problem like that?

SOLVED: There is an image on my layout page that was overlapping the button at times, causing the button to appear to not work. Because part of the image is transparent, I couldn’t see it.

2 Likes

@ethanforbes89,

I don’t know whether or not this might have helped your troubleshooting, but I find that drawing outlines around objects very often reveals overlapping or otherwise unexpected layout space occupied by those elements/objects. On any page that I write, you could find half a dozen “Test Outline. To Be Deleted.”

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.