How can i remove the arrow at dropdownlist show in asp.net,i dont want the arrow because i want use my own image to create a fancy look for dropdownlist.
<asp:DropDownList ID="cboLang" Runat="server" AutoPostBack="True" onselectedindexchanged="cboLang_SelectedIndexChanged" Font-Size="XX-Small" Width="95" Height="26" >
<asp:ListItem Value="EN-US">ENGLISH</asp:ListItem>
<asp:ListItem Value="ZH-CN">中文</asp:ListItem>
<asp:ListItem Value="TH-TH">ภาษาไทย</asp:ListItem>
<asp:ListItem Value="EN-IE">tiếng Việt</asp:ListItem>
<asp:ListItem Value="EN-TT">Korean</asp:ListItem>
<asp:ListItem Value="EN-AU">Indo</asp:ListItem>
</asp:DropDownList>
you can add cssClass to your dropdown cssClass="select" like :
<asp:DropDownList ID="cboLang" Runat="server" cssClass="select" AutoPostBack="True" onselectedindexchanged="cboLang_SelectedIndexChanged" Font-Size="XX-Small" Width="95" Height="26" >
<asp:ListItem Value="EN-US">ENGLISH</asp:ListItem>
<asp:ListItem Value="ZH-CN">中文</asp:ListItem>
<asp:ListItem Value="TH-TH">ภาษาไทย</asp:ListItem>
<asp:ListItem Value="EN-IE">tiếng Việt</asp:ListItem>
<asp:ListItem Value="EN-TT">Korean</asp:ListItem>
<asp:ListItem Value="EN-AU">Indo</asp:ListItem>
</asp:DropDownList>
and add the following style to the head tag
<style>
.select
{
border-radius: 5px;
-webkit-appearance: none;
}
</style>
You cant do it with asp.net dropdown controls.
you can use auto complete textbox at that place.
it is also possible to hide arrow with telerik combo box.
Not possible to change how <select> tag is rendered , you can use any other way to display multiple values as autocomplete textbox
check these links :
Remove dropdown (select) button from dropdown menus?
Remove drop-down arrow from <select> element?
Related
I have problem adding spaces between CheckBoxes and text next to them. I want to have them intended a little bit, not next to each other without some space.
▓car▓wash▓next and have it like ▓ car ▓ wash ▓ next
CheckBoxes aren't fixed at size, they are gathered from database.
I have CheckBoxList like:
<asp:CheckBoxList ID="chBoxListManufacturer" runat="server" BackColor="LightBlue" BorderColor="Red" CellPadding="5" CssClas="mycheckbox"
TextAlign="Right" RepeatDirection="Horizontal" RepeatLayout="Flow" OnSelectedIndexChanged="BoxListManufacturer_OnSelectedIndexChanged" AutoPostBack="True" />
Css:.mycheckbox {margin-right: 15px;}
I was reading docs, but nothing works.
you can try with css class:
your checkboxlist here.
<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="test">
<asp:ListItem Text="Yes" Value="Yes" Selected="True"></asp:ListItem>
<asp:ListItem Text="No" Value="No"></asp:ListItem>
</asp:CheckBoxList>
css here.
.test td
{
border:1px solid red;
margin-right:10px;
padding-right:20px;
}
output.
Maybe a trivial answer: put a after each checkbox, this will allow you some space between the control and the following label
I have a vertical radiobuttonList sitting in a table.
How do I decrease the spacings between each of the listitems so that the total height of radiobuttonList is smaller?
I have tried using padding and margin but none seems to work.
Use CellPadding property of RadioButtonList, you can set 0 for minimum height
<asp:RadioButtonList ID="rdlst" runat="server" CellPadding="15" CellSpacing="0" ><asp:ListItem Value="1" Text="1"></asp:ListItem> <asp:ListItem Value="2" Text="2"></asp:ListItem></asp:RadioButtonList>
you can just add this inside the radiobuttonlist tag:
<asp:RadioButtonList ID="RadioButtonList1" runat="server" Width="300px">
radiobuttonList in a table so try cellspacing="0" cellpadding="0" and padding:0; for td also
Provided this w3schools demo demonstrates accurate markup, it looks like they're built in a table. Try this:
.someClassName td {
padding: 0;
margin: 0;
}
Replacing .someClassName with the CssClass of the RadioButtonList or some other wrapper object.
I changed the radiobuttonlist to use RepeatLayout="Flow" instead of RepeatLayout="Table"
eg:
<asp:RadioButtonList ID="radOrderBy" runat="server" AutoPostBack="True" RepeatLayout="Flow" >
<asp:ListItem Value="NAME" Text="Name" Selected="True" />
<asp:ListItem Value="NUMBER" Text="Number" />
</asp:RadioButtonList>
How to change the table layout when using datalist. Below is the aspx i am using to populate the data, but i get the result like shown in Example 1. There is not continuation of showing the data due to the table layout ? How can achieve to show the result as shown in example 2 ?
I am in need of using the datalist since I am using repeatcolumn which is not available in repeater.
Aspx :
<asp:DataList ID="dl_Groups" RepeatColumns="2" runat="server"
OnItemDataBound="dl_Groups_ItemDataBound" RepeatDirection="vertical"
ShowFooter="False" ShowHeader="False">
<ItemTemplate>
<asp:CheckBox runat="server" ID="chk_Group" Text='<%# Eval("category_type") %>'
Value='<%# Eval("service_type_category_id") %>' onclick="OnGroupClick" />
<asp:CheckBoxList runat="server" ID="chkServiceType" Style="padding-left: 20px"
DataValueField="ServiceTypeID" DataTextField="Name" EnableViewState="true">
</asp:CheckBoxList>
<br />
</ItemTemplate>
</asp:DataList>
have you gone through these properties of the CheckBoxList
RepeatColumns="2"
RepeatDirection="Vertical"
RepeatLayout="Table"
These may be helpful to you.
You may also take benefit of css
As follows
#chkServiceType tr{
display:inline-block;
margin-right:20px;
}
#chkServiceType tr label{
margin-left:5px;
}
How can you text align center in asp.net 4.0 ListBox element. I tried cssclass but not working. Thank you.
This works for me:
<style type="text/css">
.listbox-centered
{
width:400px;
text-align:center;
}
</style>
...
<asp:ListBox ID="listBox1" runat="server" CssClass="listbox-centered">
<asp:ListItem Text="Item 1" Value="0"></asp:ListItem>
<asp:ListItem Text="Item 2" Value="1"></asp:ListItem>
</asp:ListBox>
I want to change the default style of checkboxlist available in websforms, I can apply changes to the text but cant change the checkbox which looks better and appealing.
<div id="left_columnforSale">
<asp:Accordion ID="Accordion1" runat="server" SelectedIndex="0" HeaderCssClass="accordHeader" ContentCssClass="accordContent" HeaderSelectedCssClass="accordHeaderSelected"
AutoSize="None"
FadeTransitions="true"
TransitionDuration="50"
FramesPerSecond="20"
RequireOpenedPane="false"
SuppressHeaderPostbacks="True">
<Panes>
<asp:AccordionPane>
<Header>
CheckListBox
</Header>
<Content>
<asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged" CssClass="chkbox">
<asp:ListItem Value="0 AND 1000">0 - £1,000</asp:ListItem>
<asp:ListItem Value="1000 AND 2000">£1,000 - £2,000</asp:ListItem>
<asp:ListItem Value="2000 AND 3000">£2,000 - £3,000</asp:ListItem>
<asp:ListItem Value="3000 AND 4000">£3,000 - £4,000</asp:ListItem>
<asp:ListItem Value="4000 AND 5000">£4,000 - £5,000</asp:ListItem>
<asp:ListItem Value="5000 AND 6000">£5,000 - £6,000</asp:ListItem>
<asp:ListItem Value="6000 AND 7000">£6,000 - £7,000</asp:ListItem>
<asp:ListItem Value="7000 AND 8000">£7,000 - £8,000</asp:ListItem>
<asp:ListItem Value="8000 AND 9000">£8,000 - £9,000</asp:ListItem>
<asp:ListItem Value="9000 AND 10000">£9,000 - £10,000</asp:ListItem>
</asp:CheckBoxList>
</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
CSS:
#left_columnforSale .accordContent
{
color: #999999;
font-size: 11px;
}
#left_columnforSale .accordContent .chkbox td:hover
{
color: #606060;
text-decoration: underline;
cursor: pointer;
}
Any tutoria;l or help will be appreciated
thnx
First off, note that checkboxes are far from flexible. Browsers don't let you style them that much with CSS. Any pure-css solution that you won't change the look of your checkboxes that much... For any serious style change, you will have to code something in javascript that acts like a checkbox.
If your changes are minor / can be done in css :
If you want to style all checkboxes directly in your css, use the following code :
input[type="checkbox"]{
/* Here are the styles that will be applied to ALL checkboxes */
}
Now if you want something particular for some checkboxes, you can go with classes. By applying a CSS class to your checkbox directly. CssClass is a property for standard web controls in ASP.NET so you can apply it to
<asp:ListItem CssClass="checkbox" Value="0 AND 1000">0 - £1,000</asp:ListItem>
for example.
From there, in your css
.checkbox {
/* Here are the styles that apply to checkboxes that have the checkbox css class */
}
If you can't do it with CSS :
Here are a couple of examples of what you can do with javascript / css :
http://www.no-margin-for-errors.com/projects/prettycheckboxes/
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/