Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
615
Missing vertical scrollbar in igCombo editable cell
posted

Hello,

Somehow my combo editors in my grid are missing their vertical scrollbars.  It's funny, because it looks like the area for the scrollbar has been reserved, but it's just a column of whitespace where the scrollbar should be.

I attached a screenshot and also a snippet of html which I believe points to the relevant portion of the page.  This is an out-of-the-box MVC5 project, so the only other CSS that may be conflicting is Bootstrap3.  I don't mind doing the troubleshooting myself, but honestly, I'm not sure where to begin.  Which CSS class should I be looking at in order to find the scrollbar settings?

Thank you!

no_scrollbar.zip
  • 615
    Verified Answer
    posted

    Nevermind, I just discovered that it's caused by Bootstrap 3's usage of border-box.  When I switch it to content-box my scrollbars show up.  Thanks!

    • 3595
      posted in reply to Kyle

      Hello Kyle,

      I am glad that you have been able to already resolve this issue.

      I will just add one more note which might be useful if you encounter similar issues in future. In order to revise more effectively your CSS and discover which styles affect a particular HTML document you might use a web tool as the inspect element in Firefox or the chrome developer tools:

      If any additional questions arise feel free to contact me again.

      • 235
        posted in reply to Kyle

        Kylemilner, thank you for the responses.  I tried both options for the CSS that you sent an neither shows the scrollbar correctly in the iggrid.  I assume there may be some diffferences between version 2013.2 and 2012.2.  Hopefully someone from Infragistics can chime in and tell me what is happening in 2012.2.

        • 615
          posted in reply to Kyle

          Forgot to add, I also have this CSS to handle box-sizing issues with the grid in general.  My previous post was for igcombo controls within the grid - I believe the following will take care of the specific issue with the pager:

          .ui-widget.ui-iggrid *, .ui-widget.ui-iggrid *:before, .ui-widget.ui-iggrid *:after {

          -webkit-box-sizing: initial !important;

          -moz-box-sizing: initial !important;

          box-sizing: content-box !important;

          }

          • 615
            posted in reply to Dan

            This is the CSS I ended up using (I'm on 2013.2):

            .ui-igcombo-list, .ui-igcombo-listitemholder, .ui-igcombo-listitem {

            -webkit-box-sizing: initial !important;

            -moz-box-sizing: initial !important;

            box-sizing: content-box !important;

            }

            • 235
              posted in reply to [Infragistics] Dimka

              I am using IgniteUI version 20122 (12.2.20122.2290) with Twitter Bootstrap 3.  I seem to be running into a similar problem as origional mentioned in this post.  However, I cannot change the Bootstrap's styling from "border-box".  I need to make the change so that only the grid is affected.  As mentioned before, the problem that I am seeing is that the pager dropdown in the grid does not show the scrollbar.  I have tried adding the following CSS to my local page file, but it does not seem to fix the issue.  Please let me know the exact styles to change.

               

              ui-widget.ui-iggrid

              *,

              .ui-widget.ui-iggrid

              *:before,

              .ui-widget.ui-iggrid

              *:after {

                 

              -webkit-box-sizing: content-box !important;

                 

              -moz-box-sizing: content-box !important;

                 

              box-sizing: content-box !important;

              }

              .ui-widget

              ,

              .ui-widget

              *:before,

              .ui-widget

              *:after {

                 

              -webkit-box-sizing: content-box !important;

                 

              -moz-box-sizing: content-box !important;

                 

              box-sizing: content-box !important;

              }

              .ui-widget-overlay

              {

                 

              -webkit-box-sizing: content-box !important;

                 

              -moz-box-sizing: content-box !important;

                 

              box-sizing: content-box !important;

              }

              .ui-iggrid-filterdd

              {

                 

              -webkit-box-sizing: content-box !important;

                 

              -moz-box-sizing: content-box !important;

                 

              box-sizing: content-box !important;

              }

              .ui-iggrid-pager

              {

                 

              -webkit-box-sizing: content-box !important;

                 

              -moz-box-sizing: content-box !important;

                 

              box-sizing: content-box !important;

              }