Develop Reference

Setting #Font-Face From C# Code Behind

In my stylesheet I have this declared
#font-face {
font-family: 'light';
src: url('Fonts/HelveticaNeueLTStd-Lt.otf') format('opentype');
}
Now in my C# code behind I try to set the class like this
row.CssClass = light;
But I get a compile error of
The name 'light' does not exist in the current context
Is it possible to reference a css class #font-face from C# codebehind?
EDIT
This is how I am attempting to use this - I have tried the below
.lightfontface {
font-family: 'light';
}
#font-face {
font-family: 'light';
src: url('Fonts/HelveticaNeueLTStd-Lt.otf') format('opentype');
}
row.CssClass = lightfontface;

I believe your
row.CssClass = light;
needs to be
row.CssClass = "className";
and your css will need a .className entry.
Imagine your html row:
<tr class="className">stuff</tr>
Your CssClass assignment is assigning the value to class, and your css can use a class selector to format that row.
To sum up some of the comments, the style sheet entry should simply be:
.className { font-family: 'light'; }
Ordering on your style sheet is important. Put the font-face definition above the .className style entry. See: https://www.w3.org/TR/CSS2/cascade.html#cascading-order

How to select and get color in asp.net

As there is no integrated attribute for color in asp.net (atleast i haven't found it), i wonder, how do you guys select color?
Let's say i want to create a drawing using bitmap and i want to get background color from the user who selects it using the application.
I've done some code behind, but thing doesn't work, as i manually type in colors like #000 or #fff (using textbox)
app.aspx
<label>
<span>Background color</span>
<asp:TextBox ID="inp_bgColor" Width="125px" runat="server"></asp:TextBox>
</label><span style="color:red"><asp:Literal ID="error_bg" runat="server"></asp:Literal></span><br /><br />
and app.aspx.cs
Color txtClr = Color.FromName(inp_bgColor.Text);
I've noticed that System.Drawing.Color is type of ARGB color, so how do i do this?
Thanks!

You can use hex colors like this:
string hex = "#FF3FF3";
Color _color = System.Drawing.ColorTranslator.FromHtml(hex);

The Color.FromName method gets colors from the KnownColor enumeration (see know color table
Try using the Color.FromARGB method see here
For simple user color picking you can use the color dialog like this:
// Show the color dialog.
ColorDialog colorDialog1=new ColorDialog();
DialogResult result = colorDialog1.ShowDialog();
// See if user pressed ok.
Color selectedColor;
if (result == DialogResult.OK)
{
selectedColor = colorDialog1.Color;
}

You can get color using .Attributes.CssStyle["color"], but your element must have css style property like color set.
inp_bgColor.Attributes.CssStyle["color"]
And you can use this way to convert
Color _color = System.Drawing.ColorTranslator.FromHtml("#FFFFFF");

asp.net programatically created table and css priority

I have a table which I create programatically in my code behind file and set the colours of alternate row to gray for easier visibility like so:
<New cells and rows created here>
tblResults.GridLines = GridLines.Both;
tblResults.BorderStyle = BorderStyle.Solid;
tblResults.HorizontalAlign = HorizontalAlign.Center;
if (rowNumber % 2 == 1)
{
tblRow.BackColor = System.Drawing.Color.LightGray;
}
tblResults.Rows.Add(tblRow);
tblResults.CssClass = "myclass" ;
pnlContent.Controls.Add(tblResults);
I also want to have the rows highlighted when a user hovers over them like so:
.myclass tr:hover
{
background: #FCF;
}
Now the hover only seems to work for the rows which are not highlighted gray from the c# code which I assumes takes precedence over the css.
How can I also make those gray rows work with the css hover?

Try this hope it helps, I think some where the Style inside the page is overwriting your light Grey Background. Try this it will be ease to find the solution
if (rowNumber % 2 == 1)
{
tblRow.Attributes.Add("Class","ClassName_grey");
}
else{
tblRow.Attributes.Add("Class","ClassName_nothing")
}
.myclass tr:hover
{
background: #FCF;
}
.ClassName_grey {
background: #eeeeee;
}

You might try
.myclass tr:hover
{
background-color: #FCF;
}
Or adding the !important qualifier. The former is basically setting the same style as the server-side code should be, whereas your code was setting the less specific background (all aspects of it, not just colour).
Otherwise try viewing the source or using developer tools to see what style attribute you need to overwrite.

Css changes asp tablecell, without resizing it

I make a tablecell using C# in my code behind, and I add a CSS class to the label inside the cell to rotate it:
.vertical {color:#333;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform:rotate(270deg);
-moz-transform:rotate(270deg);
-o-transform: rotate(270deg);
white-space:nowrap;
display:block;
}
The problem is that after I rotate my label, my table cell (and table) have not resized to fit the new text. Is there a way using CSS or an attribute I can use to have my table re-size automatically to fit the new content?
I'd appreciate any help.
---EDIT---
So after playing around with some the CSS class, I realized the source of my problem. Basically, after I apply CSS changes - my tables don't resize. They still size as if the content was not modified.
Is it possible to make my tables re-size after the CSS style changes the size of my tablecells?

You need to calculate the new height of your Label and then set it's containing element to that height. This fiddle is what I am talking about.
<table>
<tr>
<td id="someLabel" class="vertical">some stuff</td>
<td>some other stuff sljk fkas jd</td>
</tr>
...
</table>​
and then using jQuery
$.fn.textWidth = function () {
var html_org = $(this).html();
var html_calc = '<span>' + html_org + '</span>';
$(this).html(html_calc);
var width = $(this).find('span:first').width();
$(this).html(html_org);
return width;
};
$(function(){
var someLabelSize = $("#someLabel").textWidth();
$("#someLabel").css("height", (someLabelSize + 5));
});
Just change the selectors to reflect your needs.

Increasing the width of the autocomplete extender list

I have an ASP.NET AJAX autocomplete extender with CompletionListCssClass=autocomplete_completionListElement :
.autocomplete_completionListElement
{
width:500px;
margin : 0px!important;
background-color : inherit;
color : windowtext;
border : buttonshadow;
border-width : 1px;
border-style : solid;
overflow :auto;
height : 200px;
text-align : left;
}
But for some odd reason the width of the auto complete list always takes up the width of the textbox even when I set the width to 500px. Is there a way to fix this?

I believe you can also accomplish this by changing
width:500px;
to
width:500px!important;
Tim Mackey expounds more in this blog post. Basically you have to use !important to override the CSS spit out by the control itself.

I finally figured it out. I used the OnClientPopulated="onListPopulated" property as follows:
function onListPopulated() {
var completionList = $find("AutoCompleteEx").get_completionList();
completionList.style.width = 'auto';
}

You need to set the min-width to 500px