I am rendering Html in a column of a table in RDLC report. Here is the Html
<HTML>
<BODY>
<DIV STYLE=\"text-align:Left;font-family:Segoe UI;font-style:normal;font-weight:normal;font-size:12;color:#000000;\">
<DIV>
<DIV><P><SPAN STYLE=\"font-weight:bold;\">Male: 20-80</SPAN></P>
<P><SPAN /></P><P STYLE=\"text-align:Center;text-indent:20;\"><SPAN /></P>
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>
The problem I am facing is that it takes unnecessary space as shown in the attached picture. The column is Normal range which is the last column in the table. I don't want the space below and above the rows.
Table:
I've made changes in canGrow and canShrink option but that is not working.
Try removing padding and html and body tags
<DIV STYLE=\"padding:0px;margin:0px;text-align:Left;font-family:Segoe UI;font-style:normal;font-weight:normal;font-size:12;color:#000000;\">
<DIV>
<DIV><P><SPAN STYLE=\"font-weight:bold;\">Male: 20-80</SPAN></P>
<P><SPAN /></P><P STYLE=\"text-align:Center;text-indent:20;\"><SPAN /></P>
</DIV>
</DIV>
</DIV>
try also removing it from inner divs. Also draw borders in html objects to see who's pushing the borders
Related
I want to display image and text side by side (image on the left and text on the right(which is ordered using ).
I achieved this in .html page in visual studio
For image div I gave float: left and for text div I gave float:right
I want to achieve the same by passing the html page code to a string variable and displaying the ouput in WebBrowser.
Eg:
string html= #"<div style=""float:left"">
<img src=""smiley.jpg"" alt=""smiley"" />
<div style=""float:right;font-family:Calibri"">
<h2>Dispalying Image and text</h2>
</div>
</div>"
webBrowser1.DocumentText = html;
But here, the image and text is not displayed side by side instead the text is displayed in the next line.
Float:right is not working as expected here. How to resolve this?
You may do it like this:
<div style="float:left">
<img style="display:inline-block;vertical-align:middle" src="http://www.smilys.net/lachende_smilies/smiley7702.jpg" alt="smiley" />
<div style="display:inline-block;font-family:Calibri">
<h2>Dispalying Image and text</h2>
</div>
</div>
<img> is an inline element, and <div> and <h2> are block elements, you are mixing both together. And also, you can't set "float" to inline element.
Maybe you can try to put img inside, like this:
<div>
<div style=""font-family:Calibri"">
<h2>
<img src=""smiley.jpg"" alt=""smiley""/>
Dispalying Image and text
</h2>
</div>
</div>
This is little different view to this problem, but it is really simple, without any additional styles.
Well if you want to put your image to the left and the text to right you are doing well just assign the float:left style to the image instead of the main block like:
string html= #"<div>
<img src=""smiley.jpg"" alt=""smiley"" style=""float:left""/>
<div style=""float:left;font-family:Calibri"">
<h2>Displaying Image and text</h2>
</div>
</div>"
I've got the expected output by placing image in one div and text in one div and both the div in one div. It worked:)
Like,
<div>
<div><img></div>
<div>text</div>
</div>
You could use a table.
<table>
<tr>
<td> <img src="smiley.jpg" alt="smiley"/> </td>
<td> Displaying Image and text </td>
</tr>
</table>
I've seen a few posts on this topic:
Razor Nested Layouts with Cascading Sections
MVC 3 - Nested layouts - sections don't render in Areas
And it always seems to be problematic. However they are both pretty old so wondering if things have changed.
Basically I have a master layout, and 3 different body templates based on what kind of page it is. For examples sake:
_Layout.cshtml
<html lang="en">
<head>
</head>
<body style="padding: 50px 0;">
<header class="navbar navbar-default navbar-fixed-top" role="banner">
#Html.Partial("_MenuPartial")
</header>
<ol class="breadcrumbs">
#RenderSection("breadcrumbs", true);
</ol>
<section>
#RenderBody();
</section>
<footer class="navbar navbar-default navbar-fixed-bottom">
#Html.Partial("_FooterPartial")
</footer>
#Html.Partial("_ScriptInitPartial")
</body>
</html>
_LayoutForEdit.cshtml
<div class="panel panel-primary">
<div class="panel-body">
<div class="col-lg-2">
<ul class="nav nav-pills nav-stacked">
#RenderSection("tabs", true)
</ul>
</div>
<div class="col-lg-10">
<div class="tab-content">
#RenderBody()
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-primary" data-bind="enable: Entity.isValid, click: save">Save</button>
</div>
</div>
Now this renders fine when called. Almost.
The rendering of sections must be in the child layout it seems. If I try to put the breadcrumbs in the _Layout.cshtml, it will fail because _LayoutForEdit.cshtml never rendered it. How can I fix this?
The following sections have been defined but have not been rendered for the layout page "~/Views/Shared/_LayoutForEdit.cshtml": "breadcrumbs".
I know it's an old question. I thought I'd share this anyway in case anyone else runs into this (like I did).
At the bottom of your child layout, you define a section with the same name as the section in the parent layout. Inside of this section you simply put a #RenderSection, again specifying the same name as before. Once this is in place, you essentially have the child layout "bypass" content from pages, up to its parent layout:
#section breadcrumbs {
#RenderSection("breadcrumbs", true)
}
Not sure if you still need help, but I'll answer anyways.
There RenderSection method takes the following parameters according to the
MSDN Documentation:
public HelperResult RenderSection(
string name,
bool required
)
Parameters
name
Type: System.String
The section to render.
required
Type: System.Boolean
true to specify that the section is required; otherwise, false.
Change the call to:
#RenderSection("breadcrumbs", false);
If the section "required" parameter is false, it will not give an error if that section is not included by a view.
I have a div tag in which i have an autogrow textarea. When I press any key or type something within the textarea, its height increases one line at a time. But the problem here is that the size of the div tag is the same, so that looks too bad, like the textarea falling out from the div container...
So I want the div tag to also expand simultaneously as the textarea increases.
The code below represents the code for the textarea contained within a div tag
<body bgcolor="#CCC" style="height: 460px">
<form id="form1" runat="server" method="post">
<div id="expandable_div" style="background-color: #000000" >
<textarea id="Text1" rows = "8" runat="server" cols="30" onkeyup="AutoGrowTextArea(this)" name="S1"> </textarea>
</div>
</form>
In the style sheet, I tried putting:
div#expandable_div
{
min-height:205px;
height:auto;
}
<div> should expand automatically. I guess that the problem is that you're fixing the height of div. Let's say...
height:205px;
Replace it with
min-height:205px;
min-width:300px;
Working Demo on jsFiddle
Size of unstyled DIV is defined by its content. So either remove height style from DIV or adjust it dynamically based on size of textarea.
I am trying to replace the contents of a selected "div" element, and append it to the parent control. So far I am able to clone and append it to the parent, but I want to know how I can replace certain tags inside.
to be specific here is the jquery i use to clone the target control
var x = $(parent).children('div[class="answer"]:first').children('div[class="ansitem"]:first').clone();
the html content inside the clone div is like this :
<div id="ansthumb_anstext_anscontrols">
<div id="image" class="ansthumb">
replace 1
</div>
<div id="atext" class="anstext">
<p class="atext_para">
<span id="mainwrapper_QRep_ARep_0_UName_0" style="color: rgb(51, 102, 255); font-weight: bold;">Replace 2 </span>
Replace 3
</p>
<p id="answercontrols">
<input name="ctl00$mainwrapper$QRep$ctl01$ARep$ctl01$AnsID" id="mainwrapper_QRep_ARep_0_AnsID_0" value='replace 4' type="hidden">
<a id="mainwrapper_QRep_ARep_0_Like_0" title="Like this answer" href="#">Like</a>
<a id="mainwrapper_QRep_ARep_0_Report_0" title="Report question" href="#">Report</a>
<span id="mainwrapper_QRep_ARep_0_lblDatetime_0" class="date"> replace 5 </span>
</p>
</div>
here i have marked all the areas I want to be replaced. The id's of the above div elements are named as such because it is generated within a repeater control.
I have gone through the jquery API and this function seems to be the thing I should be using as far as i understand.
replaceWith(content)
but the drawback of this way is i have to dump the entire html on to a string variable and include replacement text wherever needed. I think it is not the best way, and may be something like selecting particular tags and changing data would be the way to do it. Any help appreicated guys!
thanks
You could use the .html() and a couple other jQuery functions and use the surrounding elements as your selectors.
For example
<script type='text/javascript'>
$("#image").html("YourData1"); //replace 1
var secondSpan = $("#mainwrapper_QRep_ARep_0_UName_0");
$(secondSpan).html("YourData2"); //replace 2
$(secondSpan).after("YourData3"); //replace 3
$("#mainwrapper_QRep_ARep_0_AnsID_0").attr("value", "YourData4"); //replace 4
$("#mainwrapper_QRep_ARep_0_lblDatetime_0").html("YourData5"); //replace 5
</script>
Since these ids are defined by .NET, you can get the ClientID of the .NET control.
For example:
var secondSpan = $("#<%= UName.ClientID %>");
Hope this helps!
Hello I have a item list that shows on my asp.net page like this:
<div class="search-result-item">
<div class="image">
<img src="images/1.png"/>
</div>
<div class="logo">
<img src="images/logo.png"/>
</div>
<div class="header">
Title
</div>
<div class="message">
Message
</div>
<div class="keywords">
key1 | key2 | key3
</div>
<div class="links">
Go to
</div>
</div>
This shows a predefined layout for an item on the page.
Items are generated in the code behind.
I want for each item to create a div like the one above on the page.
How can I do that using the code behind?
Thanks a lot
You create a Control and add it to your page.
There are a large range of controls, but if you want that exact markup, and don't need any server-side processing, the LiteralControl control is probably the most appropriate.
Use a repeater control You create a control that basically connects to datasource and then repeats info based on the data. Very crude description sorry. Look at it on Google.