天道酬勤,学无止境

UIAlertController's popover is deformed

I'm presenting a list of options to the user using an UIAlertController from a UIToolbar with a preferred style of action sheet. When presented, the popover's arrow is cut off and its corners are rounded with two different radii:

Deformed UIAlertController popover

The code I'm using to present it is straight from the documentation, as far as I see it:

UIAlertController *alertController =
    [UIAlertController alertControllerWithTitle:@""
                                        message:@""
                                 preferredStyle:UIAlertControllerStyleActionSheet];
NSArray *actions = @[
    [UIAlertAction actionWithTitle:@"Take a Photo"
                             style:UIAlertActionStyleDefault
                           handler:^(UIAlertAction *action) {}],
    [UIAlertAction actionWithTitle:@"Choose from Album"
                             style:UIAlertActionStyleDefault
                           handler:^(UIAlertAction *action) {}],
    [UIAlertAction actionWithTitle:@"Cancel"
                             style:UIAlertActionStyleCancel
                           handler:^(UIAlertAction *action) {}]
];
for (UIAlertAction *action in actions) {
    [alertController addAction:action];
}

if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
    alertController.modalPresentationStyle = UIModalPresentationPopover;
    alertController.popoverPresentationController.barButtonItem = myBarButtonItem;
}
[self presentViewController:alertController animated:YES completion:nil];

Is this a known bug? I've tried a physical iPad on iOS 8.2 and the simulator on iOS 8.1 and 8.2.

评论

Try explicitly setting the permittedArrowDirections.

For example in Swift:

actionSheet.popoverPresentationController?.permittedArrowDirections = UIPopoverArrowDirection.Down;

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 如何通过单击外部消除Twitter Bootstrap弹出窗口?(How to dismiss a Twitter Bootstrap popover by clicking outside?)
    问题 我们可以使弹出窗口与模式一样被消除吗? 当用户单击它们外部的某个位置时使它们关闭? 不幸的是,我不能只使用真实的模式而不是popover,因为modal意味着position:fixed,这将不再是popover。 :( 回答1 更新:更为健壮的解决方案:http://jsfiddle.net/mattdlockyer/C5GBU/72/ 对于仅包含文本的按钮: $('body').on('click', function (e) { //did not click a popover toggle or popover if ($(e.target).data('toggle') !== 'popover' && $(e.target).parents('.popover.in').length === 0) { $('[data-toggle="popover"]').popover('hide'); } }); 对于使用图标的按钮(此代码在Bootstrap 3.3.6中存在错误,请参见此答案中的修复程序) $('body').on('click', function (e) { //did not click a popover toggle, or icon in popover toggle, or popover if ($(e.target).data(
  • 显示一个弹出窗口并隐藏其他弹出窗口(Show one popover and hide other popovers)
    问题 我有几个按钮,每个按钮都需要一个弹出框。 我想要这样: 当我的用户单击其中之一时,我希望其他人被隐藏。 因此只显示一个弹出窗口检查并帮助我纠正此示例plz: var mycontent='<div class="btn-group"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div>' $('.btn').popover({ html: true, content:mycontent, trigger: 'manual' }).click(function(e) { $(this).popover('toggle'); e.stopPropagation(); }); $('html').click(function(e) { $('.btn').popover('hide'); }); 我的html: <ul> <li> <a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" >Popover</a> </li> <li> <a href="#" class="btn" data-toggle=
  • 如何在 Bootstrap 的弹出窗口中插入关闭按钮(How to insert close button in popover for Bootstrap)
    问题 JS: $(function(){ $("#example").popover({ placement: 'bottom', html: 'true', title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">×</button>', content : 'test' }) $('html').click(function() { $('#close').popover('hide'); }); }); HTML: <button type="button" id="example" class="btn btn-primary" ></button> 我正在写你的代码没有显示你的弹出窗口。 有人遇到过这个问题吗? 回答1 您需要正确标记 <button type="button" id="example" class="btn btn-primary">example</button> 然后,一种方法是将 close-handler 附加到元素本身内部,以下工作: $(document).ready(function() { $("#example").popover({ placement: 'bottom'
  • Bootstrap Popover内容不能动态更改(Bootstrap popover content cannot changed dynamically)
    问题 我使用如下代码: $(".reply").popover({ content: "Loading...", placement: "bottom" }); $(".reply").popover("toggle"); 可以正确创建弹出窗口及其内容。 我想在不关闭弹出窗口的情况下将新数据加载到弹出窗口中。 我尝试了以下方法: var thisVal = $(this); $.ajax({ type: "POST", async: false, url: "Getdes", data: { id: ID } }).success(function(data) { thisVal.attr("data-content", data); }); 调用之后,元素中的数据将更改,但显示的弹出窗口中的数据不会更改。 我应该怎么做? 回答1 如果您像这样抓取popover实例: var popover = $('.reply').data('bs.popover'); 然后,要重绘弹出窗口,请使用.setContent()方法: popover.setContent(); 我发现浏览源代码:https://github.com/twitter/bootstrap/blob/master/js/popover.js 因此,在您的示例中,请尝试: thisVal.attr('data
  • 悬停时如何使Bootstrap弹出窗口保持活动状态?(How can I keep Bootstrap popovers alive while being hovered?)
    问题 I am using a Bootstrap popover to create a hover card showing user info, and I am triggering it on mouseover of a button. I want to keep this popover alive while the popover itself is being hovered, but it disappears as soon as the user stops hovering over the button. How can I do this? $('#example').popover({ html : true, trigger : 'manual', content : function() { return '<div class="box">Popover</div>'; } }); $(document).on('mouseover', '#example', function(){ $('#example').popover('show'); }); $(document).on('mouseleave', '#example', function(){ $('#example').popover('hide'); }); <script
  • Bootstrap 弹出窗口,点击外部时隐藏?(Bootstrap popover, hide on click outside?)
    问题 使用引导弹出窗口,现在我试图让这段代码在弹出窗口外单击以关闭弹出窗口: $('body').on('click', function (e) { $('[data-toggle="popover"]').each(function () { //the 'is' for buttons that trigger popups //the 'has' for icons within a button that triggers a popup if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) { $(this).popover('hide'); } }); }); 但是当我使用这部分时,我可以关闭弹出窗口但我不能点击其他按钮,有人知道我该怎么做吗? 所有按钮: <a href="#" class="btn btn-xs btn-primary" data-toggle="popover">This opens popover</a> <a href="#" class="btn btn-xs btn-primary">Other link</a> <- Doesn't work <a href="#"
  • 动态地将类添加到Bootstrap的“ popover”容器中(Dynamically add a class to Bootstrap's 'popover' container)
    问题 我已经对StackOverflow和Google进行了彻底的搜索,但都空了。 因此,如果已经提出并解决此问题,请提前道歉。 注意:我是jQuery的新手,所以我不确定如何自己编写。 我敢肯定这是一段简单的代码,但是我不能将其束之高阁。 我要执行的操作是使用data-元素(例如: data-class或类似元素)将新类(或ID,我不再挑剔!)附加到顶级弹出框<div> 。 我目前拥有的代码如下: jQuery的: $('a[rel=popover]') .popover({ placement : 'bottom', trigger : 'hover' }) .click(function(e) { e.preventDefault() }); HTML: <a href="" rel="popover" data-class="dynamic-class" title="Title goes here" data-content="Content goes here"> 理想情况下,我会吐出的那种HTML是这样的: <div class="popover ... dynamic-class"> <!-- remainder of the popover code as per usual --> </div> 这是我能做的吗? 引导程序站点中有关弹出窗口的文档有点稀疏
  • Bootstrap Popover销毁和重新创建仅每秒钟一次(Bootstrap popover destroy & recreate works only every second time)
    问题 我想以编程方式销毁并重新创建特定的Bootstrap弹出窗口。 所以我要做的是: $('#popoverspan').popover('destroy'); $('#popoverspan').popover({placement : 'bottom', trigger : 'hover', content : 'Here it is!'}); 它仅每隔第二次工作一次。 我认为这是销毁弹窗的时间问题,但是即使在两行之间添加延迟也无济于事。 我在JSFiddle中重新创建了该问题:http://jsfiddle.net/Lfp9ssd0/10/ 为什么会这样呢? 有人建议它可以工作,例如在Twitter Bootstrap Popover中,它通过Ajax和Bootstrap Popover重新初始化来动态生成内容(以刷新内容) 当我跳过销毁操作时,它工作得很好,但是我不确定在不破坏已经存在的元素的情况下为元素创建另一个弹出框时会发生什么。 是重新初始化还是在失去对旧弹出窗口的访问权限的情况下创建了新的弹出窗口? 回答1 我自己解决了。 显然.popover('destroy')是异步的,并且另一个popover的立即创建失败,而先前的.popover('destroy')被销毁了。 我尝试通过使用alert添加延迟,但由于某种原因而失败。
  • 如何使用HTML内容创建AngularJS UI引导程序弹出窗口?(How do I create an AngularJS UI bootstrap popover with HTML content?)
    问题 我想创建一个带有预标记的引导弹出窗口,该预标记包含已预定义的JSON对象。 天真的实现, <span popover='<pre>{[ some_obj | json:" " ]}</pre>' popover-trigger='mouseenter'> 在将内容插入弹出窗口之前先对其进行转义。 用HTML内容指定弹出框的最佳方法是什么? 回答1 更新: 从中可以看出,您现在应该能够执行此操作而不必覆盖默认模板。 原来的: 从1.2版开始, ng-bind-html-unsafe已被删除。 您应该使用$ sce服务参考。 这是用于创建可信HTML的过滤器。 MyApp.filter('unsafe', ['$sce', function ($sce) { return function (val) { return $sce.trustAsHtml(val); }; }]); 这是使用此过滤器的覆盖的Angular Bootstrap 0.11.2模板 // update popover template for binding unsafe html angular.module("template/popover/popover.html", []).run(["$templateCache", function ($templateCache) {
  • 隐藏后如何保留引导弹出窗口的内容,或者如何真正隐藏它(How to keep content of bootstrap popover after hiding it, or how to really hide it)
    问题 我注意到隐藏时的 boostrap 弹出窗口似乎会破坏内容并在您显示时重做。 请看一下这个例子。 如果您在输入上书写,隐藏弹出框并再次显示,输入将为空。 它不应该只是不显示它然后再次显示它而不使用内容吗? 避免这种情况的最佳方法是什么? 我是否必须display: none自己display: none弹出窗口,还是有引导方式? 请注意,我对存储和保留输入的文本不感兴趣,这不是这个问题的重点,我想保留 html,因为它在内部加载并激活了 jquery 插件。 回答1 我也有类似的需求。 我正在使用 popover 来显示就地编辑表单字段。 保存值后,如果您再次单击弹出框,则会复制相同的源 HTML 并选择旧值。 我尝试设置更新值和其他一些东西,但没有任何效果,或者我对结果不满意。 我想出了这个解决方案,而不是让显示/隐藏事件触发,而是手动显示和隐藏弹出窗口。 $(document).on('click', '.ajax-value', function() { // We only want to init the popover once if (typeof $(this).data('bs.popover') == "undefined") { // Init the popover and show immediately $(this).popover({
  • 更改Bootstrap弹出窗口的宽度(Changing the width of Bootstrap popover)
    问题 我正在使用Bootstrap 3设计页面。我试图在输入元素上使用带有placement: right的弹出框。 新的Bootstrap可确保如果您使用form-control ,则基本上具有全角输入元素。 HTML代码如下所示: <div class="row"> <div class="col-md-6"> <label for="name">Name:</label> <input id="name" class="form-control" type="text" data-toggle="popover" data-trigger="hover" data-content="My popover content.My popover content.My popover content.My popover content." /> </div> </div> 我认为popover的宽度太小,因为它们在div中没有​​剩余的任何宽度。 我想在左侧输入表单,在右侧显示宽弹出窗口。 通常,我正在寻找无需覆盖Bootstrap的解决方案。 附加的JsFiddle。 第二个输入选项。 还没有使用jsfiddle,所以不知道,但是尝试增加输出框的大小以查看结果,在较小的屏幕上甚至看不到它。 http://jsfiddle.net/Rqx8T/ 回答1 使用CSS增加宽º
  • 单击屏幕上的任意位置关闭所有 Angular JS Bootstrap 弹出窗口?(Close all Angular JS Bootstrap popovers with click anywhere on screen?)
    问题 我正在使用 Angular 指令进行引导。 我有一个弹出窗口,如他们的示例所示: <button popover="Hello, World!" popover-title="Title" class="btn btn-default ng-scope">Dynamic Popover</button> 当您再次单击该按钮时它会关闭。 当用户点击任何地方时,我想关闭它——以及任何其他打开的弹出窗口。 我没有看到内置的方法来做到这一点。 回答1 angular.element(document.body).bind('click', function (e) { var popups = document.querySelectorAll('.popover'); if(popups) { for(var i=0; i<popups.length; i++) { var popup = popups[i]; var popupElement = angular.element(popup); if(popupElement[0].previousSibling!=e.target){ popupElement.scope().$parent.isOpen=false; popupElement.remove(); } } } }); 回答2 正在跟踪此功能请求 (https:/
  • 隐藏显示的引导程序弹出框后,需要单击两次(need click twice after hide a shown bootstrap popover)
    问题 $('#popoverlink').popover(); $("#popoverhide").click(function() { $("#popoverlink").popover("hide"); }); #popoverlink { position: absolute; top: 100px; left: 100px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <a href="#" id="popoverlink" class="btn" rel="popover" title="Some title">Popover</a> <a href="#" id="popoverhide" class="btn" rel="popover" title
  • Twitter Bootstrap弹出窗口中的HTML(HTML inside Twitter Bootstrap popover)
    问题 我正在尝试在自举弹出窗口中显示HTML,但不知为何它不起作用。 我在这里找到了一些答案,但这对我不起作用。 如果我做错了事,请告诉我。 <script> $(function(){ $('[rel=popover]').popover({ html : true, content: function() { return $('#popover_content_wrapper').html(); } }); }); </script> <li href="#" id="example" rel="popover" data-content="" data-original-title="A Title"> popover </li> <div id="popover_content_wrapper" style="display: none"> <div>This is your div content</div> </div> 回答1 您不能使用<li href="#"因为它属于<a href="#" ,这就是为什么它不起作用的原因,请对其进行更改,一切都很好。 这是正在工作的JSFiddle ,它向您展示了如何创建引导弹出窗口。 代码的相关部分如下: HTML: <!-- Note: Popover content is read from "data-content"
  • Bootstrap 3 Popover箭头和框的位置(Bootstrap 3 Popover arrow and box positioning)
    问题 在单击链接之前,我正在使用Bootstrap 3弹出窗口显示有关悬停链接的信息。 目前,它正在运行,但是,链接是从页面顶部的下拉菜单中显示的。 当第一个链接具有很多有关它的信息时,弹出窗口的顶部消失在页面顶部,因此您看不到它的内容。 我正在尝试使弹出框箭头显示在弹出框的左上角(而不是现在正在做的左上角),并且如果可行的话,弹出框的顶部与箭头齐平。 $('.popOver').popover({ trigger: 'hover', html: true }); 上面的方法工作正常,但我不认为任何弹出菜单选项都可以在这里为我提供帮助。 它是我需要更改的CSS,但是发布的内容相当广泛,所以我只是在寻找一个了解Bootstrap的人来为我指明正确的方向。 回答1 您可以自定义弹出.popover的位置,也可以自定义弹出.popover显示后箭头的方向来操纵.popover CSS。 例如,这会将弹出式窗口的顶部向下推22个像素。 $('[data-toggle=popover]').on('shown.bs.popover', function () { $('.popover').css('top',parseInt($('.popover').css('top')) + 22 + 'px') }) 工作演示:http://bootply.com/88325 回答2
  • Bootstrap Popover follow trigger element on page resize
    FIDDLE HERE I have tried various answers from this forum without success. I am trying to get my bootstrap popover to "follow" the element that triggered it on page resize. Challenge is the popovers are dynamically generated so I cannot give a specific id. My code repositions the popover but it flickers unpleasantly during resize and it ends with the popover invisible. How do I hide the popover then show it again when resize is completed? My code is: // Reposition popover when screen changes size $(window).on('resize', function() { $('[data-toggle="popover"], [data-original-title]').each
  • 如何更新bootstrap popover文本?(How to update bootstrap popover text?)
    问题 我正在使用bootstrap-popover在元素旁边显示一条消息。 如果我想在第一次之后在弹出窗口中显示其他文本,则文本不会更改。 用新文本重新实例化弹出框不会覆盖。 请参阅此js小提琴以获取实时示例: http://jsfiddle.net/RFzvp/1/ (第一次单击后,警报中的消息和dom中的消息不一致)。该文档对如何解除绑定有一些帮助:http://twitter.github.com/bootstrap/javascript.html#popovers 我使用的是这个错误吗? 关于如何解决的任何建议? 谢谢 回答1 Hiya请在这里查看工作演示:http://jsfiddle.net/4g3Py/1/ 我已进行更改以获取您想要的结果。 :) 我认为您已经知道自己在做什么,但是从我的角度来看一些示例建议,如下所示:http://dl.dropbox.com/u/74874/test_scripts/popover/index.html#-分享此链接可以为您提供如果您将看到源通知属性属性为data-content但具有不同弹出窗口的其他链接的想法,但是您希望通过以下更改来工作。 有一个不错的,希望这会有所帮助。 D'uh不要忘记投票并接受答案:) jQuery代码 var i = 0; $('a#test').click(function() { i += 1; $
  • 引导程序.popover('show')、. popover('hide')无法正常工作。 绑定到点击作品(Bootstrap .popover('show'), .popover('hide') not working. Binding it to click works)
    问题 我有一个已绑定到弹出框的按钮。 当有人单击弹出窗口中的表情符号之一时,我想隐藏弹出窗口。 但是, $("#smiley").popover('hide')无效。 不幸的是,我无法使用准系统代码来复制它-它仅在现场站点https://coinchat.org上发生 相关代码: $("#smiley").popover({html: true, trigger: 'click', placement: 'top', content: smileyContent, title: 'Smilies'}); 稍后在一个函数中.. $("#smiley").popover('hide'); // not working 回答1 在https://inputs.io/js/buttons.js中,jQuery插件jQuery.fn.popover在某种类型的加载事件上被覆盖,因此,此时的$("#smiley").popover("hide")不再调用bootstrap,而是调用inputs.io提供的插件。 代码片段: Inputsio.load = function(){ (function(){(function(e){return e.fn.popover=function(t) 确实,将jQuery插件名称空间用于特定于应用程序的代码确实令人反感。 临时修补程序可以是$("
  • 如何在动态元素上绑定引导弹出窗口(How to bind bootstrap popover on dynamic elements)
    问题 我正在动态列表上使用Twitter Bootstrap的弹出窗口。 列表项有一个按钮,当我单击该按钮时,它将显示弹出窗口。 当我在非动态环境下进行测试时,它可以正常工作。 这是我的非动态列表JavaScript $("button[rel=popover]").popover({ placement : 'right', container : 'body', html : true, //content:" <div style='color:red'>This is your div content</div>" content: function() { return $('#popover-content').html(); } }) .click(function(e) { e.preventDefault(); }); 但是,它在动态列表上效果不佳。 当我单击“两次”按钮时,它可以显示,并且仅显示我单击第一时间的列表项之一。 我的HTML: <ul id="project-list" class="nav nav-list"> <li class='project-name'> <a >project name 1 <button class="pop-function" rel="popover" ></button> </a> </li> <li class=
  • 如何检查 twitter bootstrap popover 是否可见?(How to check whether a twitter bootstrap popover is visible or not?)
    问题 我有一个元素$('#anElement')附加了一个潜在的弹出$('#anElement') ,比如 <div id="anElement" data-original-title="my title" data-trigger="manual" data-content="my content" rel="popover"></div> 我只是想知道如何检查弹出窗口是否可见:如何使用 jQuery 完成此操作? 回答1 如果此功能未内置到您正在使用的框架中(它不再是twitter bootstrap,只是引导程序),那么您将必须检查生成/修改的 HTML 以创建引导程序的此功能。 查看 popupver 文档。 那里有一个按钮,您可以使用它查看它的运行情况。 这是检查在幕后工作的 HTML 元素的好地方。 打开你的 chrome 开发者工具或 firebug(firefox),看看它发生了什么。 看起来按钮后面只是插入了一个<div> - <div class="popover fade right in" style="... /> 您所要做的就是检查该元素是否存在。 根据你的标记是如何编写的,你可以使用这样的东西 - if ($("#popoverTrigger").next('div.popover:visible').length){ // popover is