Develop Reference

Dynamic JQUERY data table width issue in IE7

We have created a dynamic JQUERY table with dynamic columns (Depending upon count value) and assigned it to DIV tag. However the thead and tbody is going outside DIV tag in IE7.
Looks like the width is automatically set dynamically by CSS, we are not able to override it.
Did anyone faced similar issues. Please help.

use important keyword like this.
width: 100px !important;

Added the following lines in DataTable.css file and it worked perfectly!!
table.display thead th div.DataTables_sort_wrapper
{
/*Fix for width issue*/
position: relative;
clear: both;
width:50px;
overflow:hidden;
word-wrap:break-word;
}

Creating a CSS class programmatically ASP.Net

I have a DIV that I would like to modify the CSS for programmatically in VB.Net/C#.
I know that, for example, I could add style attributes simply by
divMyDiv.Style.add("color","#ff0000")
but I want to add a new CSS class, together with its attributes to the DIV. So in an ideal world I would like to write something like
divMyDiv.Style.add(".smallRedText", "{font-size:10px; color:#ff0000}")
Is this even possible ? Am I missing the bigger picture ?
All help gratefully received :-)

What about:
divMyDiv.Attributes.Add("class", "new-class")

I suggest that you define the variations in css ahead of time that you know you'll need. Then, you can manipulate the class attribute of whatever control you need to change on the fly.
For example, you could define:
.smallRedText { font-size: 10px; color: #ff0000 }
.smallBlueText { font-size: 10px; color: #0000ff }
Then when comes time to select dynamically:
divMyDiv.Attributes.Add("class", whateverClassWeNeed);

Label that turns into textbox when clicked?

Maybe there is a CSS style for this, but, I want my TextBox to look like a label. When it is focused, I want it to look like whatever CSS style is applied. I am using bootstrap so that would be the style.
Is there some way to do this?
I have a grid view that I want to allow the user to rename without using the Edit Mode.
Thanks
(EDIT)
I mean an editable label:
see http://dotnetspeaks.net/post/exm/EditableLabel.aspx

Here's a wild guess (since the question itself is a bit vague):
input {
border: none;
padding: 2px;
}
input:focus {
border: 1px solid black;
}
And, voila! (and a version that more traditional)

You can use textbox by making it appear label and making it textbox on click or on focus. (just an approach, question is bit confusing.)
<script type="text/javascript">
function TextBox2Label()
{
var control=document.getElementById("<%=TextBox1.ClientID %>");
control.style.borderStyle="none";
control.style.backgroundColor="Transparent";
control.style.fontStyle.fontColor="Black";
control.readOnly=true;
}
</script>

cell alignment in Grid

Hi I have a grid I'm trying to style. A skin was provided for me which contains:
#tblPageContent td
{
padding:0px;
margin:0px;
vertical-align:top;
text-align:left;
}
This is used to style other elements in the web application so I can't remove this.
The problem is this is styling my grid items to all be align left. I actually want them centered.
I tried to override this by adding a class to my grid and setting:
.myRadGridClass
{
text-align="center;
}
and
#myRadGrid td
{
text-align:center;
}
However this is not working right now.
Can someone please help me to get the grid cells centered without removing the skin css?

You only need to be more specific than the rule that's already defined.
I imagine that the HTML code generated looks like this :
<table id="tblPageContent">
<tr>
<td class="myRadGridClass">Content of your cell</td>
</tr>
</table>
If you go with the following css it should work :
#tblPageContent td.myRadGridClass
{
text-align:center;
}
If the HTML code doesn't look like this, post a snippet and we'll be able to help you out.

How to remove the inherited style on Text Box object from <td> that the text box is nested in

How can I remove the inherited properties?

Basically, you can't remove the inherited properties. You need to override them with "stronger" CSS rules. You can use the !important keyword if you need to.
.TaskFormField {
font-size: 10px !important;
}
.TaskFormField {
font-size: 12px; /* One could believe that the font size should be 12px,
but it remains 10px because the !important keyword is used. */
}

Not sure what the question is? From the snippet of HTML it looks like you have a "TaskFormField" class on your table column and that is what is showing up in your style box. If you want to over-ride for the input you can do something like:
.TaskFormField input {color:#000; font-size:10pt; font-family:Arial,Verdana,Sans-Serif;}