I am developing a Bootstrap Alert in ASP.Net
This is my code in ASPX:
<asp:Label ID="AlertLB" runat="server"/>
This is my code in CSS
<style>
.alert {
display: block;
margin-bottom: 1px;
height: 30px;
line-height:30px;
padding:0px 15px;
display:inline-block
}
</style>
This is my Code Behind:
private void SetAlert(string message, string typeAlert)
{
AlertLB.Visible = true;
AlertLB.CssClass = "alert alert-" + typeAlert;
AlertLB.Text = message;
AlertLB.Focus();
}
This works fine when it is a short message but when it is a very long message the text goes outside the alert:
The perfect solution would be for the text to be truncated to the width of the alert:
Another solution would be for the alert height to be adjusted automatically:
Could you help me? Thank you.
According to bootstrap you can add text-truncate class to alert label:
For longer content, you can add a .text-truncate class to truncate the
text with an ellipsis. Requires display: inline-block or display:
block.
private void SetAlert(string message, string typeAlert)
{
AlertLB.Visible = true;
AlertLB.CssClass = "alert alert-" + typeAlert +" text-truncate";//added text-truncate
AlertLB.Text = message;
AlertLB.Focus();
}
Searching I found the following article that helped me find the solution:
https://asp-net-example.blogspot.com/2013/11/aspnet-example-label-ellipsis.html
I added to my CSS code:
<style type="text/css">
.LabelEllipsisStyle {
text-overflow:ellipsis;
white-space:nowrap;
display:block;
overflow:hidden;
}
</style>
I modified my Code Behind:
private void SetAlert(string message, string typeAlert)
{
AlertLB.Visible = true;
AlertLB.CssClass = "alert alert-" + typeAlert + " LabelEllipsisStyle";
AlertLB.Text = message ;
AlertLB.Focus();
}
The Solution:
Solution Image
Related
I have an ASP.NET application and I create dynamically several combo boxes with AjaxControl Toolkit. All combo boxes are filled up with data but some don't show the data.
Here is my code :
cbo = new AjaxControlToolkit.ComboBox();
cbo.ID = string.Format(CultureInfo.GetCultureInfo("fr-FR"), "cbo{0}", RemoveSpecialCharacters(filter.Key)); // filter.key is the name of the combo
cbo.AutoCompleteMode = AjaxControlToolkit.ComboBoxAutoCompleteMode.SuggestAppend;
cbo.AutoPostBack = true;
cbo.Visible = true;
cbo.MaxLength = 500;
cbo.DataSource = GetFilterData2(requestId, filter.Key); // loads the data source with a list<string>
cbo.DataBind();
cbo.ItemInserted += this.CboItemInserted;
this.cboFilters.Add(cbo);
li.Controls.Add(cbo); // combo is added to the list item
when I inspect my HTML page with Chrome, I get for the combo which works:
<ul id="MainContent_cboScanner_cboScanner_OptionList" class="ajax__combobox_itemlist" style="visibility: hidden; z-index: 1000; overflow-x: hidden; overflow-y: auto; width: 213px; position: absolute; height: 464px; left: 334px; top: 242px; display: none;">
And for the one which doesn't display its items :
<ul id="MainContent_cboEnvironnement_cboEnvironnement_OptionList" class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">
Why an AjaxControlToolkit combobox would not display its items despite having them?
All comboboxes after a bad textbox which had a space in the Id didn't show its items.
I added the Remove-special-characters method on all textboxes and the problem was solved.
Here is what I added:
txt = new TextBox();
txt.ID = string.Format(CultureInfo.GetCultureInfo("fr-FR"), "txt{0}", RemoveSpecialCharacters(filter.Key));
Here is my method:
private static string RemoveSpecialCharacters(string mystring)
{
return mystring.Trim().Replace(' ', '_').Replace("'", "_").Replace("(", string.Empty).Replace(")", string.Empty).Replace("/", string.Empty).Replace(#"\", string.Empty);
}
I searched for some time on this question and couldn't find a working answer anywhere.
I have an asp DropDownList that gets disabled and enabled based on whether the form is in view mode or not. The problem I was having is when the DropDownList.Enabled = false the text is hard to read(grey on lightgrey).
I solved the issue by passing the DropDownList to some methods.
public void DisableDDL(ref DropDownList DDL)
{
DDL.BackColor = System.Drawing.Color.LightGray;
foreach (ListItem i in DDL.Items)
{
if (i != DDL.SelectedItem)
{
i.Enabled = false;
}
}
}
public void EnableDDL(ref DropDownList DDL)
{
DDL.BackColor = System.Drawing.Color.White;
foreach (ListItem i in DDL.Items)
{
i.Enabled = true;
}
}
Is there another way to do this?
I tried using css but that didn't work.
<style>
.disabledStyle
{
color: black;
}
</style>
myDDl.CssClass = "disabledStyle";
There is no readonly property for the dropdownlist control. But you can move the focus to another control when it receives the focus and that will prevent it from being changed and leave the text black.
You need to apply the style to each individual ListItem, and not to the DropDownList itself
I have just put in a dropdownlist and put it to enabled false in the controller, then I found out that it has a class called "aspNetDisabled", I have tried to use CSS to change color on it, it works perfectly.
<style>
.aspNetDisabled
{
color: #FFF;
background-color: #000;
}
</style>
In the code, if you put the dropdownlist, "ddl.enabled = false", it will be like this:
<select name="DropDownList1" id="DropDownList1" disabled="disabled" class="aspNetDisabled"></select>
If the dropdownlists are surrounded by a div with a class, use the class to define the disabled ones:
<style>
.MyCssClass[disabled]
{
color: #FFF;
background-color: #000;
}
</style>
Or try
:disabled,[disabled]
{
-ms-opacity: 0.5;
opacity:0.5;
}
</style>
As said in here:
http://forums.asp.net/t/2028164.aspx?IE+11+disabled+buttons+links+not+shown+as+greyed+out
The simplest way to do that:
<style>
[disabled] { /* Text and background colour, medium red on light yellow */
color:#933;
background-color:#ffc;
}
</style>
I create page number that using counter property in css am trying to put it in the end of the page and I need to use pure css
this is my CSS:
#media print {
table.break {
page-break-after: left;
}
body {
counter-reset: table;
}
table::after {
counter-increment: table;
content: "page"" "counter(table);
}
.no-print, .no-print * {
display: none;
}
}
CSS
#page {
#bottom {
content: "Page " counter(page) " of " counter(pages)
}
}
This rule will generate page footers such as "Page 1 of 89".
For More Information
http://www.princexml.com/doc/page-numbers/
https://stackoverflow.com/a/6109932/4513879
I am trying to simulate a click on a image in IE through C# using SHDocVw but have a problem. My program does not seem to find the img in the code.. Here is what I got:
SHDocVw.ShellWindows AllBrowsers = new SHDocVw.ShellWindows();
foreach (SHDocVw.InternetExplorer ieInst in AllBrowsers)
{
mshtml.IHTMLDocument2 htmlDoc = ieInst.Document as mshtml.IHTMLDocument2;
string html = htmlDoc.body.outerHTML;
foreach (mshtml.HTMLImg imgElement in htmlDoc.images)
{
if (imgElement.nameProp.ToString().Equals("icon_go.GIF"))
{
imgElement.click();
}
}
}
Here is a part of the html code im working on:
<TD align=center><INPUT title="View Detail Statistics" style="BORDER-LEFT-WIDTH: 0px; HEIGHT: 14px; BORDER-RIGHT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; WIDTH: 14px" src="../App_Themes/Company/Images/icon_go.GIF" type=image name=process1></TD></TR>
A problem is that the picture IS a button on the website but I dont know how to press it through the C# code.
Is there maybe another way to select the button? Like through the name "process1" instead of going for the image name?
As pointed out in your comment you are looping IMG but you should be looping INPUT:
foreach (IHTMLElement element in htmlDoc.all)
{
var input = element as IHTMLInputImage;
if (input != null && Path.GetFileName(input.src).Equals("icon_go.GIF", StringComparison.OrdinalIgnoreCase))
{
((IHTMLElement)input).click();
}
}
I have read and try to reproduce steps from this question/answer How to extend Orchard navigation module to add images to menu items
Have created MenuImagePart with "Image" Content Picker field
Have added this part to "Content Menu Item"
Changed code in MenuItemLink-ContentMenuItem.cshtml
But got next error:
https://dl.dropboxusercontent.com/u/86009304/MenuImagePart.png
#using Orchard.Utility.Extensions;
#using System.Dynamic
#{
/* Getting the menu content item
***************************************************************/
var menu = Model.Content.ContentItem;
/* Creating a unique CSS class name based on the menu item
***************************************************************/
// !!! for some reason the following code throws: 'string' does not contain a definition for 'HtmlClassify'
//string test = menu.ContentType.HtmlClassify();
string cssPrefix = Orchard.Utility.Extensions.StringExtensions.HtmlClassify(menu.ContentType);
var uniqueCSSClassName = cssPrefix + '-' + Model.Menu.MenuName;
/* Adds the normal and hovered styles to the html if any
***************************************************************/
if (menu.MenuImagePart != null)
{
if (!string.IsNullOrWhiteSpace(menu.MenuImagePart.Image.Url))
{
using(Script.Head()){
<style>
.#uniqueCSSClassName {
background-image: url('#Href(menu.MenuImagePart.Image.Url)');
width: #{#menu.MenuImagePart.Image.Width}px;
height: #{#menu.MenuImagePart.Image.Height}px;
display: block;
}
</style>
}
}
if (!string.IsNullOrWhiteSpace(menu.MenuImagePart.HoverImage.Url))
{
using(Script.Head()){
<style>
.#uniqueCSSClassName:hover {
background-image: url('#Href(menu.MenuImagePart.HoverImage.Url)');
width: #{#menu.MenuImagePart.HoverImage.Width}px;
height: #{#menu.MenuImagePart.HoverImage.Height}px;
}
</style>
}
}
}
}
<a class="#uniqueCSSClassName" href="#Model.Href">#Model.Text</a>
What I done wrong and how should I create this image to add to newly created "Content Menu Item"?
You have a contentpicker field on there, you want a mediapickerfield (if you are Orchard 1.6).