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

【问题标题】：Icon inside hidden Form in UI Bootstrap Popover causes other icon to be pushed down verticallyUI Bootstrap Popover中隐藏表单内的图标导致其他图标被垂直向下推
【发布时间】：2016-06-10 19:43:28
【问题描述】：

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

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

问题出现了，因为 paypal 图标实际上是用于生成 html 页面的隐藏表单。这种隐藏形式会导致 patreon 图标向下移动约 10 像素，并且不像正常情况下与 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 图标的位置设为相对并将其向上移动几个像素，但这仍然会使弹出框看起来太高，而不是它包含的元素。

感谢所有帮助！

【问题讨论】：

标签： css angularjs angular-ui-bootstrap

【解决方案1】：

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

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

【讨论】：

嗨，丹尼尔——这让弹出框看起来太高了——就像我说的那样，我已经试过了..

【解决方案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，但如何以及永远......

【讨论】：