We Keep Coding

How to display image it's original size in Image control

I tried CSS height to auto, however, the image didn't display, so I had to put a fixed-height. I Tried resize-mode and it also didn't work. I Tried adding "img-responsive" and it also didn't work.
CSS
.imgFile {
width: 100%;
max-width: 100%;
height: 100px;
max-height:100%;
margin-left: 7px;
margin-right: 0px;
margin-top: 5px;
margin-bottom: 1px;
background-repeat: no-repeat;
background-color: white;
background-size: 100%, 100%;
}
Asp.net
System.Web.UI.WebControls.Image image = new
System.Web.UI.WebControls.Image();
image.ID = file.Name + file.Oid;
image.Attributes.Add("class", "imgFile");
image.Attributes.Add("class", "img-responsive");
image.Style.Add("background-image", "'LogoHeaderHandler.axd?f="
+ file.Oid + "&" + DateTime.Now.ToFileTime() + "'");

It looks like you have 2 problems.
1) The Attributes.Add is clearing out your imgFile class based on your current code. If you need both, you will have to add them together in one line as follows:
image.Attributes.Add("class", "imgFile img-responsive");
//image.Attributes.Add("class", "img-responsive");
2) Your CSS has the following: background-size: 100%, 100%; This needs to be removed to retain the "original" size of the image, otherwise it will stretch the image.
The rest of the code you have seems to give me the result you are looking for though (*granted your handler is working as expected...I did not simulate this part in my testing).

Add Css to dynamically created label and textbox

I am dynamically creating the label and textbox in my C# code and am having issues with css formatting. Since the label and textbox are generated separately adding css to it to float left and add padding has been a challenge. I am new to c# and would appreciate any help.
I tried adding the cssClass to both the text box and label but the formatting is off.
Here is my css:
.form-control{
margin-bottom:10px;
width:300px;
float:left;
}
.form-control-label{
display:block;
float:left;
}
I added the css class in the script side using
label.CssClass = "form-control-label";
textbox.CssClass = "form-control"
Here is the output and expected result

Not sure about the text alignment that you expect for the Labels, but you can try the following style classes:
.form-control
{
float: left;
width: 300px;
}
.form-control-label
{
clear: left;
float: left;
width: 120px;
text-align: left;
}
If you prefer the Label texts to be right aligned, you can change the style for:
.form-control-label
{
clear: left;
float: left;
width: 120px;
text-align: right;
margin-right: 8px;
}

Change CssClass of an Textbox programatically

I've got a little Problem with my first ASP-Project.
Im offering the user and input-mask to enter data. At some points I want to control if the input is numeric. If not I want to change the border color of my Textbox.
This is my Textbox:
<asp:TextBox ID="tbOnlyNumeric" runat="server" Height="30px" CssClass="MyNumericBox" autocomplete="off"></asp:TextBox>
The style of the box looks like that:
.MyNumericBox
{
width:250px;
overflow: auto;
font-size: 20px;
position:relative;
right:111px;
border-color: #dcdcdc;
padding: 4px;
margin:15px;
border-width: 2px;
border-radius: 10px;
border-style: solid;
transition: box-shadow 0.3s, border 0.3s;
text-align: right;
padding-right: 18px;
outline: none;
}
My idea was to cast the the Text of the textbox in an try-catch-statment:
try
{
if (string.IsNullOrWhiteSpace(tbOnlyNumeric.Text))
{
throw new Exception();
}
else
{
salesExpected = Convert.ToInt32(tbOnlyNumeric.Text.ToString().Replace(".", string.Empty));
}
}
catch (Exception ex)
{
debugLabel.Text = "EX";
correct = false;
tbOnlyNumeric.CssClass = tbSalesExpected.CssClass.Replace("MyExpectedBox", "MyExpectedBoxWrong");
}
So if there is something wrong with my textbox it should look like that:
but instead it looks like that:
I already noticed that if watch it in chrome the old css class is deleted but the new one isn't addet.
Any idea why?
Thanks in advance

could you try this code. put this in your catch statement
ScriptManager.RegisterClientStartUpScript(this,this.GetType(),"pop","changeCssStyle();",true);
//in the head section of your aspx file create a script that will change the
//css style of the textbox
<script type="text/javascript">
function changeCssStyle(){
//if you are using a master page refer the id of textbox to the id of
//head content in master page e.g. MainContent_tbOnlyNumeric
//lets assume you already have reference to jquery in your head section
$('#MainContent_tbOnlyNumeric').css("border-color","red");
}
</script>

Finally figured outthat using:
tbSalesExpected.CssClass = "MyExpectedBoxWrong";
instead of:
tbOnlyNumeric.CssClass = tbSalesExpected.CssClass.Replace("MyExpectedBox", "MyExpectedBoxWrong");
fixes the problem.
Thanks for your answers and comments!

I want to get the ID of label using C# which is being created by jQuery on RunTime

First I will explain my scenario.
I have asp.net menu (dynamically created menu) and now I want to place push notification just like Facebook on my each menu option. I have designed it using CSS and put a label using jQuery.
if (res == "MenuIcons") {
$(this.parentElement).addClass('Notification');
var $label = $("<label ID=\"notificationlbl" + i + "\" style=\"position: absolute; margin-top: 2%; margin-left: -3.1%; margin-right:-3.3%; z-index: 99; color: white; font-size: 9px; font-family: Verdana; letter-spacing: -1px;\">").text('99');
$(this.parentElement.parentElement).append($label);
i++;
}
But I am totally confused that how to handle it using C# because I am unable to get the ID of the label created on run-time.
If you didn't understand please let me know and I will explain it more.

why don't you set a data attribute to each label, something like
var $label = $("<label data-element-type='notification' ID=\"notificationlbl" + i + "\" style=\"position: absolute; margin-top: 2%; margin-left: -3.1%; margin-right:-3.3%; z-index: 99; color: white; font-size: 9px; font-family: Verdana; letter-spacing: -1px;\">").text('99');
and then you can retrieve the whole collection with jQuery:
$("[data-element-type='notification']").each(function(){...});

Try adding runat="server" attribute in your label tag. You label tag id won't be available until runtime. So what you can do is search for the controllers by the id of your label. In code behind you can do as following
foreach(Contol c in this.Controls)
{
if(c.ID.contains("notificationlbl")
{
//your code
}
}

Dynamic text underlined by braces

I want to underline a word with a round brace. This should be part of a C# Text but if it is easier in CSS, no problem. My problem is that the length of the Word can vary, so the bow must by calculated for each word.
My first idea was using CSS box-shadow:
CSS:
#test {
font-size: 50px;
background: transparent;
border-radius: 70px;
height: 65px;
width: 90px;
box-shadow: 0px 6px 0px -2px #00F;
font-family: sans-serif;
}
HTML:
<div id="test">Hey</div>
Unfortunately due to the dynamic Text sizes I can't calculate them.
Is there a smarter approach to this problem?

You don't need to calculate the width if you use span tags instead.
CSS:
.test {
font-size: 50px;
background: transparent;
border-radius: 70px;
height: 65px;
box-shadow: 0px 6px 0px -2px #00F;
font-family: sans-serif;
}
HTML:
<span id="test" class="test">Hey</span><br/>
<span class="test">Hey this is longer</span>
Working Fiddle: http://jsfiddle.net/Ge8Q3/

I found a different approach.
Working fiddle: http://jsfiddle.net/6pEQA/1/
I used javascript and made the width dynamic:
textWidth function taken from here.
$.fn.textWidth = function(){
var self = $(this),
children = self.contents(),
calculator = $('<span style="white-space:nowrap;" />'),
width;
children.wrap(calculator);
width = children.parent().width(); // parent = the calculator wrapper
children.unwrap();
return width;
};
$(document).ready(function(){
$('#test').css('width',$('#test').textWidth());
});
It also works with h1, div or span. You can check my fiddle. Because it is using span elements to calculate width of the element.