UI Bootstrap 中隐藏表单内的图标 Popover 导致其他图标被垂直向下推

Question

我有一个 uib-popover，其中包含供人们捐款的选项。弹出窗口中有两个图标 - 一个用于 paypal，一个用于 patreon。

当用户单击该图标时，会在 paypal/patreon 页面上打开一个新页面。

问题来了，因为paypal图标其实是一个隐藏的表单，用来生成html页面。这种隐藏形式导致 patreon 图标向下移动约 10px，而不是像平常那样与 paypal 图标平行。

这是弹出框模板的 html：

<script type="text/ng-template" id="donatePopoverTemplate.html">
  <div><!--

  --><form class="paypal-form" action="https://www.paypal.com/cgi-bin/webscr" method="post">
      <input type="hidden" name="cmd" value="_s-xclick">
      <input type="hidden" name="hosted_button_id" value="K2D7T7AWDFWT8">
      <input type="image" class="donate-svg" src="paypal.svg" border="0" name="submit">
    </form><!--

    --><img class="donate-svg" src="patreon.svg">

    <span style="display:inline-block; width:2px;"></span>
    <span class="popover-close popover-close-icon" ng-click="donate()" aria-hidden="true">&times;</span>

  </div>
</script>

我创建了一个 plnkr 来准确显示正在发生的事情： http://plnkr.co/edit/ojSmXkNBWOa0UmFWj10b

有人知道如何让两个图标保持在同一行吗？我已经尝试使 patreon 图标相对位置并将其向上移动几个像素，但这仍然使弹出窗口对于它包含的元素来说看起来太高了。

感谢所有帮助！

Answer 1

您只能在 patreon.svg 上使用相对定位和更改顶部。

element.style {
    position: relative;
    top: -9px;
}

Answer 2

我已经解决了这个问题，方法是将图像放入弹出窗口并创建一个隐藏表单。然后我们使用 ng-click() 来提交表单。

隐藏表格如下：

<form id="paypal-form" action="https://www.paypal.com/cgi-bin/webscr" method="post">
  <input type="hidden" name="cmd" value="_s-xclick">
  <input type="hidden" name="hosted_button_id" value="{{paypal_id}}">
</form>

这就是模板脚本的样子：

<script type="text/ng-template" id="donatePopoverTemplate.html">
  <div><!--

    --><img class="share-svg opacity80" style="width:24px;" src="/images/logos/donate/paypal.svg"
      uib-tooltip="Paypal" tooltip-placement="top" ng-click="donate('paypal')"><!--

    --><img class="share-svg patreon-svg opacity80" style="width:23px;" src="/images/logos/donate/patreon.svg"
      uib-tooltip="Patreon" tooltip-placement="top" ng-click="donate('patreon')">

    <span style="display:inline-block; width:2px;"></span>
    <span class="popover-close popover-close-icon" ng-click="closeDonatePopover()" aria-hidden="true">&times;</span>

  </div>
</script>

在 ng-click 中，我们提交如下表单：

document.getElementById('paypal-form').submit();

有点hacky，但是如何...

UI Bootstrap 中隐藏表单内的图标 Popover 导致其他图标被垂直向下推

Icon inside hidden Form in UI Bootstrap Popover causes other icon to be pushed down vertically

css

angularjs

angular-ui-bootstrap