Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Eo Grid Scrollbars

Eo Grid Scrollbars Options
Previous Topic · Next Topic
oeoeoe
Posted: Thursday, February 17, 2011 11:28:15 AM
Rank: Member
Groups: Member

Joined: 10/13/2010
Posts: 11
Hi,

I'd like to have the grids height and width fit to it's content.

In IE everything works fine but in other Browsers (Mozilla, Chrome, Safari and Opera) always the Scrollbar appears.... (even if witdth and height of grid is many pixels bigger than it's content)??????

If I put Scrollbars to none no more grid appears...

Any solition?

Thx in advance
oeoeoe
Back to top
 
eo_support
Posted: Thursday, February 17, 2011 12:08:00 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

We tested and no ScrollBar would appear if the Grid's width and height is bigger the its content. If this is a not what you are seeing, please try to isolate the problem into a test page and we will be happy to take a look.

Thanks!
Back to top
 
oeoeoe
Posted: Friday, February 18, 2011 4:13:35 AM
Rank: Member
Groups: Member

Joined: 10/13/2010
Posts: 11
Standard Grid Style 2 Scrollbars = "Auto" or "None"
Quote:

<eo:Grid ID="Grid1" runat="server" BorderColor="#C7D1DF" BorderWidth="1px"
ColumnHeaderAscImage="00050303" ColumnHeaderDescImage="00050304"
ColumnHeaderDividerImage="00050302" FixedColumnCount="1" Font-Bold="False"
Font-Italic="False" Font-Names="Verdana" Font-Overline="False" Font-Size="9pt"
Font-Strikeout="False" Font-Underline="False" GridLineColor="199, 209, 223"
GridLines="Both" Height="150px" ItemHeight="19" Width="515px" ScrollBars=">
<ItemStyles>
<eo:GridItemStyleSet>
<ItemStyle CssText="background-color: white" />
<ItemHoverStyle CssText="background-image: url(00050206); background-repeat: repeat-x" />
<SelectedStyle CssText="background-image: url(00050207); background-repeat: repeat-x" />
<CellStyle CssText="padding-left:8px;padding-top:2px; color:#336699;white-space:nowrap;" />
</eo:GridItemStyleSet>
</ItemStyles>
<ColumnHeaderStyle CssText="background-image:url('00050301');padding-left:8px;padding-top:2px;font-weight: bold;color:white;" />
<Columns>
<eo:StaticColumn HeaderText="Posted By" DataField="PostedBy" Width="200"></eo:StaticColumn>
<eo:StaticColumn Width="300" HeaderText="Topic" DataField="Topic"></eo:StaticColumn>
</Columns>
<ColumnTemplates>
<eo:TextBoxColumn>
<TextBoxStyle CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 8.75pt; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; FONT-FAMILY: Tahoma" />
</eo:TextBoxColumn>
<eo:DateTimeColumn>
<DatePicker ControlSkinID="None" DayCellHeight="16" DayCellWidth="19"
DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True"
SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
TitleRightArrowImageUrl="DefaultSubMenuIcon">
<PickerStyle CssText="border-bottom-color:#7f9db9;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#7f9db9;border-left-style:solid;border-left-width:1px;border-right-color:#7f9db9;border-right-style:solid;border-right-width:1px;border-top-color:#7f9db9;border-top-style:solid;border-top-width:1px;font-family:Courier New;font-size:8pt;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;" />
<CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-size: 9px; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid; font-family: tahoma" />
<TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" />
<TitleArrowStyle CssText="cursor:hand" />
<MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px" />
<DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid" />
<DayStyle CssText="font-family: tahoma; font-size: 12px; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DayHoverStyle CssText="font-family: tahoma; font-size: 12px; border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" />
<TodayStyle CssText="font-family: tahoma; font-size: 12px; border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" />
<SelectedDayStyle CssText="font-family: tahoma; font-size: 12px; background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DisabledDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<OtherMonthDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
</DatePicker>
</eo:DateTimeColumn>
<eo:MaskedEditColumn>
<MaskedEdit ControlSkinID="None"
TextBoxStyle-CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; font-family:Courier New;font-size:8pt;">
</MaskedEdit>
</eo:MaskedEditColumn>
</ColumnTemplates>
<FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
</eo:Grid>




Page Load
Quote:

DataTable dTTest = new DataTable();
dTTest.Columns.Add("PostedBy", typeof(string));
dTTest.Columns.Add("Topic", typeof(string));

dTTest.Rows.Add("oeoeoe", "Grid Scroll appears....");
dTTest.Rows.Add("oeoeoe", ":(");
dTTest.Rows.Add("oeoeoe", "IE it works...");
dTTest.Rows.Add("oeoeoe", "...");
dTTest.Rows.Add("oeoeoe", "..");
dTTest.Rows.Add("oeoeoe", ".");

Grid1.DataSource = dTTest;
Grid1.DataBind();


Result
IE Scrollbars None -> ok
IE Scrollbars Auto -> ok
Safari Scrollbars None -> nothing appears
Safari Scrollbars Auto -> Scollbars appears....

Height and With are both about 10px bigger than it's content....

Thx
Back to top
 
eo_support
Posted: Friday, February 18, 2011 7:53:42 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

We tested your code on Safari and it works fine.

Do not set the scrollbar to "None". That does not work. Always use "Auto". You will also want to increase the extra space a little bit, 10px is too small. The basic rule is it needs to be bigger than the scroll bar itself. The reason is the scroll bar appears as long as it "can" scroll. Even if the Grid frame is slightly bigger than its content, the "available" space can be smaller than the contents once the scroll bar is added. In that case the scroll bar will find that it indeed can scroll and will choose to stay.

Thanks!
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.