I have a DIV which has images and hyperlinks, which are added in C# by CODE
mStr.Append(" <div id='wn'>");
mStr.Append("<div id='lyr1'> <ul id='horiz'>");
if (dv.Count > 0) {
for (int i = 0; i < dv.Count; i++) {
mStr.Append("<li width='450' height='110' style='padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px;'>");
mStr.Append("<a href='PlayGame.aspx?GameID=" + GameLib.Utilities.Encrypt(dv[i][1].ToString()) + "'>");
mStr.Append("<img src='../" + dv[i][10].ToString() + "' width='156px' height='109px' style='padding-left:0px;' />");
mStr.Append("</a>");
mStr.Append("</li>");
}
mStr.Append("</ul></div></div>");
RelatedGames.InnerHtml.Remove(0, RelatedGames.InnerHtml.Length);
RelatedGames.InnerHtml = mStr.ToString();
}
..but the problem is that I want to scroll the DIV so that i can go through all images. I tried many ways in JQuery but it has been stuck and static. I will be grateful for any suggestions.
Or, is there any other way that the same functionality can be achieved?
Simply add the following CSS:
#lyr1 {
overflow: auto;
}
Overflow is a CSS property that specifies how content that is larger than its parents should be displayed. The default value is visible, which means that everything will be displayed, even if it goes beyond the size of its parent (which it does, in your case). Setting it to auto will make everything that doesn't fit in the parent hidden, and will add scrollbars whenever necessary. To make scrollbars always visible, do overflow: scroll;.
Live demo: http://jsfiddle.net/DanVicBez/kNk4y/
Just use a css property overflow:scroll to the target div
<div id='lyr1' style='overflow:scroll'>
Related
I'm trying to generate HTML page ( C# Razor View ) that will be converted to PDF ( using wkhtmltopdf )and printed on pre-printed stationery.
My problems is, that the pre-printed stationery has a header ( easy )
and tear-off part at the bottom (4cm) which should be blank until the very last page where some additional information is printed.
The whole invoice is being generated as
<table><thead></thead><tbody></tbody></table>
So how can I set margin of X on every page except the last printed
and on that last printed page instead of margin actually print something?
Tried to use with last-child selector but that did not work.
Perhaps some other solution will be more suitable for this using .Net Core ( some linux apps can be used as well )?
You can use the CSS #page rule to specify the page margins. You can also use this to specify additional margins for left & right-hand pages (to account for binding) and for the first page but not, it would seem, for the last page!
/* Default left & right is 2cm, top & bottom margin is 4cm */
#page { margin: 4cm 2cm }
/* First page, 10 cm margin on top */
#page :first {
margin-top: 10cm;
}
/* Left pages, a wider margin on the left */
#page :left {
margin-left: 3cm;
margin-right: 2cm;
}
/* Right pages, a wider margin on the right */
#page :right {
margin-left: 2cm;
margin-right: 3cm;
}
Further reading: https://www.w3.org/TR/CSS21/page.html#page-box
Finally I got to the bottom of that.
As the top of the page should not be a problem ( can be handled the same way as well , but the table thead is another option )
My solution is:
wkhtmltopdf test.html --footer-html footer.html output.pdf
And the whole trick is withing the footer.html file:
<!DOCTYPE html>
<html>
<head>
<script>
var mainHeader = "test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>";
var secondHeader = "OOOOOOOOOOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPPOPO<br>";
function selectHeader() {
var vars = {};
var x = document.location.search.substring(1).split('&');
for (var i in x) {
var z = x[i].split('=', 2);
vars[z[0]] = decodeURIComponent(z[1]);
}
if (vars["page"] == vars['topage']) {
document.getElementById('main').innerHTML = secondHeader;
} else {
document.getElementById('main').innerHTML = mainHeader;
}
if (vars["page"] == vars['frompage']) {
document.getElementById('test').innerHTML = secondHeader;
}
}
</script>
</head>
<body onload="selectHeader()">
<div style="min-height: 6cm; background-color: aqua; max-height: 6cm; overflow:visible;">
<div id="main" onload="selectHeader()">
</div>
</div>
</body>
</html>
ps.
Read somewhere that without !DOCTYPE html it might not work.
Thanks for all the help
I've got the following asp.net code that generates a listitem dynamically and populates it with a panel that contains a gridview:
Panel panBlocks = new Panel();
panBlocks.ID = "PanBlockQuestionID" + recordcount.ToString();
panBlocks.Width = 1300;
panBlocks.Height = 100;
panBlocks.BackColor = System.Drawing.ColorTranslator.FromHtml("#fabb3d");
GridView gvEmployee = new GridView();
gvEmployee.ID = "gvEmployees" + recordcount.ToString();
gvEmployee.AutoGenerateColumns = true;
gvEmployee.DataSource = dtBlocks;
gvEmployee.DataBind();
gvEmployee.Style.Add("position", "relative");
panBlocks.Controls.Add(gvEmployee);
It generates the gridview but wraps it in a div. How do I stop it generating the div as it messes up the styling. The html it generates is:
<li id="CPH_Body_liQuestions3" class="liQuestions" style="height:40px;" myCustomIDAtribute="3"><a></a><input type="image" name="ctl00$CPH_Body$lblImg3" id="CPH_Body_lblImg3" class="liQuestionsLabel2" src="../../Images/gtk_cancel.png" style="width:30px;" /><input type="image" name="ctl00$CPH_Body$lblImg3" id="CPH_Body_lblImg3" class="liQuestionsLabel2" src="../../Images/phone_book_edit.png" style="width:30px;" /><span id="CPH_Body_lblID3" class="liQuestionsLabel" style="display:inline-block;width:35px;">298,</span><span id="CPH_Body_lblQuestionType3" class="liQuestionsLabel" style="display:inline-block;width:25px;">1, </span><span id="CPH_Body_lblMsgPrompt3" class="liQuestionsLabel" style="display:inline-block;width:300px;">Fit nylon spacer BG502 to tray,</span><span id="CPH_Body_lblExpectedResp3" class="liQuestionsLabel" style="display:inline-block;width:100px;">YES,</span><span id="CPH_Body_lblImg3" class="liQuestionsLabel" style="display:inline-block;width:30px;"> img: </span><span id="CPH_Body_lblFailMsg3" class="liQuestionsLabel" style="display:inline-block;width:300px;">Not fitted,</span><span id="CPH_Body_lblRetryMsg3" class="liQuestionsLabel" style="display:inline-block;width:300px;">Retry,</span><span id="CPH_Body_lblStart3" class="liQuestionsLabel" style="display:inline-block;width:10px;">,</span><span id="CPH_Body_lblEnd3" class="liQuestionsLabel" style="display:inline-block;width:10px;">,</span><img id="CPH_Body_lblImg3" class="liQuestionsLabel2" onclick="showPanel('CPH_Body_liQuestions3')" src="../../Images/block3.png" style="width:30px;" /><div id="CPH_Body_PanBlockQuestionID3" style="background-color:#FABB3D;height:100px;width:1300px;">
<div>
<table cellspacing="0" rules="all" border="1" id="gvEmployees3" style="border-collapse:collapse;position:relative;">
<tr>
<th scope="col">B1ID</th><th scope="col">B1IncEx</th><th scope="col">B1Criteria</th>
</tr><tr>
<td>3</td><td>EX</td><td>590P</td>
</tr>
</table>
</div>
</div></li>
How do I stop the div being generates please as I can't apply styling to it.
Many Thanks
Use a PlaceHolder instead of a Panel, the difference is that the PlaceHolder is not rendered as a div whereas a Panel always.
The PlaceHolder control does not produce any visible output and is used only as a container for other controls on the Web page.
While I haven't found a way to remove the DIV completely, it is possible to change it so that the DIV no longer wraps the TABLE if you're in a position where you can define and use your own custom GridView control.
The trick is to prematurely close the opening DIV tag, so the TABLE follows it in the HTML, rather than being inside it. If needed, you can also add attributes to the DIV, such as a class name, to ensure that it does not affect the surrounding HTML.
using System.Web.UI;
public class MyGridView
: System.Web.UI.WebControls.GridView
{
public MyGridView()
{
}
public override void RenderControl(HtmlTextWriter writer)
{
/* The underlying GridView class renders a DIV as a container in
RenderControl(), so we can add attributes here, such as a class
to hide it.
*/
writer.AddAttribute(HtmlTextWriterAttribute.Class, "hidden");
base.RenderControl(writer);
}
protected override void RenderContents(HtmlTextWriter writer)
{
/* We don't want the underlying GridView's container DIV to actually
wrap the internal TABLE, so calling RenderEndTag() here will cause
it to be closed before the TABLE is rendered (which happens in
RenderChildren())...
*/
writer.RenderEndTag();
base.RenderContents(writer);
/* ...However, when this function exits, RenderControl() will call
RenderEndTag() itself to close what is expected to be the container
DIV, so we need to provide a open tag for it. We'll use a SPAN as
that will have the least effect on the HTML and we could, of
course, add any required attributes to style it, etc, if required.
*/
writer.RenderBeginTag(HtmlTextWriterTag.Span);
}
/* If you need to add any additional attributes to the TABLE tag, you
can do that here with a call to writer.AddAttribute(); if not, this
override is redundant.
protected override void RenderChildren(HtmlTextWriter writer)
{
// TODO: call writer.AddAttribute() if required
base.RenderChildren(writer);
}
*/
}
HACK ALERT!
Clearly, this is implementation-specific and subject to change with new versions of ASP.NET. However, in most cases, an upgrade to the ASP.NET version would most likely require testing/review anyway, so it shouldn't be too much of an issue.
I've got a requirement where I need to be able to click dynamically generated div's
So,I've generated buttons also dynamically and want to link the ClickEvent of Button to div's Click event.
for (int i = 0; i < DtUsers.Rows.Count; i++)
{
ASPxButton btnButton = new ASPxButton();
btnButton.ID = "btnButton" + (i + 1);
btnButton.Visible = false;
btnButton.Click += new EventHandler(this.btnButton_Click);
btntButton.CommandArgument = DtOnlineUsers.Rows[i]["USER_ID"].ToString();
var divCustomItem = new HtmlGenericControl("div");
divUandMeUsers.Controls.Add(divCustomChatItem);
divCustomItem.Controls.Add(btnButton);
divCustomItem.Attributes.Add("onclick", "document.getElementById('<%= " + btnButton.ClientID + " %>').click()");
}
But,it is not working. Can you tell me where I've done wrong?
Is there something I need to do with the UpdatePanel AsyncPostBackTrigger?
When I click the div, in the developer tools, it is saying Uncaught TypeError: Cannot read property 'click' of null
Change
divCustomItem.Attributes.Add("onclick", "document.getElementById('<%= " + btnButton.ClientID + " %>').click()");
to
divCustomItem.Attributes.Add("onclick", "document.getElementById('" + btnButton.ClientID + "').click()");
You don't need the client side server includes during a server side operation.
Edit: OK so I've gone through your code with a finer toothed comb and I've found these additional problems:
The button's visibility is set to false so it won't even be rendered. If you want it to be clickable then you will need to hide it using css visibility.
What is an ASPxButton? Did you mean Button?
As there is nothing in the div its auto height and width will be set to zero.
Try sorting out those issues and post your new code if this still does not work.
I am using following code to open a modalwindow:
function OpenPopup(rn) {
var winargs = null;
var winsettings = "help:no;status:no;maximize:yes;minimize:no;dialogHeight:450px;dialogWidth:820px;edge:sunken;scroll:yes;center:yes;resizable:yes;";
winargs = window.showModalDialog("../PopUp.aspx?id=" + rn , winargs, winsettings);
}
Here the property scroll provides only Yes and No option. I want only Vertical scroll bar and not Horizontal one. How should I achieve this ?
Can anyone help me on this issue ?
Make sure that the width of PopUp.aspx is not more than the dialogWidth:820px;
try this
<body style="width:820px;">
on PopUp.aspx
Have you tried the following:
Specify the width to it:
function popupWindow(url, width)
{
window.open('url', 'win_name', 'width=' + width);
}
And depending upon your layout, you could use the css as well:
<style type="text/css">
overflow-x:hidden;
</style>
Source: stackoverflow
Please check this solution:
did you make the div scrollable? i.e.
<div style="position:absolute;top:0;left:0;width:100px;height:100px;overflow:auto;"></div>
also make sure that you do not have any element (table, div, span) in the the div who's width is greater than the container width + 25px (needed for vertical scroll bar)
http://forums.asp.net/t/1450847.aspx/1
I am trying to create a HTML page where the "body" color changes depending on some data being gathered from the RAM. If the RAM fills up beyond a certain threshold then I want the color to change.
<body style="background-color:<%=
if(MemoryPercentage < 33)
{
//set to green.
}
else if(MemoryPercentage < 66)
{
//set to yellow.
}
else
{
//set to red.
}%>">
Thank you for your help,
Aaron
<body
style="background-color:<%= MemoryPercentage < 33? "green":
(MemoryPercentage < 66? "yellow":"red") %>;">
I'd prefer using CSS classes and separating the logic out so it is more readable.
<style type="text/css">
.warn {
background-color: #00ffff;
}
.error {
background-color: #ff0000;
}
.ok {
background-color: #00ff00;
}
</style>
<%
var klass = MemoryPercentage < 33 : "ok" ? (MemoryPercentage < 66 ? "warn" : "error");
%>
<body class="<%= klass %>">
While you can definitely apply the style directly using the sytle attribute of the body tag (as suggested in this answer), general best practices revolving around HTML discourage this.
What you should do is place these styles in a stylesheet which is referenced on your page, and then have different names for the classes.
Then, in your code, apply the class that has the style you want depending on your logic to the class attribute of the body element.
Just an aside to the other answers:
<body id="Body" runat="server"> will make the tag accessible to Page_Load() & friends as an HtmlGenericControl, so you can handle the logic and set Body.CssClass without the template-y markup. Makes it a little less messy / easier to maintain.