We Keep Coding

Ajax control toolkit combobox showing weird bullets in dropdown

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>)

how to achieve paging vertically in asp.net C# in gridview

I want to have paging in my asp.net gridview but here is the twist, I want the paging vertically. i.e when I hit page up and page down paging should occur vertically. Like when I do normal paging 1,2,3,4..... pages occur but I want no 1,2,3,4..pages, I want it to be done vertically when I hit page up and page down considering 10 records per page

Wrap your gridview around a div and add width height and overflow:scroll to the div's style attribute.
<div style="width: 100%; height: 400px; overflow: scroll">
<ASP:GridView></ASP:GridView>
</div>
Also remove the AllowPagingattribute from the GridView. Adjust the width and the height of the div according to your needs.

Resizing Background image according to container Div

I have a background image like image.jpg. I want to resize this image according to any div which is using it.
How can i do this in jquery or any other way.

There's many different ways to do this. The best in terms of execution speed is to use CSS, but jQuery can accomplish anything CSS can using the $().css() method.
Here's a fiddle with four five different methods, from just putting the image in, to stretching in css and jQuery. The code is below:
<style>
div
{
background-image : url("http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Les_Halles_%28metro_de_Paris%29_-_Entree.jpg/800px-Les_Halles_%28metro_de_Paris%29_-_Entree.jpg");
height : 200px;
width: 200px;
margin: 10px;
background-repeat : no-repeat;
background-color: blue;
float: left;
}
#one
{
background-size:contain;
}
#two
{
background-size: 100%;
}
#three
{
background-size: 100% 100%;
}
</style>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<script>
$("#a").css("background-size","contain") //fits in aspect ratio
$("#b").css("background-size","100%") //constrained by width
$("#c").css("background-size","100% 100%") //stretch to fill
$("#d").css("background-size","auto 100%") //constrained by height
</script>
Hope this sheds some light on the problem.
There's some good references available on CSS, if you want to explore the properties and see what else can be done.

Show image in browser in full screen in C# ASP.NET

i want to show an image in the browser page and to stretch it so it would fill the whole browser page.
i tried:
<asp:Image ID="myimage" runat="server" ImageUrl="/Images/mypic.jpg" Width="100%" Height="100%"></asp:Image>
and also tried using css:
<asp:Image ID="myimage" runat="server" ImageUrl="/Images/mypic.jpg" CssClass="myimage1"></asp:Image>
and in the CSS:
.myimage1{height:100%;width:100%;}
in both cases the browser (IE9), stretches the image with a height that is much bigger then the broswer hight and a right scroll bar is shown.
How can i stretch an image to the exact size of the current page size?

Its stretching to 100% of the parent container, which might be too wide. Try setting the width value of the body and html elements.
Try setting
html, body { width: 100%; height: 100%; }
Or you could use jQuery to find out the width of the parent element first and then set your image to that. No need to use ASP controls with this, just CSS and jquery.
$newheight = $('#yourimageid').parent().height();
$('#yourimageid').css('height', $newheight);
This will grab the parent elements height, and then append the value to the css height value

i found the solution using an img html tag and using CSS:
http://bytes.com/topic/asp-net/answers/850635-how-stretch-background-image-fill
add this inside the aspx page inside the body tag:
<img src="Styles/mypic.jpg" alt="" />
in the css:
html,body
{
margin: 0;
padding: 0;
}
img
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}

Grid View header and row size are big when there are few records, when there are more rows it is fine

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.