Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3
This is the forum to discuss the Wrox book Beginning ASP.NET 3.5: In C# and VB by Imar Spaanjaars; ISBN: 9780470187593
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old February 17th, 2010, 08:16 AM
Authorized User
 
Join Date: Apr 2009
Location: Sardinia - Italy
Posts: 48
Thanks: 16
Thanked 0 Times in 0 Posts
Default listview styling

Hi there,

I was going over skin chapter and hoped to apply some styling to the ListView, by creating a skin. However that doesn't seem to work.

So I had tried to do it according the way it is done in chap 13, the try it out on p 451.
I tried putting the whole code in the LayOutTemplate into a div with a class, so that I could apply some styling like a border and a background color to the the div. But that does not work. Even putting the whole ListView into a div, and applying styling there does not work!

Does anybody have a solution for this?

thanks in advance, Robin
Reply With Quote
  #2 (permalink)  
Old February 17th, 2010, 11:23 AM
Imar's Avatar
Wrox Author
Points: 71,804, Level: 100
Points: 71,804, Level: 100 Points: 71,804, Level: 100 Points: 71,804, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,044
Thanks: 80
Thanked 1,580 Times in 1,557 Posts
Default

Can you define "does not work"? The book uses CSS and classes for the ListView as well so it does wwork.....

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #3 (permalink)  
Old February 17th, 2010, 12:11 PM
Authorized User
 
Join Date: Apr 2009
Location: Sardinia - Italy
Posts: 48
Thanks: 16
Thanked 0 Times in 0 Posts
Default

You're right Imar, I wasn't very clear. the styles applied in the book, in the stylesheet do work.
Creating a skin for the ListView doesn't seem to work, applying a CssClass to the listview throws an error, and so does any styling directly done in the skin file to the listview.

Furthermore, on the itemContainer class I haven't been able to add a background or a border. On the li in the itemContainer , no probs applying borders or backgrounds, so that works.

So I tried wrapping the whole code in the LayoutTemplate in a div to apply background and border to that div, also that was without succes..

So how do I get borders and backgrounds behind and around the whole ListView?

Also with styling a detailsView I ran into some trouble, I noticed that some styles can be applied in the skin, and others have to be applied to a CssClass in the skin. the FieldHeader text style is an example of this.
After a long search, I haven't found yet where I can put some space in between the rows, do you have a tip where I can find some more documentation about this?

thanks, Robin
Reply With Quote
  #4 (permalink)  
Old February 18th, 2010, 01:59 AM
Imar's Avatar
Wrox Author
Points: 71,804, Level: 100
Points: 71,804, Level: 100 Points: 71,804, Level: 100 Points: 71,804, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,044
Thanks: 80
Thanked 1,580 Times in 1,557 Posts
Default

Hi there,

Again, very difficult to say, as you're not providing the info needed to answer this. You're post is still full of remarks like "haven't been able to", "doesn't work", "throws an error" and other reasonably vague stuff like that.

Please be specific, Post error messages, tell what you mean with "doesn't work" (does your screen go green? Do you get an error? Do you see otther images instead? etc etc).

Also, posting the actual code you're working with would really help....

BTW: The ListView is not very skinnable because it doesn't have any styles.

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #5 (permalink)  
Old February 19th, 2010, 06:00 AM
Authorized User
 
Join Date: Apr 2009
Location: Sardinia - Italy
Posts: 48
Thanks: 16
Thanked 0 Times in 0 Posts
Default

Ok Imar, I'll be more specific. Telling me that skinning the listview really makes no sense is already a bit helpfull.
The code is like this
Code:
<div class="contentBody" >
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>           
            <br />
            <div class="">
                <asp:ListView ID="lvAcc" runat="server" >
                    <LayoutTemplate>
                    <div class="AccBox">
                        <ul class="itemContainer">
                            <li id="itemPlaceHolder" runat="server"/>
                        </ul>
                    </div>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <li>
                            <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# "AccDetails.aspx?Id=" + Eval("Id") %>' Text='<%# Eval("Name") %>' />
                            <br />
                            <asp:Label ID="Literal1" runat="server" Text='<%# Eval("Summary") %>' ></asp:Label>
                            <br />
                            <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Photo.PhotoUrl") %>' SkinID="AccImage"></asp:Image>                                                     
                        </li>
                        
                    </ItemTemplate>
                </asp:ListView>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    </div>
Now what I want is give the whole listview a background color and a border.
Appling these styles in the stylesheet, like so
Code:
.AccBox{
    border: solid 2px #800000;
    }
.itemContainer
{
    width: 600px;
    list-style-type: none;
    font-size: small;
    
}
.itemContainer li
{
    border: 2px solid #7C8229;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    box-shadow: 10px 10px 5px #888;
    height: 180px;
    width: 600px;
    float: left;
    margin: 3px;
    padding: 15px;
}
.itemContainer li img
{
    float: right;
}
.itemContainer li span
{
    width : 400px;
    float: left;
    border:solid 1px #000;
}
so to the div with class AccBox, is rendered as a collapsed div above the ListItems, with the borders just visible as a stripe, twice the width of the defined border.
Also if I move up the desired styling to the div where the listview resides, the same thing happens; a collapsed div above the List items.
I just found out that with giving the "contentBody" div a relative position and the AccBox an absolute position inside it, that actually it does render as expected with border and background. However this time the Footer div from the masterpage is overrun when the contentBody is taller than the minimum page height.

Is there a more constructive solution for this problem?

Thanks, Robin
Reply With Quote
  #6 (permalink)  
Old February 19th, 2010, 03:32 PM
Imar's Avatar
Wrox Author
Points: 71,804, Level: 100
Points: 71,804, Level: 100 Points: 71,804, Level: 100 Points: 71,804, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,044
Thanks: 80
Thanked 1,580 Times in 1,557 Posts
Default

Quote:
Now what I want is give the whole listview a background color and a border.
Why don't you apply these to the AccBox class? It's *around* the items, not above it.

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #7 (permalink)  
Old February 20th, 2010, 06:50 AM
Authorized User
 
Join Date: Apr 2009
Location: Sardinia - Italy
Posts: 48
Thanks: 16
Thanked 0 Times in 0 Posts
Default

Hi Imar,

Quote:
Originally Posted by Imar View Post
Why don't you apply these to the AccBox class? It's *around* the items, not above it.

Imar
From the stylesheet in my previous post you can see that that is exactly what I did, and still it is rendered as a collapsed div ( only the borders are visible without any content) and the listItems remain appended under this stripe (the collapsed div).
Applying the same style to the ul gives the same result; the ul is rendered as a collapsed box (stripe) with its items appended under it.

BTW this exact same problem can be reproduced in the planet wrox project:
add this styleing to the .itemContainer in Styles/Styles.css
Code:
border: solid 2px white;
this will produce a white stripe above the photos when an album is selected in PhotoAlbums/Default.aspx (Gig pics). The white stripe surely is the ul border defined in the above stylerule. So it is as if the ul has no idea that it contains any li elements.....

any other suggestions? Robin

Last edited by robbaralla; February 21st, 2010 at 04:35 AM. Reason: additional information
Reply With Quote
  #8 (permalink)  
Old February 22nd, 2010, 05:37 AM
Authorized User
 
Join Date: Apr 2009
Location: Sardinia - Italy
Posts: 48
Thanks: 16
Thanked 0 Times in 0 Posts
Default

Hi there,

The solution to the problem here, seems to be that the inner elements (be it li elements or nested divs) fall out of their container because of their left float. So any border or background applied to this container (that the browser renders as empty and thus collapsed) will not be around the inner elements.
So to apply a border on the container and get it around the inner elements either both have to have a float:left, or neither of them.

best regards, Robin
Reply With Quote
  #9 (permalink)  
Old February 22nd, 2010, 06:54 AM
Imar's Avatar
Wrox Author
Points: 71,804, Level: 100
Points: 71,804, Level: 100 Points: 71,804, Level: 100 Points: 71,804, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,044
Thanks: 80
Thanked 1,580 Times in 1,557 Posts
Default

Ah, now I understand what you mean with collapsed. You can also try adding: clear: both. Depending on your code, you typically do this on the first item following the float (as done with the #Footer for example).

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
C# Word Styling Automation rangeshram C# 2005 0 April 15th, 2009 02:51 AM
Styling the Menu Control stephenf BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 7 March 17th, 2009 03:41 PM
PHP Styling adaniels11 PHP How-To 1 April 10th, 2007 06:10 AM
Nav Bar Styling VictorVictor BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 1 May 16th, 2006 07:02 PM
XSLT and styling jacob XSLT 4 October 13th, 2005 03:50 AM



All times are GMT -4. The time now is 02:19 PM.


Powered by vBulletin®
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.