Post #306,123
3/24/09 5:13:44 PM
|
This just blows my mind
I have a page with a couple of third party controls by infragistics, one of which is an UltraWebGrid. I've been containing everything within <div> tags and setting properties with the CSS. One of the columns in the grid is set as "Sortable". When I click on the sortable column's header to re-display the data from ascending to descending, ALL of the controls on the page resize themselves larger.
Just about everything on the page has their sizes set as percentages in the CSS - except for the <divContainer> which has hard-coded height and width sizes in pixels.
I haven't a clue as to why this is happening, let alone how to correct it. I've never seen this happen before and neither has my coworker.
Can anyone offer some suggestions as to what I should look at?
"Chicago to my mind was the only place to be. ... I above all liked the city because it was filled with people all a-bustle, and the clatter of hooves and carriages, and with delivery wagons and drays and peddlers and the boom and clank of freight trains. And when those black clouds came sailing in from the west, pouring thunderstorms upon us so that you couldn't hear the cries or curses of humankind, I liked that best of all. Chicago could stand up to the worst God had to offer. I understood why it was built--a place for trade, of course, with railroads and ships and so on, but mostly to give all of us a magnitude of defiance that is not provided by one house on the plains. And the plains is where those storms come from."
-- E.L. Doctorow
|
Post #306,131
3/24/09 7:02:54 PM
|
any chance the controls are being sorted?
|
Post #306,133
3/24/09 7:08:37 PM
|
How is "sortable" implemented?
Is it all client side or is there a server round trip? If the former, look at the JS that is generated for the column header or whatever it is you click to sort and see what it is doing.
Also, you could have some sort of conflict with any styling generated by the control and set by its properties vs. and styling you are applying via your separate CSS. This article discusses that:
http://devcenter.inf...px?ArticleID=8643
|
Post #306,139
3/24/09 9:35:47 PM
|
Re: How is "sortable" implemented?
The sorting capability is set in the VB.Net code behind, but when running the program it is all done within the grid on the client. There is no round trip to the server when the user clicks on the column header to resort the data, nor is there any Javascript on the page being used by the control.
Here is the code to allow sorting:
'--- set up so that the YEAR column will be used to sort the data in the grid
WebGrid.DisplayLayout.AllowSortingDefault = AllowSorting.OnClient
WebGrid.DisplayLayout.HeaderClickActionDefault = HeaderClickAction.SortSingle
WebGrid.Columns.FromKey("Year").IsSortable()
WebGrid.Columns.FromKey("Year").SortIndicator = SortIndicator.Ascending
There is no styling for the grid in the CSS - I only use the CSS for sizing and positioning.
"Chicago to my mind was the only place to be. ... I above all liked the city because it was filled with people all a-bustle, and the clatter of hooves and carriages, and with delivery wagons and drays and peddlers and the boom and clank of freight trains. And when those black clouds came sailing in from the west, pouring thunderstorms upon us so that you couldn't hear the cries or curses of humankind, I liked that best of all. Chicago could stand up to the worst God had to offer. I understood why it was built--a place for trade, of course, with railroads and ships and so on, but mostly to give all of us a magnitude of defiance that is not provided by one house on the plains. And the plains is where those storms come from."
-- E.L. Doctorow
|
Post #306,146
3/24/09 10:49:05 PM
|
Looks like a .NET control
I googled it and it looks like it is a .NET control that runs client side.
In any case, if the same problem is happening in IE and Firefox, then the control is doing something. It may be moving things around through the document object model client side, and in the process messing up the style information which is also in the DOM. Or it may be something specific to .NET.
If your styles are named, try changing the names and see if it goes away. It could be that the UltraWebGrid happens to use the same name internally.
If that doesn't help, trying removing elements from the page until the problem goes away. That should give you some idea what it is conflicting with. Think of it as an undefined scientific problem, where you experiment at whim until you find some pattern you can use to serve as a platform for tracking down the source.
Jay
|
Post #306,190
3/25/09 5:46:09 PM
|
correct
I don't have Firefox installed; will have to get permission from our hardware guy to grant me temporary Admin rights to my PC.
I have 3 Infragistics controls on the form - 1 grid and 2 Webboxes, each contained within a separate <div>. I have everything between the "<form></form>" tags contained within a <div> called "divContainer", which is set at 565px high by 1000px wide.
I hard-coded each <div> around the 2 webboxes to be 200px high by 320px wide. For the <div> around the grid I set it to 245px high by 840px wide, and I have the grid itself set to Height="225px" Width="800px". (I have a vertical "divSidebar" on the left side of the page set at 155px wide by 100% high). At the bottom of the page I have a "divCopyright" which contains only a <asp:Label> with a copyright statement. Should I hard-code a height in pixels for this?
Now when I click on the column header to sort the grid, neither of the webboxes resize - and the grid no longer tries to resize itself horizontally; only vertically. I can see the copyright statement momentarily get pushed down off-screen as the grid makes itself taller, then returns to starting size all in less than 1 second.
"Chicago to my mind was the only place to be. ... I above all liked the city because it was filled with people all a-bustle, and the clatter of hooves and carriages, and with delivery wagons and drays and peddlers and the boom and clank of freight trains. And when those black clouds came sailing in from the west, pouring thunderstorms upon us so that you couldn't hear the cries or curses of humankind, I liked that best of all. Chicago could stand up to the worst God had to offer. I understood why it was built--a place for trade, of course, with railroads and ships and so on, but mostly to give all of us a magnitude of defiance that is not provided by one house on the plains. And the plains is where those storms come from."
-- E.L. Doctorow
|
Post #306,220
3/26/09 9:06:33 AM
|
It's worth trying
Should I hard-code a height in pixels for this?
It's worth trying. Another thing worth trying is taking all of the fixed pixel sizes out of the page and see if that helps.
Also, look at your padding and margins, I've seen weird behavior in situations where the content + padding + margins was actually bigger then the fixed space allocated.
Based on what you have written, I would guess that that there is a conflict somewhere between how the grid controls it's size and how you have your page setup. But I've never used that specific grid control and there are several things that could be causing the symptoms you are seeing.
Jay
|
Post #306,222
3/26/09 9:19:21 AM
|
Re: It's worth trying
I don't have any padding or margins explicitly set in the CSS or .ASPX file, such as "margin: 5%; padding: 1;". I originally had everything for size and position set in percentages, i.e. "left: 16%; width: 43%;".
I've added everything up and confirmed that nothing would extend beyond the 565px height and 1000px width.
"Chicago to my mind was the only place to be. ... I above all liked the city because it was filled with people all a-bustle, and the clatter of hooves and carriages, and with delivery wagons and drays and peddlers and the boom and clank of freight trains. And when those black clouds came sailing in from the west, pouring thunderstorms upon us so that you couldn't hear the cries or curses of humankind, I liked that best of all. Chicago could stand up to the worst God had to offer. I understood why it was built--a place for trade, of course, with railroads and ships and so on, but mostly to give all of us a magnitude of defiance that is not provided by one house on the plains. And the plains is where those storms come from."
-- E.L. Doctorow
|
Post #306,230
3/26/09 10:22:19 AM
|
Here's the page layout
<form id="PensionHistory" runat="server">
<div id="divContainer">
<asp:ScriptManager ID="ScriptManager" runat="server"> </asp:ScriptManager>
<igmisc:WebPageStyler ID="WebPageStyler" runat="server" EnableAppStyling="True" StyleSetName="Nautilus" StyleSetPath="/ig_common/20082CLR20/styles"/>
<div id="divSidebar">
<div id="divTimeInfo">
<igmisc:WebGroupBox ID="grpTimeInfo" runat="server" EnableAppStyling="False">
<Template>
<asp:Label ID="lblDate" cssClass="HeaderDate" runat="server"></asp:Label>
<asp:Label ID="lblTime" CssClass="HeaderTime" runat="server"></asp:Label>
<asp:Label ID="lblEmpName" CssClass="EmpName" runat="server"></asp:Label>
</Template>
</igmisc:WebGroupBox>
</div> <!-- divtimeInfo -->
<div id="divButtonPanel" class="CommonButtonPanel">
<igmisc:WebGroupBox ID="grpButtonPanel" runat="server" EnableAppStyling="False">
<Template>
<asp:ImageButton ID="btnBack" cssClass="BackButton" runat="server" ImageUrl="~/Images/BTN_Back.gif"/>
<asp:ImageButton ID="btnLogout" cssClass="LogoutButton" runat="server" ImageUrl="~/Images/BTN_Logout.gif"/>
<asp:Button ID="btnHome" CssClass="HomeButton" runat="server" Text="Home" />
</Template>
</igmisc:WebGroupBox>
</div> <!-- divCommonButtonPanel -->
</div> <!-- divSideBar -->
<div id="divContentNoHeader">
<div id="divEmployeePanel" style="height: 198px; width: 400px;">
<igmisc:WebGroupBox ID="grpMember" runat="server" CssClass="grpBox" StyleSetName="Nautilus" Text="" TitleAlignment="Left">
<Template>
<asp:Label CssClass="CreditPanelLabels" ID="Label6" runat="server" style="top: 2%;">Name</asp:Label>
<asp:Label CssClass="CreditPanelLabels" ID="Label7" runat="server" style="top: 11%;">Address</asp:Label>
<asp:Label CssClass="CreditPanelLabels" ID="Label8" runat="server" style="top: 20%;">City/State/Zip</asp:Label>
<asp:Label CssClass="CreditPanelLabels" ID="Label9" runat="server" style="top: 29%;">Phone</asp:Label>
<asp:Label CssClass="CreditPanelLabels" ID="Label10" runat="server" style="top: 38%;">Mem. ID#</asp:Label>
<asp:Label CssClass="CreditPanelLabels" ID="Label11" runat="server" style="top: 47%;">Birthday</asp:Label>
<asp:Label CssClass="CreditPanelLabels" ID="Label12" runat="server" style="top: 56%;">Age</asp:Label>
<asp:Label CssClass="CreditPanelLabels" ID="Label13" runat="server" style="top: 65%;">Marital Status</asp:Label>
<asp:Label CssClass="CreditPanelLabels" ID="Label25" runat="server" style="top: 74%;">Break</asp:Label>
<asp:Label CssClass="CreditPanelLabels" ID="Label26" runat="server" style="top: 83%;">Status</asp:Label>
<asp:Label CssClass="CreditPanelLabels" ID="Label17" runat="server" style="top: 92%;">SSN</asp:Label>
<asp:Label CssClass="MemberInfo" ID="lblName" runat="server" style="top: 2%;"></asp:Label>
<asp:Label CssClass="MemberInfo" ID="lblAddress" runat="server" style="top: 11%;"></asp:Label>
<asp:Label CssClass="MemberInfo" ID="lblCityStateZip" runat="server" style="top: 20%;"></asp:Label>
<asp:Label CssClass="MemberInfo" ID="lblPhone" runat="server" style="top: 29%;"></asp:Label>
<asp:Label CssClass="MemberInfo" ID="lblMemID" runat="server" style="top: 38%;"></asp:Label>
<asp:Label CssClass="MemberInfo" ID="lblBirthday" runat="server" style="top: 47%;"></asp:Label>
<asp:Label CssClass="MemberInfo" ID="lblAge" runat="server" style="top: 56%;"></asp:Label>
<asp:Label CssClass="MemberInfo" ID="lblMaritalStatus" runat="server" style="top: 65%;"></asp:Label>
<asp:Label CssClass="MemberInfo" ID="lblBreak" runat="server" style="top: 74%;"></asp:Label>
<asp:Label CssClass="MemberInfo" ID="lblStatus" runat="server" style="top: 83%;"></asp:Label>
<asp:Label CssClass="MemberInfo" ID="lblSSN" runat="server" style="top: 92%;"></asp:Label>
</Template>
</igmisc:WebGroupBox>
</div> <!-- employee panel -->
<div id="divCreditPanel" style="height: 198px; width: 200px;">
<igmisc:WebGroupBox ID="grpCredit" runat="server" CssClass="grpBox" StyleSetName="Nautilus" Text="" TitleAlignment="Left">
<Template>
<asp:Label CssClass="CreditPanelLabels" ID="Label1" runat="server" Text="Past" style="top: 2%;"></asp:Label>
<asp:Label CssClass="CreditPanelLabels" ID="Label2" runat="server" Text="Middle" style="top: 11%;"></asp:Label>
<asp:Label CssClass="CreditPanelLabels" ID="Label3" runat="server" Text="Future" style="top: 20%;"></asp:Label>
<asp:Label CssClass="CreditPanelLabels" ID="Label4" runat="server" Text="Bank" style="top: 29%;"></asp:Label>
<asp:Label CssClass="CreditPanelLabels" ID="Label5" runat="server" Text="Total" style="top: 38%;"></asp:Label>
<asp:Label CssClass="CreditPanelLabels" ID="Label14" runat="server" Text="Vesting" style="top: 47%;"></asp:Label>
<asp:Label CssClass="CreditPanelLabels" ID="Label15" runat="server" Text="V Status" style="top: 56%;"></asp:Label>
<asp:Label CssClass="CreditPanelLabels" ID="Label16" runat="server" Text="Vest YR" style="top: 65%;"></asp:Label>
<asp:Label CssClass="CreditInfo" ID="lblPast" runat="server" style="top: 2%;"></asp:Label>
<asp:Label CssClass="CreditInfo" ID="lblMiddle" runat="server" style="top: 11%;"></asp:Label>
<asp:Label CssClass="CreditInfo" ID="lblFuture" runat="server" style="top: 20%;"></asp:Label>
<asp:Label CssClass="CreditInfo" ID="lblBank" runat="server" style="top: 29%;"></asp:Label>
<asp:Label CssClass="CreditInfo" ID="lblTotal" runat="server" style="top: 38%;"></asp:Label>
<asp:Label CssClass="CreditInfo" ID="lblVesting" runat="server" style="top: 47%;"></asp:Label>
<asp:Label CssClass="CreditInfo" ID="lblVestingStatus" runat="server" style="top: 56%;"></asp:Label>
<asp:Label CssClass="CreditInfo" ID="lblVestYear" runat="server" style="top: 65%;"></asp:Label>
</Template>
</igmisc:WebGroupBox>
</div> <!-- credit panel -->
<div id="divEmpGrid" style="position: absolute; height: 245px; width: 840px;">
<igtbl:UltraWebGrid ID="WebGrid" runat="server" EnableTheming="True" StyleSetName="Nautilus" Height="225px" Width="800px">
<Bands>
<igtbl:UltraGridBand>
<AddNewRow View="NotSet" Visible="NotSet"></AddNewRow>
</igtbl:UltraGridBand>
</Bands>
<DisplayLayout BorderCollapseDefault="Separate" Name="WebGrid" RowHeightDefault="20px" Version="4.00">
<ActivationObject BorderColor="" BorderWidth=""></ActivationObject>
<%--<FrameStyle Height="63%" Width="90%"></FrameStyle>--%>
<FrameStyle Height="225px" Width="840px"></FrameStyle>
<FooterStyleDefault BackColor="#84A2C6"></FooterStyleDefault>
</DisplayLayout>
</igtbl:UltraWebGrid>
</div> <!-- divEmpGrid -->
</div> <!-- divContentNoHeader -->
<div id="divCopyright" class="divCopyright">
<asp:Label ID="lblCopyright" runat="server">Copyright 2009 BICC Systems, Inc. All Rights Reserved</asp:Label>
</div> <!-- divCopyright -->
</div> <!-- divContainer -->
</form>
"Chicago to my mind was the only place to be. ... I above all liked the city because it was filled with people all a-bustle, and the clatter of hooves and carriages, and with delivery wagons and drays and peddlers and the boom and clank of freight trains. And when those black clouds came sailing in from the west, pouring thunderstorms upon us so that you couldn't hear the cries or curses of humankind, I liked that best of all. Chicago could stand up to the worst God had to offer. I understood why it was built--a place for trade, of course, with railroads and ships and so on, but mostly to give all of us a magnitude of defiance that is not provided by one house on the plains. And the plains is where those storms come from."
-- E.L. Doctorow
|
Post #306,248
3/26/09 6:11:51 PM
|
Re: Here's the page layout
It looks like you are both setting some CSS yourself and enabling Infragistics' "Application Styling Framework" on a number of those controls. There could be a conflict between the CSS generated by those two mechanisms.
Since the sort action that triggers this problem is client side, it would be more helpful to see the client side HTML generated by this aspx page and any style sheets referenced by that client side code.
You could also look at that client side code using a DOM inspector like that in the IE Developer Toolbar or similar tools in other browsers to see what is changing in the style of a given control when you sort.
|
Post #306,275
3/27/09 9:12:07 AM
|
Here's the CSS for all elements on the page
@media screen, print, projection
{
body
{
position: absolute;
font-family: Arial, 'Times New Roman', Sans-Serif, Verdana, Tahoma;
font-size: 62.5%;
background-image: url(../../Images/BGD_Brushed_Metal.jpg);
}
/* Style Classes used on all Search web pages */
#divSidebar
{
position: absolute;
left: 0%;
top: 0%;
width: 160px;
height: 565px;
background-color: #84A2C6;
border: Groove 1px Black;
}
#divTimeInfo
{
position: absolute;
top: 2%;
left: 2%;
width: 94%;
height: 17%;
background-color: #E9E9E9;
}
#grpTimeInfo
{
position: absolute;
top: 0%;
left: 0%;
Height: 100%;
background-color: #E9E9E9;
border: 5px ridge #97B1FF;
width: 95%;
}
.HeaderDate
{
position: absolute;
top: 10%;
left: 2%;
width: 75%;
font-size: 7pt;
text-align: left;
font-weight: bold;
background-color: Transparent;
}
.HeaderTime
{
position: absolute;
top: 25%;
left: 2%;
width: 75%;
font-size: 7pt;
text-align: left;
font-weight: bold;
background-color: Transparent;
}
.EmpName
{
position: absolute;
top: 35%;
left: 2%;
width: 95%;
font-size: 7pt;
text-align: left;
font-weight: bold;
background-color: Transparent;
}
.CommonButtonPanel
{
position: absolute;
left: 2%;
top: 22%;
width: 94%;
height: 12%;
background-color: Transparent;
}
#grpButtonPanel
{
position: absolute;
top: 0%;
left: 0%;
Height: 100%;
background-color: #E9E9E9;
border: 5px ridge #97B1FF;
width: 95%;
}
.BackButton
{
position: absolute;
top: 55%;
cursor: hand;
left: 5%;
}
.HomeButton
{
position: absolute;
top: 10%;
cursor: hand;
left: 5%;
font-weight: bold;
}
.LogoutButton
{
position: absolute;
top: 68%;
cursor: hand;
left: 5%;
}
.divCopyright
{
position: absolute;
top: 97%;
left: 20%;
height: 10%;
width: 50%;
text-align: center;
font-weight: bold;
font-size: 8pt;
}
/* Style Classes shared by the SearchResults and PensionHistory pages */
#divEmpGrid
{
position: absolute;
top: 37%;
left: 17%;
width: 83%;
height: 63%;
}
/* Style Classes shared by the PensionHistory and PensionHistoryDetail pages */
.grpBox
{
position:absolute;
top: 0%;
left: 0%;
Height: 100%;
Width: 100%;
border: 1px #000000 solid;
border-style: groove;
}
.CreditPanelLabels
{
position: absolute;
left: 3%;
text-align: left;
font-weight: bold;
font-size: 8pt;
font-family: Arial, 'Times New Roman', Sans-Serif;
}
.MemberInfo
{
position: absolute;
left: 32%;
width: 70%;
text-align: left;
vertical-align: middle;
font-size: 8pt;
font-family: Arial, 'Times New Roman', Sans-Serif;
}
.CreditInfo
{
position: absolute;
left: 32%;
width: 80%;
text-align: left;
vertical-align: middle;
font-size: 8pt;
font-family: Arial, 'Times New Roman', Sans-Serif;
}
#divEmployeePanel
{
background-color: #99CCFF;
position: absolute;
left: 17%;
top: 1%;
height: 35%;
width: 40%;
}
#divContentNoHeader
{
top: 2%;
left: 410px;
height: 90%;
width: 590px;
}
#divCreditPanel
{
background-color: #99CCFF;
position: absolute;
left: 58%;
top: 1%;
height: 35%;
width: 25%;
}
.divCopyright
{
position: absolute;
top: 97%;
left: 20%;
height: 10%;
width: 50%;
text-align: center;
font-weight: bold;
font-size: 8pt;
}
}
"Chicago to my mind was the only place to be. ... I above all liked the city because it was filled with people all a-bustle, and the clatter of hooves and carriages, and with delivery wagons and drays and peddlers and the boom and clank of freight trains. And when those black clouds came sailing in from the west, pouring thunderstorms upon us so that you couldn't hear the cries or curses of humankind, I liked that best of all. Chicago could stand up to the worst God had to offer. I understood why it was built--a place for trade, of course, with railroads and ships and so on, but mostly to give all of us a magnitude of defiance that is not provided by one house on the plains. And the plains is where those storms come from."
-- E.L. Doctorow
|
Post #306,282
3/27/09 9:56:47 AM
3/28/09 3:29:38 PM
|
Nothing jumps out
Nothing jumps out as obviously wrong. And without the underlying .NET controls, there isn't much I can do to test it here.
Jay
Edited by jay
March 28, 2009, 03:29:38 PM EDT
|
Post #306,854
4/6/09 12:16:40 PM
|
I finally gave up
rewrote the base code to handle sorting on the server side; that way, when the page reposts, the spreadsheet displays in the proper size.
Showed it to the boss, who said, "It flickers just like the other way". Meaning he can see the page repost itself.
HUH?
ALL of the other web projects for other clients have server side sorting of spreadsheets - and the other programmer says that the boss is cool with them. So ... WTF?
I really had no choice but to hard code the positioning in pixels: "top: 325px; left: 175px; width: 750px" for BOTH the <div> surrounding the spreadsheet and for the spreadsheet itself. Set the code to return to client side sorting. No freaky resizing of the spreadsheet visible to the user. Showed it to the boss, who made no comment whatsoever, just once again asked me if "I've given any more thought to the style sheets". For the billionth time, I told him how I use the CSS for all positioning, font sizes and colors, background colors, colors (and the existence of) borders around areas, etc.
This guy is really proving himself to be a total asshole. I'm beginning to hate working here.
"Chicago to my mind was the only place to be. ... I above all liked the city because it was filled with people all a-bustle, and the clatter of hooves and carriages, and with delivery wagons and drays and peddlers and the boom and clank of freight trains. And when those black clouds came sailing in from the west, pouring thunderstorms upon us so that you couldn't hear the cries or curses of humankind, I liked that best of all. Chicago could stand up to the worst God had to offer. I understood why it was built--a place for trade, of course, with railroads and ships and so on, but mostly to give all of us a magnitude of defiance that is not provided by one house on the plains. And the plains is where those storms come from."
-- E.L. Doctorow
|
Post #306,855
4/6/09 12:40:37 PM
|
who said, "It flickers just like the other way"
I would have been tempted
"sounds like a personal problem to me"
thanx,
bill
|
Post #306,858
4/6/09 1:06:09 PM
|
Re: who said, "It flickers just like the other way"
The boss said it, so I had to bite my tongue and not reply properly to the stupidity that he exhibited.
"Chicago to my mind was the only place to be. ... I above all liked the city because it was filled with people all a-bustle, and the clatter of hooves and carriages, and with delivery wagons and drays and peddlers and the boom and clank of freight trains. And when those black clouds came sailing in from the west, pouring thunderstorms upon us so that you couldn't hear the cries or curses of humankind, I liked that best of all. Chicago could stand up to the worst God had to offer. I understood why it was built--a place for trade, of course, with railroads and ships and so on, but mostly to give all of us a magnitude of defiance that is not provided by one house on the plains. And the plains is where those storms come from."
-- E.L. Doctorow
|
