I have a Label in my .net page which I am trying am dynamically adding text to. What I would like to do is add part of the text in green, and part in red.
The control in the page is set to forecolor=green.
I'm adding text through a stringbuilder, e.g
bodyText.Append("</br>");
bodyText.Append( startDate.ToShortDateString() + " - " + endDate.ToShortDateString());
Now I wish to append some more text, although in red rather than green.
Is it possible to do the the same Label? Or does it need to be a separate Label side by side?
This is untested, but something like this should work.
<span class="blue">First</span>
<span class="red">Word</span>
CSS
.blue
{
display: inline;
color: blue;
}
.red
{
display: inline;
color: red;
}
Have you tried adding markup when you add the texts meant to be red? Something like
bodyText.Append("<span style='color:red'>" + startDate.ToShortDateString() + " - " + endDate.ToShortDateString() + "</span>");
Related
I have a DIV which has images and hyperlinks, which are added in C# by CODE
mStr.Append(" <div id='wn'>");
mStr.Append("<div id='lyr1'> <ul id='horiz'>");
if (dv.Count > 0) {
for (int i = 0; i < dv.Count; i++) {
mStr.Append("<li width='450' height='110' style='padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px;'>");
mStr.Append("<a href='PlayGame.aspx?GameID=" + GameLib.Utilities.Encrypt(dv[i][1].ToString()) + "'>");
mStr.Append("<img src='../" + dv[i][10].ToString() + "' width='156px' height='109px' style='padding-left:0px;' />");
mStr.Append("</a>");
mStr.Append("</li>");
}
mStr.Append("</ul></div></div>");
RelatedGames.InnerHtml.Remove(0, RelatedGames.InnerHtml.Length);
RelatedGames.InnerHtml = mStr.ToString();
}
..but the problem is that I want to scroll the DIV so that i can go through all images. I tried many ways in JQuery but it has been stuck and static. I will be grateful for any suggestions.
Or, is there any other way that the same functionality can be achieved?
Simply add the following CSS:
#lyr1 {
overflow: auto;
}
Overflow is a CSS property that specifies how content that is larger than its parents should be displayed. The default value is visible, which means that everything will be displayed, even if it goes beyond the size of its parent (which it does, in your case). Setting it to auto will make everything that doesn't fit in the parent hidden, and will add scrollbars whenever necessary. To make scrollbars always visible, do overflow: scroll;.
Live demo: http://jsfiddle.net/DanVicBez/kNk4y/
Just use a css property overflow:scroll to the target div
<div id='lyr1' style='overflow:scroll'>
In my asp.net website i have a textbox which provides the log information. I am using this log to display the error,success and other information. What i want to do is i want to show the result text in textbox in color according to the type of log. For eg; i want to display error as red text, success as green and so on.
I tried the following code but using this code changes the color of entire content of textbox.
/// <summary>
/// colorIndex (0 = default, 1 = red, 2 = green)
/// </summary>
/// <param name="logValue"></param>
/// <param name="colorIndex"></param>
private void writeToLog(string logValue, int colorIndex)
{
if (colorIndex == 0)
{
TextBox2.ForeColor = Color.Black;
}
else if(colorIndex == 1)
{
TextBox2.ForeColor = Color.Red;
}
else if(colorIndex == 2)
{
TextBox2.ForeColor = Color.Green;
}
TextBox2.Text = "[ " + DateTime.Now + "] " + logValue + Environment.NewLine + TextBox2.Text;
}
Actually i want the output as follows:
You can see in above output there are three different colors of text in same texbox.
This output is actually from the desktop application. And i want to show same type of output in asp.net web page? How can i do it? Please help. Thanks in advance!!
Thanks for the answers everyone! Like Knaģi said, since may client need not to edit the value in log,I thought use of WYSIWYG editors was unnecessary. So for solving my problem i used a div instead of textbox.
<div id = "log" style="border: thin solid #00CC99; width:844px; height:193px; overflow:auto;" runat= "server">
</div>
And in my code behind i filled the log as:
private void writeToLog(string logValue, int colorIndex)
{
logValue = "[ " + DateTime.Now + "] " + logValue;
if (colorIndex == 0)
{
string htmlCode = "<font style='color:black'>"+logValue+"</font><br/>";
log.InnerHtml = htmlCode + log.InnerHtml;
}
else if(colorIndex == 1)
{
string htmlCode = "<font style='color:red'>" + logValue + "</font><br/>";
log.InnerHtml = htmlCode + log.InnerHtml ;
}
else if(colorIndex == 2)
{
string htmlCode = "<font style='color:green'>" + logValue + "</font><br/>";
log.InnerHtml = htmlCode + log.InnerHtml ;
}
}
You can't use a simple TextBox. Instead you must use one of many WYSIWYG editors. There are many to choose from available with wrappers for any server side language.
But since your code does not really need the user to be able to modify this data, you should simply render HTML code with the correct styles and apply overflow-y: auto; max-height:100px CSS styles so that the scrollbar is rendered when the content is too long.
In asp.net, i think table is best option.and you can change text color using id and class for
and give there style by applying css
<table id="log">
<tr><th>Response Type</th><th>Response Time</th><th>Response Data </th></tr>
<tr class="error"><td></td><td></td><td></td></tr>
<tr class="info"><td></td><td></td><td></td></tr>
</table>
you need to add row by jQuery or Code behind
i think it is help full for you.
You can use label instead. That way it would be simple and easy to render the text with html span tag to define different styles.
if (colorIndex == 0)
{
Lable2.Text += "<span style='color:Black'>Black information...</span><br/><br/>";
}
else if(colorIndex == 1)
{
Lable2.Text += "<span style='color:Red'>Red information...</span><br/><br/>";
}
else if(colorIndex == 2)
{
Lable2.Text += "<span style='color:Green'>Green information...</span><br/><br/>";
}
You need use RichTextBox
or some WYGIWYS editor
I'm trying to display image in WebBrowser control with this code:
string captcha = "<img src=\"http://www.reddit.com/captcha/{0}/.png\" border=\"0\"></img>";
webBrowser1.DocumentText = String.Format(captcha, iden);
but it looks like this. Look at only the top image. There is white space on top-left and image is moved down-right.
I have tried border=0; padding=0; vertical-align:top; inside img and body tag and nothing works.
Is there a way to remove that space?
The <html> and <body> elements have padding/margins. Try this:
string captcha = "<style>html, body {{ padding: 0; margin: 0 }}</style><img src=\"http://www.reddit.com/captcha/{0}/.png\" border=\"0\"></img>";
webBrowser1.DocumentText = String.Format(captcha, iden);
I have a TextBox with an Ajax Control Toolkit AutoCompleteExtender, and I'm having some issues with the formatting.
If I omit the CompletionListCssClass, CompletionListItemCssClass, CompletionListHighlightedItemCssClass values, it displays fine. But I just need to align the autocomplete text to the left, and the size of the TextBox.
If I set these values in the site.css:
.autocomplete_listItem
{
background-color: #222;
color: #cfdbe6;
}
.autocomplete_highlightedListItem
{
background-color: #999;
color: #111;
}
.autocomplete_completionListElement
{
}
then I bullets on the list.
How do I make the bullets not show, align the list to be right under the TextBox, the list items left aligned, and the size to match the TextBox?
All you need to do to remove the bullets is add list-style-type:none to each of your classes:
.autocomplete_listItem
{
background-color: #222;
color: #cfdbe6;
list-style-type:none;
}
.autocomplete_highlightedListItem
{
background-color: #999;
color: #111;
list-style-type:none;
}
.autocomplete_completionListElement
{
list-style-type:none;
}
This is because the autocomplete results are returned as a bulleted list by the AJAX extender - so if you customize the style, you need to make sure and hide those bullets.
In order to tell you how to align it properly with other elements, I would need to see your markup (which is not included in your question).
i am displaying the one confirm box after saving the values like this
showalert("Quote has been saved successfully. Your Submission Number is:" + SaveValue );
now i have display the savevalue bold and underline and some fore color, how to apply(using any format and html styles also)
You could create your own javascript popup alert.
function ShowAlert(message) {
$('#popup').fadeIn(500);
$('#popupmessage').html(message);
};
Your html could be something like this
<div id="popup" class="window">
<p id="popupmessage"></p>
</div>
your code behind could then be
ScriptManager.RegisterStartupScript(this, this.GetType(),"AlertScript","ShowAlert('Quote has been saved successfully. Your Submission Number is:<span style='text-decoration:underline;'>" + SaveValue + "</span>);"), true);
This way you can display a popup message and style it to your needs.
I don't know how to change the style as your way, but here is another alternative(it's written in chinese but the code is not):
function ShowAlert(message) {
$('#popup').fadeIn(500);
var newmessage = "<span style='color:red;font-weight:bold;text-decoration:underline'>" + message + "</span>";
$('#popupmessage').html(newmessage);
};