|
|
Rank: Member
Groups: Member
Joined: 11/13/2015
Posts: 29
|
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
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,221
|
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/SignUpIn 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!
|
|
Rank: Member
Groups: Member
Joined: 11/13/2015
Posts: 29
|
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/SignUpIn 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
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,221
|
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.
|
|