I have a gridview with a checkbox in every row. When put into Edit mode the Checkbox can be checked/unchecked; but I don't want the checkbox to be editable in any other mode. The user easily might get confused by checked boxes that do not reflect the real values saved back in the database.
<asp:CheckBox id="checkboxCustomerRequired" runat="server" Checked='<%# Bind("CustomerRequired") %>' Enabled="false" CssClass="Check"/>
Possible workarounds I tried:
1) Setting enabled = false
This achieves the goal, but the greyed out box is ugly and prevents from capturing it's state in one glance. Therefore I tried to set the forecolor of the box in the OnRowDataBound Event back to white, but it doesn't work. Checkbox.ForeColor = System.Drawing.Color.White;2) Using OnCheckedChange EventThe idea is to set it's state back once it had been changed. The problem is that I'm moving within a gridview and I can't figure out how to establish the row in which the Checkbox Click had occurred. This doesn't seem to be possible in the given situation.Any suggestions?
Martin
You can make the CheckBox read-only by returning false in the onclick client-side event:
<asp:CheckBox ID="checkboxCustomerRequired" runat="server" onclick="return false;" ... />
Have you tried syling the disabled state with CSS, so it's disabled but still looks the way you want it to?
input[type=checkbox][disabled]{
outline:1px solid red; // or whatever
}
The checkbox appearance of a disabled is being controlled by the browser. It is not advisable to tamper with this since it will look different in each browser; An appearance users are probably already familiar with. See the comparison below for how each browser and OS will display a disabled checkbox.
If you really want to unify the style of the checkbox, you can create a stylesheet that overrides the various attributes (background, border, etc.) and apply them to the :disabled state.
input[type=checkbox]:disabled {
-webkit-appearance: none; /* disable chrome and safari styles */
width: 12px;
height: 12px;
background: white;
border: solid 1px black;
vertical-align: middle;
}
<input type="checkbox" disabled>
<label>This is a checkbox</label>
Related
I am building a web application in ASP.NET using webforms.
I have an input html element which I have set to run at server and I want to fire an event whenever the date is changed.
<input id="datePicker" class="form-control" style="display: inline; margin-left: 5px; width: 15%; text-align: center;" type="date" runat="server" onserverclick="Date_Changed"/>
I have the event in my codebehind:
protected void Date_Changed(object sender, EventArgs e) {}
However, the event is never fired.
Don't believe that server side click events can be wired up to a input that way (using the onserverclick).
I would consider dropping in a HTML button, say like this:
<button id="datePicker"
class="form-control"
style="display: inline; margin-left: 5px; width: 15%; text-align: center;"
type="date"
runat="server" onserverclick="Date_Changed" />
And even better yet, drop in a asp.net button.
If you drop in a input tag, then I don't think you can get the asp.net system to wire this up for you. You could I suppose write this:
(this is what a plane jane above button becomes:
<input onclick="__doPostBack('Button11','')"
name="Button11" type="button" id="Button11" value="button">
So you could try above - but using a "input" tag I don't believe will work, but try a HTML button as per above - that does allow "on server click".
Do keep in mind that if you drop in a asp.net text box, and set textmode = "date"?
Say like this:
<asp:TextBox ID="MyDateTest" runat="server" TextMode="date">
</asp:TextBox>
Then you see this:
So, above is a built in feature - you don't need any js, bootstrap, or anything at all.
but, you could add a "client" side click to your markup, as I posted a above the do post-back would (should) run your click event. However, it probably a whole lot better to not fight asp.net, since then you quite much hand coding a lot of HTML, and doing that means you quite much toss out most of the features of why you would use asp.net in the the first place (that means to take advantage of all the built in controls, and the pre-processing of those controls for you).
as you can see in the image attached, the text in the dropdown list gets cut/ is overlapping due to which complete text is not visible
I have a dropdown list in aspx page which i am binding via db and i have not given any fixed height to the dropdownlist control as seen below
Happening on a display with resolution 1680*1050. works well with resolution of 1366*768. have searched a lot on web but no solution as such. plz help !
this is markup for this drop down list:
<asp:DropDownList ID="ddlLossTypeTime" runat="server" AutoPostBack="true"
Width="75%" style="height: auto !important;
overflow: visible !important;overflow-y:auto"></asp:DropDownList>
overflow: visible
to overflow: auto or overflow: hidden.
I have a textbox with a spinner that allows the user to select numbers. But if a certain user is logged in then I want to disable the textbox and the spinner.
<asp:TextBox runat="server" ID="txtCreditDays" CssClass="integeronly spinner" Text="0" Width="20px"></asp:TextBox>
I used this to disable the textbox:
txtCreditDays.Enabled = false;
But the user can still click on the spinner and change the value. I need to disable the spinner to but since it is a CssClass I don't know how.
Here is the code for the spinner:
.spinner {
border: 0px solid #85B1DE !important;
font-weight:normal !important;
padding:0px !important;
background: none !important;
min-width: 60px !important;
}
I can't edit the CSS code because it is being used by other parts of the code.
You can use Replace method very simple.
txtCreditDays.CssClass= txtCreditDays.CssClass.Replace("spinner","");
I Don't know asp.net. But i can give you a logic through php.
In PHP, We do like this.
<input type="text" class="<?php if($user_loged_in){ echo "some_other_class"; } else { echo "spiner";} ?>">
Using an if statement could solve this in asp
I'm using Ajax control toolkit's combobox in my website. I'm binding custom type data to it dynamically. Here is the aspx code I put for it.
<ajaxToolkit:ComboBox ID="ddlAddAccount" runat="server" AutoPostBack="False" DropDownStyle="DropDownList" AutoCompleteMode="SuggestAppend" CaseSensitive="False" CssClass="ComboBoxStyle" ItemInsertLocation="Append"/>
Here is the CSS to that:
.ComboBoxStyle .ajax__combobox_itemlist
{
border: 1px solid YellowGreen;
font-size:medium;
font-family:Courier New;
padding-left: 0px;
list-style:none;
list-style-type:none;
}
The problem I'm facing is that when the DDL is rendered on the page, it is showing some weird boxes inside the dropdown. They seem to be bullets. But despite putting list-style-type : none; in the css, there is no change in the output. That is, the weird boxes still show up. Here is the screen clip of the rendered combo box:
I even checked the rendered HTML mark up to see if there is any character that is being appended but there isn't. The <li> tags in the <ul> tag simply has the list of elements that are binded.
Any Idea what this can be and how to get rid of these?? I tried ddlAddAccount.Items.Clear(); before binding but that didn't help.
Thanks a lot!
If it is indeed list bullet items you can try putting !important in the style to make sure that there is no list style applied.
.ComboBoxStyle .ajax__combobox_itemlist
{
border: 1px solid YellowGreen;
font-size: medium;
font-family: Courier New;
padding-left: 0px;
list-style-type: none !important; /* Add the important here */
}
I can't reproduce your issue but you must have some sort of css style being applied to ul or li tags that is causing this. I know you mentioned you unchecked all the styling on the control in the browser but there must be something you missed.
Hopefully this works.
Most probably some additional styling is conflicting with your combo-box.
Use a browser developer tool (F12 developer tools in IE, Tools --> developer tools in chrome) and isolate the CSS applied on your list.
Also the combo-box will not be rendered as <option>. It should be rendered as an unordered list (<ul><li>...</li>)
I have the same behavior from many similar questions here.
But I tried anything and nothing happens to me.
I have 2 html controls. One anchor tag and a input button.
I applied vertical-align:top; float:right; display:inline-block; independently and together and nothing happens.
When I click on Close, I see a shadow like a button! I want them inline both controls
At the end of table I incluided a Div like this.
<div style="float:right;">
<asp:Button ID="btnInput" runat="server" Text="Add selected"></asp:Button>Close
</div>
You need to set a width for each element when you make them display:inline-block, otherwise they default to 100%.
Here is a jsFiddle with the closest equivalent markup I could make. (asp buttons don't work)
As Dolchio said, every element must have display: inline-block for this to work. Note that your float:right will not achieve anything helpful in this scenario.
Try adding the CssClass attribute to the asp button and styling that class.
So it would look like <asp:Button ID="btnInput" runat="server" CssClass="myButton" Text="Add selected"></asp> and in your css myButton{display:inline-block,vertical-align: top, width: 200px substitute width for whatever the width of the button is (not entirely familiar with asp buttons and their implied widths).