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;
}
Related
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!
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
}
}
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.
I'm using this code to make a image in a link in a C# MVC4 app :
#Html.ActionLink(" ", "../Edit", new { id = item.Id }, new { #class = "edit" })
And the CSS :
a.edit
{
background: url("~/Content/Images/edit.png") no-repeat top left;
display: block;
}
But the image don't charge (404 on the img path),
So I expected the RouteConfig, but google says no.
The image is in MyAppName/Content/Images/edit.png
Thanks to help me
EDIT : I tried
url("~/Content/Images/edit.png")
url("/Content/Images/edit.png")
url("../Content/Images/edit.png")
url("../../Content/Images/edit.png")
I think you want background-image instead of just background:
a.edit {
background-image: url("~/Content/Images/edit.png");
backbround-repeat: no-repeat;
background-position: left top;
display: block;
}
Try without the "a" such as :
.edit
{
background: url("~/Content/Images/edit.png") no-repeat top left;
display: block;
}
It is empty on the link text of #HTML.ACTIONLINK you had given which will throw an error. Use
instead
From my little experience with MVC the only way to achieve what you need is to include the CSS in the view itself then:
<style type="text/css">
a.edit { background-image: url("#Url.Content("~/Content/Images/edit.png")"); }
</style>
The #Url.Content will map the given URL properly.
The image can't display if there is no place, so When I put "test" content instread of " ", the image was appearing.
The solution :
a.edit {
background: url("#Url.Content("Content/Images/edit.png")") no-repeat transparent;
width: 14px;
height: 14px;
display: inline-block;
float: left;
}
Thanks all
One of gridview's column is a "Content" column that can have few lines of text (it can be literal, textbox or label ).
In "default" mode i want it to show only the first line and a link button: "(more)" or "(read)".
Clicking on this link should expand the column and display full content.
What is the best way to do this?
Selecting first 10 characters of content text and using it as your link's text is better aproach. This will reduce size of data that retrieved from database like that :
SELECT ContentId, SUBSTRING(Content, 0, 10) AS Content
FROM ContentTable;
Then you can use template column for this column that includes a label and a link. Lbel for the description text, link for the details.
<asp:TemplateColumn>
<ItemTemplate>
<asp:Label
Text='<%# Eval("Content") %>'
runat="server"/>
<a href='<%# Eval("ContentId", "contentdetails.aspx?id={0}") %>'>More</a>
</ItemTemplate>
</asp:TemplateColumn>
This will help you.
http://www.asp.net/community/control-gallery/Item.aspx?i=1465
try this. http://mosesofegypt.net/post/BuildingjQueryAndASPNetAJAXEnabledControlsjQueryCollapsiblePanelExtenderPart2.aspx
Use the power of CSS!
Place this inside your gridview row. It will naturally push out the row to the height of your content, or the amount of rows required.
<div class="toggle">
<div class="toggle-header">
Toggle!
</div>
<div class="toggle-height">
<div class="toggle-transform">
<p>2nd line of text</p>
<p>3rd line</p>
<p>4th line</p>
<p>etc</p>
</div>
</div>
</div>
And use this CSS...
body {
font-family: sans-serif;
}
.toggle {
position: relative;
border: 2px solid #333;
border-radius: 3px;
margin: 5px;
width: 200px;
}
.toggle-header {
margin: 0;
padding: 10px;
background-color: #333;
color: white;
text-align: center;
cursor: pointer;
}
.toggle-height {
background-color: tomato;
overflow: hidden;
transition: max-height .6s ease;
max-height: 0;
}
.toggle:hover .toggle-height {
max-height: 1000px;
}
.toggle-transform {
padding: 5px;
color: white;
transition: transform .4s ease;
transform: translateY(-100%);
}
.toggle:hover .toggle-transform {
transform: translateY(0);
}
You may want to disguise the "toggle" with a textbox of your "(more)" line to expand the rest.
Let us know if it worked.