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>)
Related
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 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>
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 have tried various ways to get a vertical scroll bar to show for my GridView when there are to many rows.
I have tried adding a DIV around the GridView and it looks horrible as its padding like 20px away from my GridView. I there a way so when the information is coming from the database when the GridView hits its maximum height (200px) the GridView will have a scroll bar?
I also don't want my Headers and Rows to have really big Heights when i do this because when i tried setting a height for my GridView they went bigger if there was on 1 piece of data.
CODE:
#gv_AcceptedRequests, #gv_PendingRequests, #gv_DeclinedRequests {
position:absolute;
margin-top: 120px;
margin-left: 60px;
width: 480px;
font-family: Arial;
font-size: 12px;
border-color: orange;
overflow: auto;
}
Attempt1:
For some reason the DIV isnt startingat the top of the datagrid?
Can you provide code (html & css) of what you allready made up.
You can place a surrounding DIV around the GridView. The code below places a DIV around your gridview. With a CSS (preferred external CSS file) of overflow-y (shows a vertical scrollbar) and zero padding. If there's still padding left, then there's an issue with the CSS on the page.
<div id='scrolldiv' style='position:absolute;border:1px solid black;height:100px;width:650px;overflow-y:scroll;margin-top:120px;margin-left:60px;'>
<div id='gv_AcceptedRequests' style='position:absolute;width:480px;font-family:Arial;font-size:12px;border-color:orange;overflow:auto;'>
//gridview
</div>
</div>
Please place grid view inside DIV tag and apply style height,width and overflow to DIV.
<div style="height: 100px;overflow:auto">
<asp:gridview id="grid" >
</<asp:gridview>
</div>
Hope this helps
Does anyone have a better styled DropDownList or ready css file for the asp:DropDownList?
I could not find something finished at www?!
<asp:DropDownList ID="DropDownList1" runat="server" Width="50px">
</asp:DropDownList>
I could imagine something like jQuery UI style.
Thanks for your constructive answers!
I have used this in my project look's good.
Try this : link
.dropdown1 {
background: url(http://maxgxl.com/max4u/images/selectArrowDown.png) no-repeat 95% center;
width:150px;
border: 1px solid #000;
overflow: hidden;
border-radius:5px;
}
.dropdown1 select {
border:0px;
width:168px;
background:none;
}
The link you have shared here seems to be a comboBox. If you want to design your dropdownlist control then you can have your own styles as well.
Think of the same link that you have given here. It contains a textbox having a button whose background image is a small triangle that seems to be a dropdownlist, and a simple div/list control(ul-li) that contains all the items that are populated below the dropdown list.
Now you need to decide what you need to have in your design. based upon your requirement you can customize your dropdownlist here.
See this is just a way how you can create your customized dropdownlist of your own style. If you go for the jquery dropdownlist then you can have the same look and feel that you can have designed of your own. So you decide the things you want to have with your dropdownlist.
Thanks
.search_categories .select{
background: transparent;
line-height: 1;
border: 0;
padding: 0;
border-radius: 0;
width: 120%;
position: relative;
z-index: 10;
font-size: 1em;
}