Hello again everyone,
I am putting validation on a Web Form I'm making, and I set all the placeholder text to red to indicate which fields were required. I also have a dropdownlist that is required, so I wanted to change the text color of the first "default" option to be red also. All the solutions I find across the internet say to just style it:
<asp:ListItem style="color:red" Value=null>--Select Tax Status--</asp:ListItem>
However, this is not making any difference in Chrome or IE. I inspected the element and it even has the element.style color as red, but it is clearly not...
Anyone know how to do this so it works? or where I'm messing up?
IMHO if you want to indicate that some fields are required you should use something like put an asterisk(*) to indicate that, and then focus and color with red (or another color) the controls they are missing when clicking the submit button, this way is more standardized and thus the users can understand easily what you are trying to tell them, because they are more familiar in this way, I think it could give a better experience to your users .
However, as #Yuriy commented, the DropDownList/ListItem control is rendered into SELECT/OPTION tags, so if you set the style="color:red" to a ListItem tag only the Option tag is going to be red.
You should apply the style to the DropDownList control as below:
<asp:DropDownList ID="ddl" style="color: red;" runat="server">
<asp:ListItem>--Select Tax Status--</asp:ListItem>
</asp:DropDownList>
It will be rendered as
<select name="ddl" id="ddl" style="color: red;">
<option>--Select Tax Status--</option>
</select>
Dropdown/ListItem render as HTML SELECT/OPTION elements - there're very limited styling you can apply to those - i.e. you can change background color.
Your solution is either use different elements or apply a 3rd party library (e.g. https://select2.github.io/) that turns normal select into styleable elements
Related
Some people like to disable text selection for various reasons like keeping it on can make a page look ugly if someone hits CTRL A, or maybe you don't want people potentially leaving your site after highlighting text to search for on Google!
I globally disabled text selection on my site and wanted to re-enable it on specific elements as required. After some investigation, I found the solution.
All the code listed is tested and working on multiple browsers.
CSS example of globally disabling text selection.
* {user-select:none;}
The solution. Please check out the jsfiddle link below for a working example.
HTML
<h2>Unselectable/Selectable</h2><br/>
<p>You can't select any of this text but you can select the text in the box below because a css rule has been made specifically to reenable text selection for that particular element.<br/><br/></p>
<input name="title" id='selectMe' type="textbox" />
CSS
* {padding:20px; user-select:none;}
#selectMe {user-select:text; border:1px solid #000; padding:10px;}
http://jsfiddle.net/7zwr0ody/1/
I have this:
<asp:localize id="locPopupInfo" runat="server" meta:resourcekey="locPopupInfoRc1"
text="Select up to 8 cameras to include." enableviewstate="false"></asp:localize>
I want to make the text be italic.
I tried adding style="font-style:italic" and style="font:italic". I also tried adding a css:
.italic-text{
font-style:italic;
}
Then doing cssclass="italic-text" and class="italic-text".
None of these worked. Is there any way to do this with asp:Localize?
Localize control inherits from Literal control. It does not output any markup itself, just the content in localized manner. Here is what MSDN says about it:
Although the Label control allows you to apply a style to the displayed text, the Localize control does not.
If you want to apply the style nevertheless, here are the options:
Switch to Label or similar control
Wrap in some server-side control, say Panel, and apply styling to it
Or wrap Localize in a client side tag with style applied. If you are very specific about italic style, you can just do <i><asp:Localize ...></i>
Put your localize into a span and then apply style class onto the span
<span class="italic-text">
Your localze stuff ....
</span>
To understand localize see this
<asp:ListBox
ID="ddlPA"
ClientIDMode="Static"
runat="server"
AutoPostBack="true"
SkinID="x"
CssClass="ListBoxCssClass"
SelectionMode="Multiple"
OnSelectedIndexChanged="ddlPA_SelectedIndexChanged">
</asp:ListBox>
When i select an item in asp:listbox , the selected item color changes to gray, i want to change the color to blue.
how can i do the same?
Recently searched for this and never found a reasonable solution so I created one with CSS only. I switched from a ListBox to a CheckBoxList and hid the checkbox.
In this example to keep it simple I just made the checkbox invisible for all items (option in CSS), and set the sibling text font-weight to 600 for the selected item (label in CSS) - you can CSS to your heart's desire once you have the selector setup correctly - background, pseudo :before image or border, etc. Keep in mind if you go with something before the item you can create spacing issues - I will include a CSS sample (after the first sample) for the "not checked" items so you can add padding/margin to make up for this offset. Lots of ways to do this but this will get you there until you feel like exploring other options.
ASPX:
<asp:CheckBoxList ID="chkList" CssClass="someclassname" runat="server" </asp:CheckBoxList>
CSS:
.someclassname input {display: none;}
.someclasssname input:checked + label {font-weight: 600;}
Personally I prefer line breaks and indents for CSS but easier reading here without.
Here is a CSS selector for the other non-checked items.
CSS:
.someclass input:not(:checked) + label {font-weight: 400;}
Again, we are hiding the checkbox and then formatting the text to the right of the checkbox. One additional nice feature here is that now a user can select multiple items with a touch based input device - no need for a ctrl or space key.
Also, unlike the ListBox, the CheckBoxList does not allow you to restrict the user to one selection. If you need this behavior then you can switch to a RadioButtonList.
You can set background colors from the .aspx page by specifying either the CssClass, or the BackColor property.. it looks like:
<asp:ListBox CssClass="MyListBox" BackColor="#e0e0e0"></asp:ListBox>
Setting the selected item is a little trickier... I don't believe there is an attribute for this directly. You can set it in javascript, or jQuery, something like:
<script type="text/javascript">
$(document).ready(function() {
$('#MyListBox').click(function() {
$("#MyListBox option:selected").css("background-color", "#e0e0e0");
});
});
</script>
Hi i have a textbox which i am using as a counter to show how many characters are still allowed in another textbox. I have made it read only and its background transparent so that you cant tell it is a select box. The only problem is you can still click on it or tab to it. Is there a way to do this so it appears just like normal text and people cant click on it or tab to it?
If this is an Asp.Net Web Control set it's Enabled property to false
<asp:TextBox Enabled="false" />
If it is HTML you can do this:
<input type="text" disabled />
Just replace the input element with a span element or some other non-input element. This requires a trivial change to your JavaScript; you would assign to the innerHTML property of the element rather than value. Then the content will appear as normal text, and you can style it as desired.
you need some style with css and some trick with Jquery.
CSS
.readonly{
border:none;
background:#aaa;
}
Jquery
$(".readonly").focus(function(){
$(this).blur();
});
now just add class="readonly" to your textbox.
<asp:TextBox cssClass="readonly" />
check demo here .
work on C# asp.net vs 05. I have a requirment, I have to fill text box with some data on gridview , which is coming from database and make it read-only
After that user can not enter any text on gridview template field. If I set textbox Enabled=false, then i lose text color, but i want to show text color. Just textbox to not be editable. I just want users to not be able to write anything in my textbox.
Isn't there a readonly property for the text box.
If then you can use
ReadOnly="true"
for the text box.
If you can use a label then I would prefer that one.
For wrapping contents inside a label you can use
word-wrap
word-wrap: break-word
Inside the properties choose your column field and in the properties.
Under Styles section
You can give a CssClass to the column.
If you specify CssClass as 'TextStyle'
the css looks like this
.TextStyle
{
color: #a9a9a9
}
In the color attribute give either the color name like 'red' or the hexcode like '#000000' for the text.
Enabled="false"
I'd use CSS to make a label look like a textbox.
Why does everyone insist on using an asp:label for this sort of thing? Just because it renders a <span> if you don't supply an AssociatedControlId?
You should look at using an asp:Panel or possibly an asp:Literal or asp:PlaceHolder for this as they will give you greater control over the output, and cleaner markup.
Panel would be better, as this will render the contents in a <div> rather than the PlaceHolder or Literal which won't add any extra markup.
The content you are putting in here is a semantic division, and so should really be marked up as such, and by default, <div>s are treated as a block display type, rather than as inline (<span>).
Here's a quick proof of concept I just knocked up.
<head runat="server">
<style>
.readTest
{
border: none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" Text="Do something" ReadOnly="true"
ID="txtOne" CssClass="readTest"></asp:TextBox>
</div>
</form>
</body>
</html>
Personally I would use a label, though you could write a custom control that renders a textbox or a label, depending on the state your app is in.
I'd prefer to write the text directly to the cell using a literal or String() output rather than using a control. It's a bit cleaner and will help minimize the amount of ViewState being written. Either that, or turn off ViewState for those controls being added.
Specify your CSS for the TextBox in the row created event of the GridView.