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>
Related
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
I must add X images to the view. Each image on click should show own input below on click.
I am getting list of images into my model. In the foreach loop I can add them dynamicly but how is it possible to make onclick function original for each one, so each input will separated for each image.
#foreach (var image in Model.Image)
{
<div class="col-md-2" style="cursor: pointer">
<img src="#Url.Content(image)" alt="image" />
<input type="text" class="form-control" style="visibility: collapse"/>
</div>
}
You can write a JavaScript function that takes a parameter, such as the clicked image element, to indicate which image was clicked and take appropriate action:
<img src="#Url.Content(image)" alt="image" onclick="processImage(this)" />
The keyword this is a reference to the element causing the event to trigger - in this case, an image element that's been clicked.
I need to add html tags dynamically in asp.net code behind , here is the scenario :
List<Product> products = ProductManager.GetProductList();//read data from database
Product is a class containing information I need to show in website such as product name, image,… .
For adding html code I tried this to show 5 products per page :
String finalHtmlCodeContainer="";
for(int i=0;i<=5;i++)
{
String myBox= "<div class=\"box\"> </div>";
finalHtmlCodeContainer+=mybox;
}
boxWrapper.InnerHtml=finalHtmlCodeContainer;
boxWrapper is a div that would contain our 5 product info.up to now everything is ok but problem appears when insted of "<div class=\"box\"> </div>",myBoxcontains long characters of html code , the original myBox should include this:
<div class="boxWrapper">
<div class="box">
<div class="rightHeader">rightHeader</div>
<div class="leftHeader">leftHeader</div>
<div class="article">
<img src="../Image/cinemaHeader.jpg" />
<p>
some text here <!--product.content-->
</p>
</div><!--end of article-->
<div class="rightFooter"><span>rightFooter</span>
<div class="info">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
</div><!--end of rightFooter-->
<div class="leftFooter"><span>leftFooter</span>
</div><!--end of leftFooter-->
</div><!--end of box-->
</div><!--end of boxWrapper-->
you see if i add producet.atrributes to code snippet above, it would be more messy,hard to debug , has less scalability and... . what is your solution?
It depends on the underlying product. If you are using web forms, I'd suggest using a data bound control that supports templating like the ListView or Repeater. It gives you full control over the UI, and also supports reloading the UI in ViewState. In your scenario, you'd have to build the UI on every postback. The ListView or Repeater track it in ViewState.
If you are using MVC, well using a helper method can make this easier as you can stick the item template within and then use a foreach and render out the helper.
If you are talking doing it in JavaScript, then there are templating components for doing the same thing.
I suggest you to Add repeater in your <p> tag ,
<p>
<asp:Repeater runat="server" ID="rpDetail">
<ItemTemplate>
<div class="box">
<%# Eval("YourDataField") %>
</div>
</ItemTemplate>
</asp:Repeater>
</p>
And make your products list as Repeater's datasourse in code behind .
rpDetail.DataSource = products ;
rpDetail.DataBind();
I seem to be having issues clicking a element inside a box which is filled by ajax.
So the web page I am on has a link on it which when clicked this calls a javascript function which then inserts a new div into the page which is full of new content.
Now the weird thing is I can find the element inside this box no problem using xpath, and I can even read its value but! I can't use Click(); on the link inside the box the event just wont work for some reason.
Has anyone faced a similar issue and know a work around?
I am using Selenium webdriver 2.35 with Firefox 23
More Info
OK so the HTML for the link I click which calls the JS to make the div appear.
<center>
<a id="link_fleet_move_here" href="">Move fleet here</a>
</center>
<br>
<script>
$("#link_fleet_move_here").click( function(event) { event.preventDefault(); load_fleet_move_to_destination("fleet.aspx?method=ajax&view=move_to_destination&version=1&player=111&destination=LZLOCATION"); $("#link_fleet_move_here").hide();} )
</script>
<center>
<div id="fleetLoaderTemplate" style="display:none">
<div id="fleetLoaderErrorTemplate" style="display:none">
</center>
<div id="move_to_destination_container"></div>
And when the event finishes loading the new HTML
<div id="move_to_destination_container">
<ajax>
<table width="600" align="center">
BIG TABLE FULL OF CONTENT
<td sorttable_customkey="LZLOCATION">
(LZLOCATION)
</td>
<td sorttable_customkey=""></td>
<td sorttable_customkey=""></td>
<td>
Move
</td>
<table>
<br>
</ajax>
</div>
The Selector
location = driver.FindElement(By.XPath("//a[contains(#href, '" + LZLocation + "')]/following::td[3]"));
location.Click();
I think it may be something to do with that div actually, I think it starts as Display:None and gets changed, this will be effecting it?
I thought it was dynamically adding it but maybe not!
Try selecting your element via the following:
driver.findElement(By.cssSelector("#move_to_destination_container a[href^='fleet']")).click();
If it throws an error, try using:
new WebDriverWait(driver, 10).until(ExpectedConditions.presenceOfElementLocated(By.cssSelector("#move_to_destination_container a[href^='fleet']"))).click();
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.