NumericTextBox display:inline-block in html

4 posts, 0 answers
  1. Trevor
    Trevor avatar
    9 posts
    Member since:
    Sep 2012

    Posted 02 Oct 2015 Link to this post

    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

  2. Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 06 Oct 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Trevor
    Trevor avatar
    9 posts
    Member since:
    Sep 2012

    Posted 06 Oct 2015 in reply to Plamen Lazarov Link to this post

    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.

  5. Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 08 Oct 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready