1

Some prereqs:

Hello everyone, first let me direct you to the site in question: http://hws-1.apphb.com/Account/Smartplan

On top of the table you will notice a blue and green dropdown button as provided by Zurb's Foundation 4.

We are using ASP.net MVC with the Zurb Foundation w/ SASS nuget package.

The problem:

If you click on the dropdown buttons you will notice that they appear halfway through the buttons. The intended functionality is to begin right underneath them as shown on the zurb dropdown button docs.

I've done a bit of research and have found posts relating to dropdown issues, but they were all a slightly different problem (the drop down showing way off), and were on an older version of foundation 4. I am using 4.3.1 as provided by the Nuget package. I have read that the issues regarding the dropdown have been resolved since 4.1.6 as per this thread mostly:

https://github.com/zurb/foundation/issues/1789

I am looking to find the cause of this problem, instead of hardcoding a CSS value to push it farther down. I have been at it for the past few days trying multiple fixes but nothing has worked.

Has anyone experienced this issue or can provide some insight? Many thanks to all who reply.

4

2 回答 2

1

I know the calculation is actually being done in javascript but as a quick workaround, go to your CSS file 

.f-dropdown {
    margin-top: 33px;
}

And it should fix your issue

于 2013-10-09T20:04:32.310 回答
0

i see the your source code... problem is zepto.js is overriding some dropdown.js protocols..

remove your zepto.js

   <script src="https://media.hardworkingsoftware.com/Scripts/zepto.js"></script>

When you are using foundation add the zepto.js whenever it is required..

   <script>
   document.write('<script src=https://media.hardworkingsoftware.com/Scripts/'
   + ('__proto__' in {} ? 'zepto' : 'jquery')
   + '.js><\/script>');
   </script>

for more see this link http://foundation.zurb.com/docs/javascript.html

于 2013-10-10T06:36:59.533 回答