Last post Jun 18, 2008 01:33 PM by brankoma
Jan 03, 2007 01:22 PM|DannyDep|LINK
This is my first attempt at using the CSS Friendly Adaptors.
I have a problem with my DetailsView.
The Bound as well as Template fields HeaderText is not wide enough to display so that the
Bound Datafields and ItemTemplate Text fields are overlaying the text from the Headers.
Here is part of the code.
<asp:DetailsView ID="DetailsViewMine" runat="server"
AutoGenerateRows="False" DataKeyNames="MineName" CssSelectorClass="PrettyDetailsView" SkinID="SampleDetailsView"
DataSourceID="AccessDataSource1" Height="50px" Style="position: relative">
<EditRowStyle Wrap="False" />
<RowStyle Wrap="False" />
<asp:BoundField DataField="MineID" HeaderText="Mine ID" InsertVisible="False"
SortExpression="MineID" ReadOnly="True" />
<asp:BoundField DataField="MineName" HeaderText="Mine Name" ReadOnly="True"
SortExpression="MineName" InsertVisible="False" >
<ItemStyle Wrap="False" />
<asp:TemplateField HeaderText="Is Mine Public?" SortExpression="MinePublic"
InsertVisible="False" HeaderStyle-Wrap="false" HeaderStyle-HorizontalAlign="Left">
<asp:Label ID="Label1" runat="server" text='<%# Bind("MinePublic") %>'
<asp:TemplateField HeaderText="Is Mine OnOrder ONLY?" InsertVisible="False"
<asp:Label ID="Label1" runat="server" text='<%# Bind("MineOnOrderONLY") %>'
Jan 04, 2007 10:42 AM|DannyDep|LINK
Bump. Anyone have any ideas?
Jan 04, 2007 04:04 PM|DannyDep|LINK
I am assuming that once we have everything in place from the setting up the control adaptor kit on our PCs, we need to modify the relevant ….css file in the appropriate Themes folder so modify the presentation as we would like to see it.
If this is not correct would someone please inform me.
So I was able to remove the overlapping by changing the
position:absolute; from the
/* This corresponds to the HeaderText attribute of an <asp:BoundField>. */
But now all the values do not line up under one another.
Looks like this”
Is Customer Public?
Is Customer Ready for Transport?
When I want it to look like ths:
Is Customer Public?
Is Customer Ready for Transport?
I tried to change some properties in the HeaderText
but nothing made any difference in the above appearance.
I didn’t see any sections in the detailsview.css for template items
the last two fields in my example are.
Any ideas of how I can get all the values to line up properly?
Jan 05, 2007 10:41 AM|DannyDep|LINK
Could anyone at least point me to someplace on the Internet where I might find the solution to my problem?
Jan 05, 2007 01:11 PM|roberthking|LINK
Jan 05, 2007 02:15 PM|DannyDep|LINK
Before i comment I should have explained that I have imcorporated the Adapters into an already existing website using the info from the white paper at
OK, now I guess I must have missed something but how do I access the "generated HTML"?
Or should I be asking, how to I generate the HTML?
Jan 05, 2007 03:37 PM|roberthking|LINK
When trying to figure out this sort of ASP.NET stuff, I find myself constantly viewing the page in my browser, then right-clicking and selecting 'View Source'. I then save that to a .htm file and begin 'hacking' that. Once I get the HTML/CSS to behave, I
can then try and re-incorporate this into my aspx page. Sadly, ASP.NET "gets in the way" so much sometimes that trying to make simple changes often results in major changes to the output, and I personally think this gets in the way
of resolving the issue. Put another way, I use VS to generate a "rough draft", then tune this using my HTML & CSS editors.
Jan 05, 2007 04:17 PM|Russ Helfand|LINK
Danny, apologies for not responding sooner. I sometimes lag by a day or two, especially around the holidays. So, sorry that I missed your "bump" messages!
I think what you want to do is perfectly plausible to achieve with simple changes to the CSS controlling your DetailsView. Go back and look at the kit's sample page that demonstrates the adapted DetailsView. The styling for that page (that you want to imitate
in your new that has a DetailsView) is in App_Themes\Basic\DetailsViewExample.css.
There are two CSS rules, in particular, in that style sheet that you'll want to focus on. The first looks like this:
The other looks like this:
The first one gives the whole DetailsView area a width. The second rule gives the headers 8em of width which means that the values have been given 20em-8em=12em of width.
If you want to give your values more width you can either reduce the margin-left (effectively narrowing the width devoted to the headers) or you can give the whole DetailsView more width by increasing the 20em.
All these instructions are pertinent if you wish to retain the current way that the example DetailsView page styles its markup. As you noted, it uses some relative positioning techniques, etc. There are, of course, a nearly endless number of ways to use
CSS to layout a DetailsView. The rules I wrote are just one way to achieve one possible layout.
I really think you can solve your layout needs by merely tweaking the CSS for your page. Remember, that your DetailsView will have a CssSelectorClass attribute that you can set any way you want. It is what gives you the outer <div> around the markup for
the DetailsView and, thus, governs the way that your CSS rules start (i.e., PrettyDetalsView). Once you understand that you basically do your styling by writing style sheets rather than HTML or ASP.NET markup stuff then things get easier.
Good luck and write back.
Jan 05, 2007 07:31 PM|DannyDep|LINK
That worked. I knew it had to be something as simple as that.
Jun 18, 2008 01:33 PM|brankoma|LINK
How do I remove vertical dots between column with values and column with labels from the DetailsView style sheet