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!
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.
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;
}
This is the CSS I ended up using (I'm on 2013.2):
.ui-igcombo-list, .ui-igcombo-listitemholder, .ui-igcombo-listitem {
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,
*:after {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
.ui-widget
,
.ui-widget-overlay
{
.ui-iggrid-filterdd
.ui-iggrid-pager
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:
https://developers.google.com/chrome-developer-tools/docs/css-preprocessors
http://www.wikihow.com/Use-the-Inspect-Element-in-Mozilla-Firefox
If any additional questions arise feel free to contact me again.