I've a asp.net table and I'm trying to format my columns to be all equal widths, or say 4 columns of 20%, 30%, 20% and 30%. However the following code is not working:
<asp:TableCell Width="30%">
The 'height' attribute works but this isn't the one I'm after. Any help much appreciated. Thanks
It's not working because the Width property is expecting a value of a Unit type, which defaults to Pixels.. I couldn't find an example that shows how to create an instance of Unit with a Type of Percentage
Which leaves me to suggest how you could do it with CSS..
Give the TableCell a CssClass, and set the Width in a stylesheet
<asp:TableCell CssClass="tableCellWidth30">
.tableCellWidth30 { width:30%; }
Use the Style property and set the Width inline
<asp:TableCell Style="width:30%;">
If you want to add a css style via code, do it like this:
txtmark.Style("font-weight") = "normal"
I couldn't find this answer anywhere, so that is why i posted it here.
Related
I hava a gridView with different width of columns (15%,17% ect...).
Some cell contain a very long text- in order to make all text seen and not truncated I used table-layout= fixed in the property "Style" of the gridview.
The problem is- the fixed property makes all columns' width to be equal and not what I defined.
How can I fix this?
<asp:GridView id="grd" style="width:100%"></asp:GridView>
I have an Ajax Slider Extender on my textbox, I am using a style sheet to change the rail to color green, that's going fine and dandy. Here is my code for the slider...
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
<div>
<asp:TextBox ID="SliderID" runat="server"></asp:TextBox>
<asp:SliderExtender ID="SliderExtender1" runat="server"
TargetControlID="SliderID"
BehaviorID="BoundControl"
Minimum="0"
Maximum="100"
RailCssClass="SliderRail"
Orientation="Horizontal"
EnableHandleAnimation="true"
Steps="100">
</asp:SliderExtender>
</div>
and here is my CSS so far...
.SliderRail {
position: relative;
height: 18px;
width: 100%;
background-color:green;
}
I know how to add an image to the handle, but what I am trying to figure out is how when I move the handle from step 0 to step 50, I need to mask over those steps with a dark grey and I can't really figure it out.
I have tried adding an image to the handle and have tried setting the width to a 100%, but that didn't work out at all for me.
My end result is figuring this problem out, then trying to replicate this using a multi handle extender when I have both handles at either end, it would do the same as the left handle, just backwards. Then I'll need to make sure that the handles can run over eachother...But that is the end result that I need to do.
I don't want to use JQuery or JavaScript, just want to keep it strictly css.
There isn't much documentation on using multi handles.
If this question has been asked a million times then I apologize, I must have been using the wrong search terms because I haven't found anything to tell me how to do this.
Thanks for all and any help
http://dotnetslackers.com/Ajax/re-70082_SliderExtender_layout_and_custom_appearance.aspx
Custom Appearance
In order to customize the slider’s appearance, we need to:
Provide a CSS class for the rail
Provide a CSS class for the handle
Provide an image URL for the handle’s image.
Steps to perform:
Create a CSS class for the slider’s rail. The CSS class must contain the following attributes:
The position attribute must be set to relative.
Default values for height and width attributes must be provided. The width value can be overridden through the Length property of the SliderExtender.
To embed a background image for the rail, use the background attribute.
2. Create a CSS class for the slider’s handle. The CSS class must contain the following attributes:
The position attribute must be set to absolute.
Values for height and width attributes must be provided.
3. Provide an image for the slider’s handle. The height and width sizes of the image must be equal to the height and width values specified in the handle’s CSS class.
Set the RailCssClass property of the SliderExtender instance to the name of the rail CSS class.
Set the HandleCssClass property of the SliderExtender instance to the name of the handle CSS class.
Set the HandleImageUrl property of the SliderExtender instance to the URL of the handle’s image.
This is a simple one but it is defeating me.
Ok, I have a gridview, lovely stuff. I have attempted to set the height of the headers so that the height is maintained regaardless of the content of the gridview.
However, if a data row requires a bit more height itself (to include the data), the height of the heading also increases.
How do I go about ensuring the height of the header is maintained but not at the expense of the data rows themselves?
GridView provides interesting styling features using asp.net tags in grid view, If you want to style height of a header, you can do something like this:
<asp:GridView id='grd' runat='server'>
<HeaderStyle Height="30px"/>
</asp:GridView>
or in headerStyle you can also use CssClass where you can assign the css style class specified.
Hope this helps
I found the reason behind my mysterious expanding rows!!
Bascially, I had set the height of my gridview. When the gridview was full with data and resulted in paging, the heading remained as it should. However, the rows expanded when this gridview was below it's quota of data - essentially .net was being clever and trying to fill the space I had created by setting the height by expanding what it could.
All I did was to remove the height of my gridview and it worked a treat.
Thanks for all the pointers though : )
You can use styles to set almost all presentation attributes. Try out using a css or add style attributes.
I have a table, and one of the cells has dynamically generated content.
I want to have a background image that is exactly the same size as the cell. (ie not tiled, but stretched).
I've found a very good reference here, which tells you how to do it in Javascript. This example solves the problem by placing an HTML DIV on the top and the bottom of the cell, then getting Javascript to work out the vertical pixel difference between them.
The biggest problem was that I declare the image as
<asp:Image ID="imgContentsBackground" CssClass="ContentsBackground" runat="server" ImageUrl="~/Images/MoneyColour3.jpg" />
but for some reason ASP.NET arbitrarily renamed the ID from "imgContentsBackground" to "ctl00_imgContentsBackground". Once I hardcoded that ID in the Javascript, the referenced example worked for me.
But I'm thinking - given the rich functionality of ASP.NET, is there a simpler way to determine the size and position of a table cell once the content has been generated, and make an image occupy those dimensions?
if hard-coding the generated name solves it then why don't you try this:
<%= imgContentsBackground.ClientID %>
What is the exact pixel size of one column when I used the columns attribute to determine a width of an ASP.NET textbox control?
<asp:TextBox id="MyTextBox" runat="server" columns="10" />
The Columns property is mapped to the size-attribute on the rendered input-tag.
If size is 10, then the browser is supposed to render the input field in a size that would make 10 characters fit and be visible in the input field. But that only really works for monospace fonts, since in many other fonts "III" will not have the same pixel length as "MMM".
So usually you are better of just using CSS-width as Ryan said.
I always use:
style="width: 250px;"
That way you can set it exactly. Otherwise it's going to depend on the font-size of the textbox as well as the way the browser renders it.
Rows on the other hand is something I've always struggled with.
#Ryan Smith: I used your suggestion and modified it to make it scalable to the user montior settings.
style="width: 100%"