I don't understand why the layout of the Hierarchical Datagrid looks like this:
Whats wrong?
- Next to "Show" the page dropdownlist is beneath the textbox for number of records.
- Columnnames are not readable. Why arent they solid black or something?
Thanks in advance for helping good people of Infragistics.
Hi DannyvdK ,
Thank you for the screenshot. I have been looking into it still I am not sure what may cause this issue on your side. Could you please provide me with a small test sample where this issue is reproducible so I can investigate it further. Do you use some custom themes on the igGrid?
Thanks in advance.
Elena,
I have found the culprit:
@* <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="stylesheet" type="text/css" />*@
I switched off the following CSS stylesheets. I don't know exactly which 1 of the 3 is interfering with the looks of the grid. But I've put these in comment. The grid looks like the one in the tutorial now.
Hey Elena,
Thank you for picking up my question.
I have not used custom themes on the igGrid per se, but I do have a CSS stylesheet. Do you think this stylesheet may cause the problem? I've copy/pasted my stylesheet below:
/*----------------------------------------------------------The base color for this template is #5c87b2. If you'd liketo use a different color start by replacing all instances of#5c87b2 with your new color.----------------------------------------------------------*/body{ background-color: #5c87b2; font-size: .85em; font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif; margin: 0; padding: 0; color: #696969;}a:link{ color: #034af3; text-decoration: underline;}a:visited{ color: #505abc;}a:hover{ color: #1d60ff; text-decoration: none;}a:active{ color: #12eb87;}p, ul{ margin-bottom: 20px; line-height: 1.6em;}header, footer, nav, section{ display: block;}/* HEADINGS ----------------------------------------------------------*/h1, h2, h3, h4, h5, h6{ font-size: 1.5em; color: #000;}h1{ font-size: 2em; padding-bottom: 0; margin-bottom: 0;}h2{ padding: 0 0 10px 0;}h3{ font-size: 1.2em;}h4{ font-size: 1.1em;}h5, h6{ font-size: 1em;}/* PRIMARY LAYOUT ELEMENTS ----------------------------------------------------------*//* you can specify a greater or lesser percentage for the page width. Or, you can specify an exact pixel width. */.page{ width: 90%; margin-left: auto; margin-right: auto;}header, #header{ position: relative; margin-bottom: 0px; color: #000; padding: 0;}header h1, #header h1{ font-weight: bold; padding: 5px 0; margin: 0; color: #fff; border: none; line-height: 2em; font-size: 32px !important; text-shadow: 1px 1px 2px #111;}#main{ padding: 30px 30px 15px 30px; background-color: #fff; border-radius: 4px 0 0 0; -webkit-border-radius: 4px 0 0 0; -moz-border-radius: 4px 0 0 0;}footer, #footer{ background-color: #fff; color: #999; padding: 10px 0; text-align: center; line-height: normal; margin: 0 0 30px 0; font-size: .9em; border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px;}/* TAB MENU ----------------------------------------------------------*/ul#menu{ border-bottom: 1px #5C87B2 solid; padding: 0 0 2px; position: relative; margin: 0; text-align: right;}ul#menu li{ display: inline; list-style: none;}ul#menu li#greeting{ padding: 10px 20px; font-weight: bold; text-decoration: none; line-height: 2.8em; color: #fff;}ul#menu li a{ padding: 10px 20px; font-weight: bold; text-decoration: none; line-height: 2.8em; background-color: #e8eef4; color: #034af3; border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0;}ul#menu li a:hover{ background-color: #fff; text-decoration: none;}ul#menu li a:active{ background-color: #a6e2a6; text-decoration: none;}ul#menu li.selected a{ background-color: #fff; color: #000;}/* FORM LAYOUT ELEMENTS ----------------------------------------------------------*/fieldset{ border: 1px solid #ddd; padding: 0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0;}legend{ font-size: 1.2em; font-weight: bold;}textarea{ min-height: 75px; resize: none;}input[type="text"], input[type="password"]{ border: 1px solid #ccc; padding: 2px; font-size: 1.2em; color: #444; width: 100%;}select{ border: 1px solid #ccc; padding: 2px; font-size: 1.2em; color: #444;}input[type="submit"]{ font-size: 1.2em; padding: 5px;}/* TABLE----------------------------------------------------------*/table{ border: solid 0px #e8eef4; border-collapse: collapse; width: 100%;}table td{ padding: 5px; border: solid 0px #e8eef4;}table th{ padding: 6px 5px; text-align: left; background-color: #e8eef4; border: solid 0px #e8eef4;}table td#label{ width: 25%;}table td#small-label{ width: 10px;}table td#checkbox-label{ text-align: left;}table td#search-label{ text-align: right;}/* MISC ----------------------------------------------------------*/.clear{ clear: both;}.error{ color: Red;}nav, #menucontainer{ margin-top: 40px;}div#logo{ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 0px solid; background-color: #F5F5F5; margin-right: 5px;}img#logo{ padding: 5px;}div#title{ display: block; float: left; text-align: left;}#logindisplay{ font-size: 1.1em; display: block; text-align: right; margin: 10px; color: White;}#logindisplay a:link{ color: white; text-decoration: underline;}#logindisplay a:visited{ color: white; text-decoration: underline;}#logindisplay a:hover{ color: white; text-decoration: none;}/* Styles for validation helpers-----------------------------------------------------------*/.field-validation-error{ color: #ff0000;}.field-validation-valid{ display: none;}.input-validation-error{ border: 1px solid #ff0000; background-color: #ffeeee;}.validation-summary-errors{ font-weight: bold; color: #ff0000;}.validation-summary-valid{ display: none;}/* Styles for editor and display helpers----------------------------------------------------------*/.display-label, .editor-label{ margin: 0 0 0 0; font-weight: bold;}.display-label label{ text-align: right;}.display-field, .editor-field{ margin: 0 0 0 0; width: 99%;}.editor-multilinetextbox-field{ width: 100%;}.datafield{ width: 100px;}.text-box{ width: 30em;}.text-box.multi-line{ height: 6.5em; width: 100%;}.tri-state{ width: 6em;}.search-btn{ float: right; margin-top: 5px;}.save-btn{ float: right; margin-top: 5px;}div#template{ width: 100%; background-color: lightblue;}div#nopatient{ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid; border-color: Red; width: 100%; text-align: right; background-color: #FFFF99;}label#nopatientlabel{ padding: 5px;}