I am in the process of creating a visual list of search results and I am struggling with formatting it properly.
.
I have tried to implement the following code for the web form:
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server>
<h2>Search.</h2>
<div class="searchblock" id="searchdiv" runat="server">
<asp:Button id="TestSearchButton" runat="server" Text="Search the Stuff" OnClick="TestSearchButton_Click" CssClass="btn-default" />
<asp:TextBox ID="EnterBox" runat="server" Text="Hittin NM"/>
<hr/>
<div id="searchResults" runat="server">
</div>
</div>
The issue arises when trying to display the search results within the 'searchResults' div. Here is the code used to generate these result blocks:
while (i <= allmantemp.Count - 1)
{
Panel panel = new Panel();
panel.CssClass = "ResultPanel";
System.Web.UI.WebControls.Image img2 = new System.Web.UI.WebControls.Image();
panel.Controls.Add(img2);
img2.CssClass = "DisplayedImage";
img2.ImageUrl = "Resources/allmanmushroom.jpg";
Label numberBox = new Label();
panel.Controls.Add(numberBox);
numberBox.CssClass = "ItemNumberResult";
numberBox.Text = "Item #:" + allmantemp[i].itemNum.ToString();
Label titleBox = new Label();
titleBox.CssClass = "ItemTitleResult";
titleBox.Text = allmantemp[i].title;
Label descriptionBox = new Label();
descriptionBox.CssClass = "DescriptionResult";
descriptionBox.Text = allmantemp[i].description;
panel.Controls.Add(numberBox);
panel.Controls.Add(new LiteralControl("<br />"));
panel.Controls.Add(titleBox);
panel.Controls.Add(new LiteralControl("<br />"));
panel.Controls.Add(new LiteralControl("<br />"));
panel.Controls.Add(descriptionBox);
searchResults.Controls.Add(panel);
i++;
}
In addition, here are the CSS classes that are being referenced:
.DisplayedImage{
height: 180px;
width: 180px;
padding-top: initial;
margin-top: 6px;
margin-right: 6px;
margin-left: 6px;
float: left;
}
.ResultPanel{
margin-left: 210px;
width: auto;
height: 200px;
display: block;
border: solid;
border-color: #DFECE6;
}
.ItemNumberResult{
background-color: #2D2D29;
color: #DFECE6;
margin-bottom: 50px;
margin-top: 10px;
width: 180px;
}
.ItemTitleResult{
background-color: #2D2D29;
color: #DFECE6;
margin-bottom: 50px;
margin-top: 10px;
width: 180px;
}
Although the provided code generates the desired result, I am facing challenges in achieving the layout that I envision.