Logo
My Account |  Site Map | Contact Us  
Welcome Guest Search | Active Topics | Sign In | Register

Popping out a menu Options
Doron Guttman
Posted: Wednesday, June 13, 2018 8:04:35 AM
Rank: Member
Groups: Member

Joined: 11/13/2015
Posts: 13
Hello,
We have an implementation where we embed the webview in an AppBar.
All works quite well, but we encountered some limitation.
We have a dropdown (select) element in our html and it sits at the bottom of the webview, when we click it, the drop down menu appears, but because it is at the bottom of the view, it gets cut out. We understand that and are ok with finding an alternative.

One idea we had was to use the context menu (which is not limited by the edge of the WebView) and it is very simple to do so with a right-click.
But we could not find a way to pop it using a left click. no JavaScript API works for that and we did not find a C# API to trigger the context menu in the EO namespaces.

Can you please:
1) let us know how to trigger the context menu based on an element or (x,y), either from javascript or c#
and/or
2) suggest an alternative solution to display such content over the edge of the WebView

Thanks
eo_support
Posted: Wednesday, June 13, 2018 5:32:17 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 20,415
Hi,

Please try the latest build and see if it works for you. We verified this with the latest build and it should not have any problems. The drop down is capable of exceeding the parent window dimension because it is a separate window, not a child window. You can do a simple test by loading this page with our TabbedBrowser sample application:

https://www.essentialobjects.com/account/SignUp

In this page the "Time Zone" field is a long drop down. You should see the drop down is displayed correctly without being cut by the containing window.

Thanks!

Doron Guttman
Posted: Thursday, June 14, 2018 2:47:05 AM
Rank: Member
Groups: Member

Joined: 11/13/2015
Posts: 13
eo_support wrote:
Hi,

Please try the latest build and see if it works for you. We verified this with the latest build and it should not have any problems. The drop down is capable of exceeding the parent window dimension because it is a separate window, not a child window. You can do a simple test by loading this page with our TabbedBrowser sample application:

https://www.essentialobjects.com/account/SignUp

In this page the "Time Zone" field is a long drop down. You should see the drop down is displayed correctly without being cut by the containing window.

Thanks!



Thanks for the quick reply, you guys are awesome at this!
I guess I was incorrect in my explanation. I am including a sample html - this is a bootstrap dropdown example, you can just duplicate the links to get more.

Code: HTML/ASPX
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Simple Title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    </head>

    <body>
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown button
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">1</a>
                <a class="dropdown-item" href="#">2</a>
                <a class="dropdown-item" href="#">3</a>
                <a class="dropdown-item" href="#">4</a>
                <a class="dropdown-item" href="#">5</a>
                <a class="dropdown-item" href="#">6</a>
                <a class="dropdown-item" href="#">7</a>
                <a class="dropdown-item" href="#">8</a>
                <a class="dropdown-item" href="#">9</a>
                <a class="dropdown-item" href="#">10</a>
                <a class="dropdown-item" href="#">11</a>
                <a class="dropdown-item" href="#">12</a>
                <a class="dropdown-item" href="#">13</a>
                <a class="dropdown-item" href="#">14</a>
                <a class="dropdown-item" href="#">15</a>
                <a class="dropdown-item" href="#">16</a>
            </div>
        </div>
    </body>
</html>


You can see it gets cut out
eo_support
Posted: Thursday, June 14, 2018 7:43:18 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 20,415
This kind of drop down won't work ---- a select element is natively known to the browser engine so the browser engine will create a separate window to display it. A drop down created with other "regular" elements such as DIVs will not be able to exceed the browser window and will be cut. You will have exactly the same problem even if you run the page in a regular browser. So this is not something we will be able to "fix" on our end.


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.