1

Good day. I'm trying to use Anthony Terrien's jquery Knob with Zurb Foundation but it seems like the text input is broken. Here is a screenshot:

https://i.stack.imgur.com/3fRB7.png

As you can see, the input[type="text"] is in the lower left part of the page. I tried to make it in an empty HTML page and it works just fine so I assume that the problem is with the implementation of Foundation, but I can't find which part of it breaks the knob.

Here the HTML:

<div class="row">
        <div class="medium-12 column bpm">
            <div class="medium-5 medium-centered column">
                    <input type="text" value="100" class="dial">
            </div>
        </div>
    </div>

And the JS:

$('.dial').knob({

    'min': 0,
    'max': 200,
    'angleOffset': 45,
    'fgColor': '#cc0000',
    'font': 'Raleway',
    'fontWeight': '300',
    'thickness': .1
});
JasonMArcher
  • 14,195
  • 22
  • 56
  • 52
Patrick James Lim
  • 49
  • 3
  • 9
  • I tried to remove Foundation's CSS file and then the Knob worked fine, so the problem is really with Foundation's CSS styling. Now I just have to find which part of Foundation's CSS is affecting the Knob. – Patrick James Lim Apr 23 '14 at 19:34
  • Make sure the jquery knob css file is loaded after foundations css file. It might resolve foundation overwriting rules. – Steve Parish Apr 23 '14 at 23:28
  • jQuery knob doesn't have a css file. It uses .css() method to style the canvas. But because of your comment I know what to do next. – Patrick James Lim Apr 24 '14 at 03:37
  • Okay I solved the problem. Here's what happened: The foundation css file has a display:block on all of its text inputs. What I did was I removed all of the default styling of input[type="text"] inside the foundation.css file. All the styles of text inputs were removed though, so I'll just add them in my own style.css file. I don't think it's the best solution but at least it solved the problem. – Patrick James Lim Apr 24 '14 at 03:38
  • Update: In the end I just used the :not selector. – Patrick James Lim Apr 24 '14 at 03:49

2 Answers2

0

Okay I came up with a solution for now. Here's what I did. In the foundation.css file, I edited the display:block which is the cause of the problem. So I just used this:

input[type="text"]:not(.dial){
 /* All Foundation styles go here */
}
Patrick James Lim
  • 49
  • 3
  • 9
0

Updating foundation.css creates problems for updating over time. If anyone else runs into this I would suggest applying:

 style="display: inline;"

or creating a custom class and applying it to the knob by something like:

.knob-fix{
    display: inline !important; 
}
Bostwick
  • 696
  • 1
  • 12
  • 24