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;
}
Related
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
Is there a way to add a button click event to a button I create myself?
I am using Visual Studio Premium 2013. I was trying to customise the appearance of the standard button control from the toolbox but it wasnt doing what I wanted (there were issues with border-radius and other things). So I decided to make my own button. Its a div, styled with this css and wrapped with an anchor tag:
<div id="loginBtn">Login</div>
#loginBtn {
width: 60px;
height: 30px;
margin-left: auto;
margin-right: auto;
background: #3B647F;
border: 1px solid black;
box-shadow: 3px 3px 5px gray;
border-radius: 5px;
text-align: center;
line-height: 1.75;
}
But how do I add a click event to this button? I tried instead using a hyperlink control like this:
<asp:HyperLink ID="hyp1" runat="server"><div id="loginBtn">Login</div></asp:HyperLink>
But I couldnt find a way to add a click event to a hyperlink.
Anyone have any ideas?
Use asp:LinkButton, you can add OnClickEvent. You can read how to do it in this MSDN Article
ASPX:
<asp:LinkButton id="LinkButton1"
Text="Click Me"
OnClick="LinkButton_Click"
runat="server"/>
Code behind:
void LinkButton_Click(Object sender, EventArgs e)
{
Label1.Text="You clicked the link button";
}
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
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 a grid view, the problem I am facing is when there is only 1 row in the table the header and the only row is really big, when the number of rows increases then the size of whole table and the header shrinks and it looks good, when there is few records it is looks like this
!http://www.freeimagehosting.net/43572
What is the problem here. thanks
<asp:GridView ID="Grid_Messagetable" runat="server" BorderStyle="Ridge" BorderWidth="5"
CssClass="Grid_MsgTbl" CellPadding="1" CellSpacing="1" AllowPaging="False" SelectedIndex="0"
DataKeyNames="MsgID" ShowHeaderWhenEmpty="false" OnRowDeleting="Grid_Messagetable_RowDeleting"
OnRowDataBound="MyGrid_RowDataBound" AutoGenerateColumns="False" AllowSorting="true"
OnSorting="gridView_Sorting">
.Grid_MsgTbl
{
text-align: center;
z-index: 1;
left: 7px;
top: 5px;
position: relative;
height: 308px;
width: 646px;
right: 17px;
bottom: 524px;
}
http://www.freeimagehosting.net/43572
I think you need to add more styles to your css.
Add <HeaderStyle Height="30px"/>
Also add AlternatingRowStyle-CssClass="altrowstyle" and HeaderStyle-CssClass="headerstyle"
so you can add something like this to your css
.rowstyle td, .altrowstyle td {height:something}
But setting the height for the gridviewnot a good way of doing it since .net is clever enough to adjest the height accoding to data.
Anyway I think this article about ASP.NET GridView makeover using CSS will give you better idea.
Hope this helps
Never used gridView in asp.net but my guess is: Its size is being adjusted for the amount of data stored inside. You could try to set size for each element of the site by css. Also, if you have problems debugging the look of the site i recommend you getting firebug addon to firefox. It will really help you find out whats going out with your elements and which css transformations concern them.