I have some problems with css that I need help with.
I have the following code:
<div class="UpperClass"></div>
<div class="LowerClass"></div>
Wit the following simple CSS:
.UpperClass{
background-color: red;
width: 50px;
height: 50px;
}
.MiddleClass{
background-color: green;
width: 50px;
height: 50px;
}
.LowerClass{
background-color: blue;
width: 50px;
height: 50px;
}
Now, in code behind I am dynamically adding the middle class div:
int count = 1; //Could be anything
foreach (var item in count)
{
Label placeholder = new Label();
StringBuilder sbExample = new StringBuilder();
sbExample.append("<div class='MiddleClass'></div>");
HtmlString text = new HtmlString(sbExample.ToString());
placeholder.Text = text.ToString();
this.Controls.Add(placeholder);
}
Now, all 3 divs are showing on the page, but the div with the middleclass is behind the upperclass, what I want is the upperclass to come first, then all middleclass divs and below that the lowerclass div, all nicely sorted below each other. How do I do that?
Thanks in advance.
EDIT:
Also, if I want a wrapper around it, how can I place it like this:
<div class="wrapper">
<div class="UpperClass">
</div>
//Middle class here
<div class="LowerClass">
</div>
</div>
On the front end have this:
<div class="UpperClass"></div>
<%= PopulateMiddleClass() %>
<div class="LowerClass"></div>
and on the backend
String PopulateMiddleClass()
{
String ret = "";
//loop through and populate string
return ret;
}
Or
<div class="UpperClass"></div>
<asp:PlaceHolder ID="MyPlaceHolder" runat="server"></asp:PlaceHolder>
<div class="LowerClass"></div>
Then on the backend
Page_Load(object sender, EventArgs e)
{
Literal literal = new Literal();
literal.Text = "<div class='MiddleClass'></div>";
MyPlaceHolder.Controls.Add(literal); // you could loop through and keep adding controls or you could compile them all into the one literal.
}
Hopefully this gets you on your way.
You can create one div with attribute runat="server" and use it as shown below :
Design Page:
<div class="wrapper">
<div class="UpperClass">
</div>
<div runat="server" id="divMiddle">
</div>
<div class="LowerClass"></div>
</div>
Code Behind :
int count = 1; //Could be anything
for (int i = 0; i < count; i++ )
{
Label placeholder = new Label();
StringBuilder sbExample = new StringBuilder();
sbExample.Append("<div class='MiddleClass'></div>");
HtmlString text = new HtmlString(sbExample.ToString());
placeholder.Text = text.ToString();
this.divMiddle.Controls.Add(placeholder);
}
Related
I am currently dynamically generating ASP elements on a website. The site displays items for a specific motorcycle based on the make/model/year.
Issue 1: I have all of the items displaying correctly, on the page, but I cannot figure out how to get my CSS styling to apply to the dynamically generated items.
Heres what I have, it querys the items into a datatable first:
try
{
int tempflag = 0;
foreach (DataRow tempRow in dt.Rows)
{
string tempCategory = tempRow[4].ToString();
string tempPartUrl = tempRow[5].ToString();
string tempImageUrl = tempRow[6].ToString();
string tempPartBrand = tempRow[7].ToString();
string tempPartName = tempRow[8].ToString();
string tempPrice = tempRow[9].ToString();
string tempStoreName = tempRow[10].ToString();
//panel to hold an item
Panel pnlItem = new Panel();
pnlItem.ID = "id_pnItem_" + tempflag;
pnlItem.CssClass = "itemDiv";
divSearchResultsBody.Controls.Add(pnlItem);
//image
Image tpImg = new Image();
tpImg.ID = "id_tpImg_" + tempflag;
tpImg.ImageUrl = tempImageUrl;
pnlItem.Controls.Add(tpImg);
Label lblBR = new Label();
lblBR.ID = "frt" + tempflag;
lblBR.Text = "<br />";
pnlItem.Controls.Add(lblBR);
//brand
Label lblBrand = new Label();
lblBrand.ID = "id_lblBrand_" + tempflag;
lblBrand.Text = tempPartBrand;
pnlItem.Controls.Add(lblBrand);
//name
Label lblName = new Label();
lblName.ID = "id_lblName_" + tempflag;
lblName.Text = tempPartName;
pnlItem.Controls.Add(lblName);
//price
Label lblPrice = new Label();
lblPrice.ID = "id_lblPrice_" + tempflag;
lblPrice.Text = tempPrice;
pnlItem.Controls.Add(lblPrice);
//url
HyperLink hyp = new HyperLink();
hyp.ID = "id_link_" + tempflag;
hyp.NavigateUrl = tempPartUrl;
hyp.Text = "View Part";
pnlItem.Controls.Add(hyp);
tempflag++;
}
}
catch (Exception ex)
{
handleTheError(ex);
}
I'm not sure how to access my css sheet from the .aspx.cs. so all the elements are just smashed together one after another each in a panel.
Issue 2: I am also generating checkboxes based on the item's category's so I can create a filter. I grab distinct categories with a query and fill them into a datatable. I have all the checkboxes but I have no idea how to go about generating an event for them because they are dynamic, and I've only used events that are hard coded. The code is similar:
foreach (DataRow tempRow in dt2.Rows)
{
string tempCategory = tempRow[0].ToString();
CheckBox cbCategory = new CheckBox();
cbCategory.ID = "id_cbCategory_" + tempflag2;
cbCategory.Text = tempCategory;
divFilterCategory.Controls.Add(cbCategory);
tempflag2++;
}
Issue 3: There are two divs that are next to each other, one for filter results that are generated, and another for the item results that are generated. As I mentioned they both generate properly at the moment, but for some reason when the items generate it shoots the second div halfway down the page. Pics:Before searching, After searching, Filters halfway down the page
Heres what the initial design looks like
<div runat="server" id="divSearch" class="divCenterItems">
<table class="searchTable">
<tr style="width: 100%">
<td style="width: 29%">
<div runat="server" id="divSearchFiltersHeader" class="divSearchHeaders">
<asp:Label runat="server" ID="lblFilterResults" Text="Filter Results" CssClass="headerLabels"></asp:Label>
</div>
<div runat="server" id="divSearchFiltersBody">
<div runat="server" id="divFilterCategory"></div>
<div runat="server" id="divFilterBrand"></div>
<div runat="server" id="divFilterPrice"></div>
</div>
</td>
<td style="width: 69%">
<div runat="server" id="divSearchResultsHeader" class="divSearchHeaders">
<asp:Label runat="server" ID="lblSearchTitle" Text="Search Results Title" CssClass="headerLabels"></asp:Label>
</div>
<div runat="server" id="divSearchResultsBody">
<div runat="server" id="divItemsMSS"></div>
<div runat="server" id="divItemsRMATVMC"></div>
<div runat="server" id="divItemsDK"></div>
</div>
</td>
</tr>
</table>
</div>
Styles:
.divCenterItems
{
border: 1px solid black;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.searchTable
{
width: 100%;
padding-left: 5px;
padding-right: 5px;
}
.divSearchHeaders
{
border: 1px solid black;
background-image: url('../Resources/header.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 30px;
}
.headerLabels
{
color: white;
font-size: 16px;
line-height: 2em;
padding-left: 10px;
}
Im not sure if any of these styles would be causing the filter div to act like this, but I've been playing around with them with no success. Any tips for tricks for these types of situations would be greatly appreciated, I'm new to dynamically generating elements. Cheers!
Issue 1:
Consider Using the Literal Web Control and putting html elements inside of the text with your desired classes.
var ltl = new Literal();
ltl.ID = "id_ltlName_" + tempFlag;
ltl.Text = $"<div class='class1'>{tempRow[1]}></div><div>{tempRow[2]}";
pnlItem.Controls.Add(ltl);
You could also create an ascx user control, and load instances of that dynamically if you want more functionality inside of the panel.
Issue 2
To add events to a dynamically created control, use the += operator to add a handler to be called when the event is fired. For Example, to handle the CheckChanged event for a checkbox. Remember that with dynamic controls, these event handlers have to be registered on every postback.
var checkbox1 = new CheckBox();
checkbox1.CheckedChanged += ClickedCheckBox;
private void ClickedCheckBox(object sender, EventArgs e)
{
var checkbox1 = sender as CheckBox;
}
Issue 3
You have 2 tds next to each other. Try vertical-align:top on both of them
<div runat="server" id="divSearch" class="divCenterItems">
<table class="searchTable">
<tr style="width: 100%">
<td style="vertical-align:top;width: 29%;">
</td>
<td style="vertical-align:top;width: 69%">
</td>
</tr>
</table>
</div>
I am having a problem with how to display a link in Sitecore. Currently I have three fields that I use: Name, Title and Link. All three of these fields are within a div tag, so...
<div class="container">
<div class="name"><sc:FieldRenderer ID="ColumnName" FieldName="Name" runat="server" /></div>
<div class="title"><sc:FieldRenderer ID="ColumnTitle" FieldName="Title" runat="server" /></div>
<div class="link"><sc:FieldRenderer ID="ColumnLink" FieldName="Link" runat="server" /></div>
</div>
For regular view, the link tag is being displayed as just text (that is written in Sitecore) but when it switches to mobile view, the container becomes the link with the Name and Title as the only thing showing and taking away what is in the Link field. My problem is how do I make the container the same link as the one that displays as text in desktop view? Is there a way have the text not be displayed and put an overlay container ontop of everything but just have the background as transparency to make the container go to the same link? For the backend, I just used a Listview that contained everything to make the fields show:
protected void Page_Load(object sender, EventArgs e)
{
Item item = this.DataSourceItem;
lvContains.DataSource = ((MultilistField)item.Fields["Columns"]).GetItems();
lvContains.DataBind();
}
protected void lvContains_ItemDataBound(object sender, ListViewItemEventArgs e)
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
Item item = (Item)e.Item.DataItem;
((FieldRenderer)e.Item.FindControl("ColumnName")).Item = item;
((FieldRenderer)e.Item.FindControl("ColumnTitle")).Item = item;
((FieldRenderer)e.Item.FindControl("ColumnLink")).Item = item;
}
}
Assuming you are using a responsive design, for the mobile/tablet breakpoints you can add some additional CSS properties to make the link the full height/width of the parent container and hide the text:
.container { border: solid 1px red; position: relative; }
.name { border: solid 1px blue; }
.title { border: solid 1px green; }
.link a {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
font-size: 0;
color: transparent;
}
<div class="container">
<div class="name">Item Name</div>
<div class="title">Item Title</div>
<div class="link">Item Link</div>
</div>
If you are not using a responsive design, and using device detection, then you can add an additional CSS class to the link and modify the css to match:
.link a.mobile {
...
}
And add the CSS Class in code behind:
((FieldRenderer)e.Item.FindControl("ColumnLink")).CssClass = "mobile";
My code have the problem of embedded for loop can't access the variables. I am using C#. Here is the codes:
<% List<ProductPacking> categoryList = new List<ProductPacking>();
categoryList = packBLL.getAllCategory();
foreach(ProductPacking cl in categoryList) { %>
<!-- FIRST COLLAPSIBLE PANEL EXTENDER -->
<asp:Panel ID="pHeader1" runat="server" CssClass="cpHeader">
<!-- First collapsible panel extender header -->
<div class="form-group" style="background-color: #ffb848; height: 30px; vertical-align: middle">
<div class="col-md-3">
<div style="float: left; color: White; padding: 5px 5px 0 0">
<%= cl.categoryName; %>
</div>
However, at this line: <%= cl.categoryName; %>, it told me the name cl does not exist in current context. I wonder why is it so.
I think is the way of how you are closing the tags in this case is the for each ends before the elements you want to render, try to close that at the end of the html to display and avoid using asp tags as well.
try something like
<%
StringBuilder sb = new StringBuilder();
List<ProductPacking> categoryList = new List<ProductPacking>();
categoryList = packBLL.getAllCategory();
foreach(ProductPacking cl in categoryList) {
sb.AppendFormat("<div>{0}</div>",cl.categoryName);
//some more html here
}
response.write(sb.ToString());
%>
but I'd prefer to use a grid or another similar control and customize the row template to make my life easier
I have this asp.net code:
#foreach( var database in Model)
{
if (!(firstTime == database.DB))
{
<h3> #database.DB </h3>
}
<div class="logContainer" onclick="location.href='/logs/Details?databaseID=#database.DB&exceptionName=#database.Exception&exceptionsOccurred=#database.Count';">
<div class="counter"><b>#database.Count</b></div>
<div class="exceptionName"> Exceptions of Type: #database.Exception</div>
<div class="date">Siste: #database.LastOccurred</div>
<hr /> </div>
firstTime = database.DB;
}
And this CSS:
.logContainer
{
width:500px;
}
.logContainer:hover
{
cursor:pointer;
background-color:#ffffcc;
}
.counter {
height: 30px;
width:35px;
float:left;
background: none repeat scroll 0 0 #E6FFDC;
border: 1px solid #BBDD66;
text-align:center;
vertical-align:middle;
line-height:1.5em;
font-size:1.5em;
}
.exceptionName
{
width:200px;
display:inline;
padding-left: 10px;
display: inline;
}
.date
{
font-size: 0.9em;
color:gray;
width:200px;
padding-left: 47px;
}
What it does is to display the ouput row per row, and when the Dabase.DB changes it writes it and start again.
What I want is to display the output horizontally having 3 logcontainer per row, and if I encounter a new database.DB break it, write the name of the database and start from the left.
How should I do modify the code to do it?
Just make your .logcontainer float to the left, and every 3 display, clear the floating.
currentCol = 0
#foreach( var database in Model)
{
if (!(firstTime == database.DB))
{
<h3> #database.DB </h3>
currentCol = 0
}
<div class="logContainer" onclick="location.href='/logs/Details?databaseID=#database.DB&exceptionName=#database.Exception&exceptionsOccurred=#database.Count';">
<div class="counter"><b>#database.Count</b></div>
<div class="exceptionName"> Exceptions of Type: #database.Exception</div>
<div class="date">Siste: #database.LastOccurred</div>
</div>
currentCol += 1;
if (currentCol = 2) { //3 columns were displayed, switch row
currentCol = 0;
<br style="clear:both" />
}
firstTime = database.DB;
}
CSS :
.logContainer
{
width:500px;
float:left;
}
note: if the parent container of .logContainer is less than 1500px wide, you'll end up with a row of 2 columns followed by a row of 1 column.
Could someone help me in CSS. I have text "Featured Page". On hovering(on mouseover),
i should see a picture on its right. Currently i get a picture under the text when i use the following Css. I need it bigger and right side of the text.
I have never worked on a css page.. So please don't take me wrong.
<style type="text/css">
#Style {
position:absolute;
visibility:hidden;
border:solid 1px #CCC;
padding:5px;
</style>
My javascript is :
<script language="javascript" type="text/javascript">
function ShowPicture(id,Source) {
if (Source=="1"){
var pos = $('' + id+'').offset();
var width = $('' + id+'').width();
var popupHeight = $(''+id+'').height();
if (document.layers) document.layers(''+id+'').visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
$(''+id+'').css( { "left": (pos.left - width - 272) + "px", "top": (pos.top - popupHeight + 5) + "px" } );
}
else
if (Source=="0"){
if (document.layers) document.layers(''+id+'').visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
My html is
<td valign="middle" class="table_td td top" style="width: 347px"> <span class="feature_text" style="cursor:pointer;" onmouseover="ShowPicture('Style',1)" onmouseout="ShowPicture('Style',0)" id="a1"> Featured Merchant Ad </span><br /> </td>
<div id="Style"><img src=""></div>
Thanks in advance!!
You could style the elements hover event to show a background image. You'll probably need to mess with the margins to get it to show up just right
.item
{
border:solid 1px #CCC;
padding:5px;
}
.item:hover
{
background: url(../images/background.png) middle right;
}
Try this:
<style type="text/css">
#mytext {
position: relative;
}
#mytext img {
position: relative;
visibiliy: hidden;
}
#mytext:hover img {
visibility: visible;
}
</style>
And this HTML:
<p id="mytext">
Some text...
<img src="..." />
</p>