omegalove
asked on
collapsePanelHeader css.
How can I preserve the header box in a expand collapse type of panel.
The space should not be there.
See attached image and code.
log on to omegalove.cm
user:omegalove1
pass:cupryk
The space should not be there.
See attached image and code.
log on to omegalove.cm
user:omegalove1
pass:cupryk
<div class="disignBoxFirst">
<div class="boxFirstHeader">
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server"
TargetControlID="PnlContent2" ExpandControlID="PnlTitle2" CollapseControlID="PnlTitle2"
TextLabelID="Label2" CollapsedText="Show Details (...)" ExpandedText="Hide Details (...)"
ImageControlID="Image2" ExpandedImage="../Images/Frames/toggle_down.png" CollapsedImage="../Images/Frames/toggle_right.png"
Collapsed="True" SuppressPostBack="true">
</ajaxToolkit:CollapsiblePanelExtender>
<asp:Panel ID="PnlTitle2" runat="server" CssClass="collapsePanelHeader">
<asp:Image ID="Image2" runat="server" ImageUrl="../Images/Frames/toggle_down.png">
</asp:Image>
LIFESTYLE AND HABBITS
<asp:Label ID="Label2" runat="server" Text="Show Details(...)"></asp:Label>
</asp:Panel>
<asp:Panel ID="PnlContent2" runat="server" CssClass="collapsePanel">
<div class="boxContent">
<div id="profile_details_wrapper">
<div class="pad_cont" style="margin: 0;">
<div class="pad_box">
<div class="h1 t_sprite id_card">
Your Physical Appearance and Attributes</div>
<div class="st_col" style="margin-right: 20px;">
<div class="st_title">
Appearance:</div>
<div class="st_item">
</div>
<div class="clear">
</div>
<div class="st_title">
Style:
</div>
<div class="st_item">
<asp:Label ID="Label4" runat="server"></asp:Label>
</div>
<div class="clear">
</div>
<div class="st_title">
Eye Colour:
</div>
<div class="st_item">
<asp:Label ID="Label5" runat="server"></asp:Label>
</div>
<div class="clear">
</div>
<div class="st_title">
Facial Hair:</div>
<div class="st_item">
<asp:Label ID="Label6" runat="server" CssClass="value"></asp:Label>
</div>
<div class="clear">
</div>
<div class="st_title">
Fashion Sense:</div>
<div class="st_item">
<asp:Label ID="Label7" runat="server"></asp:Label>
</div>
<div class="clear">
</div>
<div class="st_title">
Hair Color:
</div>
<div class="st_item">
<asp:Label ID="Label8" runat="server"></asp:Label>
</div>
<div class="clear">
</div>
<div class="st_title">
Height:</div>
<div class="st_item">
<asp:Label ID="Label9" runat="server"></asp:Label>
</div>
<div class="clear">
</div>
<div class="st_title">
Piercings:</div>
<div class="st_item">
<asp:Label ID="Label10" runat="server"></asp:Label>
</div>
<div class="clear">
</div>
<div class="st_title">
Jewelry:</div>
<div class="st_item">
<asp:Label ID="Label11" runat="server"></asp:Label>
</div>
<div class="clear">
</div>
<div class="st_title">
Nationality:</div>
<div class="st_item">
<asp:Label ID="Label12" runat="server"></asp:Label>
</div>
<div class="clear">
</div>
</div>
<div class="st_col">
<div class="st_title">
Body Type:
</div>
<div class="st_item">
<asp:Label ID="Label13" runat="server"></asp:Label>
</div>
<div class="clear">
</div>
<div class="st_title">
Complexion:
</div>
<div class="st_item">
<asp:Label ID="Label14" runat="server"></asp:Label>
</div>
<div class="clear">
</div>
<div class="st_title">
Eye Wear:
</div>
<div class="st_item">
<asp:Label ID="Label15" runat="server"></asp:Label>
</div>
<div class="clear">
</div>
<div class="st_title">
Facial Shape:</div>
<div class="st_item">
<asp:Label ID="Label16" runat="server"></asp:Label>
</div>
<div class="clear">
</div>
<div class="st_title">
Best Feature:</div>
<div class="st_item">
<asp:Label ID="Label17" runat="server"></asp:Label>
</div>
<div class="clear">
</div>
<div class="st_title">
Hair Style:
</div>
<div class="st_item">
<asp:Label ID="Label18" runat="server"></asp:Label>
</div>
<div class="clear">
</div>
<div class="st_title">
Weight:</div>
<div class="st_item">
<asp:Label ID="Label19" runat="server"></asp:Label>
</div>
<div class="clear">
</div>
<div class="st_title">
Tattoos:
</div>
<div class="st_item">
<asp:Label ID="Label20" runat="server"></asp:Label>
</div>
<div class="clear">
</div>
<div class="st_title">
Ethnicity:
</div>
<div class="st_item">
<asp:Label ID="Label21" runat="server"></asp:Label>
</div>
<div class="clear">
</div>
</div>
<div class="clear">
</div>
<br />
</div>
</div>
mreuring
HTML and CSS interact with each other, for any CSS expert to help on a problem like this, he/she would need the full page and related CSS (for instance an archive created from a 'save entire page' option). Although there may be a few .Net experts with enough knowledge of CSS to figure this out, or perhaps there is some 'code-behind' options to configure it, you will get far better responses if you'd have a rendered page for 'us' to look at :)
As mreuring stated above: Do you have a live link for us to see?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Is it this class.
Hi master, just wondering if I need to modify this class as well?
.collapsePanelHeader
{
font-weight: bold;
float: none;
cursor: pointer;
vertical-align: middle;
/* padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 8px;
font-size: 12px;*/
font-weight: bold;
color: #666666;
text-align: left;
text-transform: uppercase;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}
Hi master, just wondering if I need to modify this class as well?
.collapsePanelHeader
{
font-weight: bold;
float: none;
cursor: pointer;
vertical-align: middle;
/* padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 8px;
font-size: 12px;*/
font-weight: bold;
color: #666666;
text-align: left;
text-transform: uppercase;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}
no need ..just modify .boxFirstHeader alone and try ...
ASKER
Awesome work again. Guru!!!
thanks for the grade and points mate...
ASKER
no worries a job well done.