Questions on Kendo UI for jQuery Forum

3 answers

210 views

Hi,

Is there a way to have different arrow colors for popover on the same page? I have the folowing code, which opens a red and a green popover:

http://jsbin.com/xopanitu/1/edit

As you see the red one (#popover1) is ok, but the green one (#popover2) is not, because it has a red arrow.

I can set the color of the arrow with the .km-popup-arrow:after css selector, but it is applied for all the popover arrows. How can I set to only apply it for #popover1 or only to #popover2? As I see the the structure of the popover is something like this:

<div data-role="popup">
<div class="km-popup-arrow"></div>
<div data-role="popover" id="popover1"></div>
</div>

The problem is that I can't get .km-popover-arrow div from #popover1 div with css selectors (there is no parent selector, and sibling selectors are also not working because the arrow preceeds the popover).

As I see the only solution is to add an ID or class to the div with data-role="popup", but how? From the docs (http://docs.telerik.com/kendo-ui/api/mobile/popover#configuration-popup) there are only height, width, direction parameters for popop. Is there a way to add class or generate id for the popup div?

Thank you!

PopOver (Mobile)

answered on 20 Jun 2014

3 answers

80 views

Popover for non Kendo Dom element

Hi
I have some text with an ellipsis, I need a tooltip, I think the popover is possibly a good fit for that.

It seems that to get a popup you need some clickable element, can you attach a popup to some random Dom element?

e.g. a popover to the below without changing the styling

<span>Some text that's too lon.....</span>

If not can you use the Tooltip control on Mobile?

thanks

PopOver (Mobile)

answered on 27 May 2014

2 answers

121 views

km-popup-arrow

Issue: Popup arrow not aligned with border of popup

Condition: When I put buttons on the edge of the screen

Result: Arrow points to button but the padding of the container (15px) causes it to not align and look bad (see attached screenshot)

PopOver (Mobile)

answered on 15 Apr 2014

1 answer

52 views

Show Handler Lost Inside of Popover

Hello,

Are view events handled differently for views that are children of popovers? I set up the following PopOver. The PopOver is opened by a function in the underlying view from code, passing a valid target. It works consistently, meaning the popover can be opened and closed over and over with no problems. However, the function "popupshow" defined in the view's data-show attribute is only called the first time the PopOver is opened. In the debugger, I have verified that the view's show function is still pointing to the correct function - it is just not called ever again after the first open.

Here is the popover:

<div id="login-popover" data-role="popover" data-popup='{ "height": "220", "width": "250" }' data-close="reset">

<div data-role="view" data-title="Login" data-model="logins" data-init="logins.popupinit" data-show="logins.popupshow">

<div id="login-wrapper" data-role="content">

<form id="login-form">

<input type="email" id="username" data-bind="value: info.username" placeholder="EMAIL"/>

<input type="password" id="pwd" data-bind="value: info.password" placeholder="PASSWORD"/>

<div>

<span class="k-invalid-msg" data-for="username"></span>

</div>

<div>

<a data-role="button" data-click="login">Login</a>

<a data-role="button" data-click="register">Sign Up</a>

</div>

</form>

</div>

I open using this call:

$("#login-popover").data("kendoMobilePopOver").open("#valid-element");

and close with either this call:

$("#login-popover").data("kendoMobilePopOver").close();

or by simply tapping outside of the PopOver. The "reset" function in the data-close does nothing but change the class of an unrelated visual element. The "reset" is called consistently, too, no matter how many times the popover is opened. Only the show goes away. Any ideas would be appreciated.

Thank you,

Kelly

PopOver (Mobile)

answered on 19 Mar 2014

8 answers

52 views

POTENTIAL BUG: PopOver will not open when referenced from a tabstrip which is contained by a layout.

I opened a support ticket for this but figured I'd post in case any has a workaround that I can do in the mean time....

I put together this jsbin to illustrate the issue that I discovered. Essentially, I have a popover that call from a tabstrip item, which is inside a layout. The view that I'm calling also has the data-stretch set to true,so I don't know if that contributes to the issue. Seems to be 100% reproducible in this case.

JSBin

As you can see, if you tap the first tab item, a js error is thrown, scrollbar gets introduces, <BillMurray>Human sacrifice, dogs and cats living together... mass hysteria!</BillMurray>
well you get the idea.

PopOver (Mobile)

answered on 04 Feb 2014

1 answer

52 views

With popover visible view underneath is draggable

Hi,

When I open a popver, I am able to drag the view underneath up and down on a IPad using phonegap. I cant repro this in the browser.
The view is not scrolling, rather the whole view including headers and footers can be shifted up and down showing black spaces. Also the popover half disappears while doing that. When I lift my finger everything is back to normal.

My apologies for the rambling explanation.

Any ideas?

Heinrich

PopOver (Mobile)

answered on 06 Sep 2013

1 answer

15 views

BUG FOUND: PopOver immediately dismisses on Mobile Safari when triggered by a Tabstrip item

http://jsbin.com/ofawul/3#/

This one's been bugging me but I finally isolated the scenario where is consistently occurs. Please refer to the jsbin link. The last item 'More' has a popover attached to it. This works ok on desktop browsers, but while I ran this in mobile safari, the popover appears then fades away immediately. I tried several workarounds (e.preventDefault() on the close of the popover, etc.) but with no success.

PopOver (Mobile)

answered on 05 Aug 2013

1 answer

34 views

navigate parent view from popOver

Hello,

I have a link in a popOver that I'd like to use to change the application's view instead of the view inside the popover. How should I code the link to get it to target the parent view?

Thank you

PopOver (Mobile)

answered on 29 Jul 2013

3 answers

261 views

Open a PopOver from a function

Being new to JavaScript and Kendo I apologise if this is an improper use;

I want to put up a model message; for example if a user deletes something I want to put up an 'Are You Sure' message over the top of the login view. This is a trivial exercise in .Net programming but, as I said, I am new to JavaScript and Kendo.

Looking through the Mobile Widgets the PopOver seems like a good way of doing of displaying a view over the top of another.
The demonstration shows how to display a PopOver in response to a button click but I cannot find any way of displaying it from a function.

Is this possible?
Keeping in mind this is a mobile; is there a better way to display?

Thanks for any pointers

Alan

PopOver (Mobile)

answered on 21 Jun 2013

1 answer

42 views

Different Sizes on Different Platform

Hi,

We need different sizes for the popover on different platforms (on iOS and Android).
Please suggest how to set different popup for the popover, thanks.

PopOver (Mobile)