NumericTextBox display:inline-block in html

[Trevor]

I have a test page set up for my issue.  http://http://www.ipapilot.org/test/zurbkendo.aspx

I know that this is because I am using the zurb foundation framework. When I take out the foundation css the numeric text box displays correctly. With Zurb it is 2 rows high if you will.

I wanted to fix this so I began looking at the css to fix it.  Finally I what I have realized is that I believe the kendo javascript is updating the html of the numeric text box element. This overrides ANY css I would want to throw at it to correct the display.

With foundation css the element has display:block in the html

Without foundation css the element has display:inline-block in the html.

 

What part of the javascript does this?  How do I get it to use display:inline-block?  I've tried a formreset.css kind of approach where I reset the css for input elements and such but I can't find the secret sauce. 

 Maybe my analysis is flawed as well.  I would appreciate any help in correcting this.

 

Thanks,

Trevor

[Plamen Lazarov]

Hello Trevor,

The described issue is caused by conflicting CSS styles. In this particular case, the <input> element, from which the NumericTextBox is created, should not have a custom display style applied, as it may lead to undesired side effects. You can try adding the Kendo UI stylesheets after the Foundation ones, so they might be able to take precedence, depending on the selectors' specificity. Alternatively, you need to ensure that the textboxes, from which NumericTextBox widgets are created, have a default inline or inline-block style applied. For example, this will work on your test page:

#fieldlist input {
    display: inline-block;
}

Regards,
Plamen Lazarov
Telerik

[Trevor]

Ok, I must have been too complex in trying to get specificity to work.

 I had tried:

 

input[type="text"].k-input {
    display: inline-block;

}

 

 Which hadn't worked. So it must have been a specificity thing.

  My kendo stylesheets were after the foundation ones also.

  I appreciate your help.

[Plamen Lazarov]

Hello Trevor,

The CSS rule should be applied to the <input> element, from which the widget is initialized. The style should also be in force before the widget initialization occurs. In the discussed example the <input> is the one with id currency. You can use the code snippet provided in my previous message or:

#currency {
  display: inline-block;
}

Surely, you may need to use a different CSS selector, depending on your actual scenario.

I hope this helps.

 

Regards,
Plamen Lazarov
Telerik