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%;
}
Related
I'm planning to apply a css on ToolTip attribute of asp:Image but it's not working. This is what I've tried so far.
<asp:Image ID="sampleimage" runat="server"
ImageUrl="~/Image/questionmark.png" ToolTip='<%# Eval("NAME") %>'
CssClass="tooltips" />
^ the text on tooltip shows but the css is not. It only has a white
background color.
.tooltips
{
background-color: Green;
width:150px;
height:20px;
}
This is from my stylesheet from other folders.
I'm totally new at using CSS. Any form of instructions will help. Thank you
You can not style tooltips with CSS only, because they are rendered by the browser, not your web page.
But you can use a JS library to render custom tooltips (which allow custom styling).
I like to use qTip2.
I use HtmlRenderer to generate jpg images from html markup. However it doesn't apply background image from css:
<div style="background:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTbNHtYU6bKKmxkJXlqDr7y7afZyZtw-WwDg6DoUNCb9nElkplEuw); width: 440px; height: 361px">
Some content here.
</div>
Here is the C# code:
String ecardHtml = File.ReadAllText("testWithGoodImage.html");
using (Image img = HtmlRender.RenderToImageGdiPlus(ecardHtml, maxWidth: 440, textRenderingHint: TextRenderingHint.AntiAliasGridFit))
{
img.Save("result.jpg");
}
Debugging shows that the image is not even requested, so I suspect it's not supported. However <img> elements do work well.
So the question is how to make it work.
I know that I can render html on image in HtmlRenderer, but I want to have all markup only in html code.
HTML renderer supports background Image CSS, if you really want to do it in HTML then something like this will do the job :
<div style="width: 440px; height: 361px;position:relative">
<div style="position:absolute;top:0;left:0;z-index:8888"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTbNHtYU6bKKmxkJXlqDr7y7afZyZtw-WwDg6DoUNCb9nElkplEuw"/></div>
<div style="position:absolute;top:0;left:0;z-index:9999">Some content here.</div>
</div>
or simply add background-image not just background
<div style="background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTbNHtYU6bKKmxkJXlqDr7y7afZyZtw-WwDg6DoUNCb9nElkplEuw); width: 440px; height: 361px">
Some content here.
</div>
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
![enter image description here][1]How can I change the height of the layout of the my page when the user adds new controllers. I would like to enhance the height of my page when the user adds a new control.
I am using in master page
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
and in my css
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
height: auto;
}
One more question, can I achieve that programmatically in aspx.cs file ?
Any advice would be appreciated.
Thank you.
As long as your asp:Content has elements's in that have content in or a set height it should add to the height of the page
example
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
<div>
</div>
</asp:Content>
Also need to check for CSS styles that are altering the height of div's as this will effect any content you place in there
I have a query regarding update progress panel.
I want to fit update progress panel in the middle of my screen!
Can anyone suggest me, what is the idea of making it so??
You can do that by using css
<style type="text/css" media="screen">
/* commented backslash hack for ie5mac \*/
html, body{height:100%;}
/* end hack */
.CenterPB{
position: absolute;
left: 50%;
top: 50%;
margin-top: -30px; /* make this half your image/element height */
margin-left: -30px; /* make this half your image/element width */
}
</style>
and you have the progress bar in the div
<div class="CenterPB" style="height:60px;width:60px;" >Progress bar here</div>
reference:
http://www.sitepoint.com/forums/1243542-post9.html
http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/
If you use jQuery, you may also try (very lightweight) fixedcenter plugin.
The update progress panel displays something (some text an image some markup) while the system is processing..
So you need to work with the markup you add..
For example if you have a div that displays you could get it to be in the centre like this..
<div style="width:200px;margin:0 auto;">Processing...</div>
That will display the div in the centre of its container.
Full example:
<asp:UpdatePanel ID="updatepnl1" runat="server">
<ContentTemplate>
<asp:GridView id="gv1" runat="server">
</asp:GridView>
<asp:UpdateProgress id="UpdateProg" runat="server">
<ProgressTemplate>
<div style="width:200px;margin:0 auto;">Processing...</div>
</ProgressTemplate>
</asp:UpdateTemplate>
</asp:ContentTemplate>
</asp:UpdatePanel>
Of course you should put the css into a css file and apply it to a class.
Like:
///Start css
.posCentre{width:200px;margin:0 auto;}
///End css
and change your div to:
<div class="posCentre">Processing...</div>