I was trying to look out for a possible solution and am yet to find one. Could you help me out how to add a text over an image.
Below is my code and I want lblWelcome and lblUsername to come over the image.
<img alt="Logo" src="../Resources/Images/Header.gif" style="height: 70px; width: 1000px;"/>
<asp:Label ID="lblWelcome" runat="server" Text="Welcome " CssClass="HeaderMenuText"></asp:Label>
<asp:Label ID="lblUsername" runat="server" CssClass="HeaderMenuText" Text=""></asp:Label>
Would be glad if someone can help me with this.
TIA,
Su
Another way can be by setting your image as the background image of an element and have your text as the child element
e.g.
<div style="background-image: url(../Resources/Images/Header.gif);height:70px;width:1000px;" >
<asp:Label ID="lblWelcome" runat="server" Text="Welcome " CssClass="HeaderMenuText"></asp:Label>
<asp:Label ID="lblUsername" runat="server" CssClass="HeaderMenuText" Text=""></asp:Label>
</div>
Use Css like Given Below:
<style type="text/css">
.lblposition {
position:absolute;
left:789px;
top:30px;
height: 21px;
width: 65px;
}
</style>
Use this css in label like below:
<asp:Label ID ="lbl" runat="server" Text="Search" BackColor="Red" ForeColor="Blue" CssClass ="lblposition"></asp:Label>
<table>
<tr>
<td style="background-image:url("Images/image1.jpg"); height:20px; width:20px;">
<asp:label ID="Lbl1" runat="server" Text="" Fore-color="Red" />
</td>
</tr>
</table>
Related
I currently create a wizard and its steps programmatically and I am trying to show the default side bar with its links to each step on the top instead of the side. Is this possible?
Wizard wiz = new Wizard();
//Do stuff with wizard steps
It's possible with CSS
ASP.NET declarative code
<asp:Wizard ID="ApplicationWizard" runat="server" DisplaySideBar="True">
<%-- LAYOUT --%>
<LayoutTemplate>
<div>
<asp:PlaceHolder ID="headerPlaceHolder" runat="server" />
</div>
<div id="stepIndicator">
<asp:PlaceHolder ID="sideBarPlaceHolder" runat="server" />
</div>
<div>
<asp:PlaceHolder ID="WizardStepPlaceHolder" runat="server" />
</div>
<div>
<asp:PlaceHolder ID="navigationPlaceHolder" runat="server" />
</div>
</LayoutTemplate>
<%-- HEADER --%>
<HeaderTemplate>
<h1 class="text-center">My Form</h1>
<%-- TODO: Add your header elements here --%>
</HeaderTemplate>
<%-- SIDEBAR --%>
<SideBarTemplate>
<ul id="header">
<asp:ListView ID="SideBarList" runat="server">
<ItemTemplate>
<li><asp:LinkButton ID="sideBarButton" runat="server" /></li>
</ItemTemplate>
<SelectedItemTemplate>
<li><asp:LinkButton ID="sideBarButton" runat="server" CssClass="active-step" /></li>
</SelectedItemTemplate>
</asp:ListView>
</ul>
</SideBarTemplate>
<%-- Wizard Steps --%>
<WizardSteps>
<asp:TemplatedWizardStep ID="AppStep1" runat="server" Title="Step 1">
<ContentTemplate>
<%-- TODO: Add your wizard step elements here --%>
</ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep2" runat="server" Title="Step 2">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep3" runat="server" Title="Step 3">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep4" runat="server" Title="Step 4">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep5" runat="server" Title="Step 5">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
</WizardSteps>
</asp:Wizard>
CSS Stylesheet
#stepIndicator {
list-style: none;
margin: 0px;
padding: 0px;
text-align: center;
}
#stepIndicator li {
display: inline-block;
}
#stepIndicator li a {
text-decoration: none;
padding: 10px;
display: block;
}
But how???:
On the SideBar template, create a list element
Inside the nested lis, insert the link button you want
The output will be the default format (sidebar on the side)
Add text-align: center for #stepIndicator to center the sidebar
Add display: inline-block for #stepIndicator li to align the the elements of #stepIndicator inline.
I have kept two radio button inside a datalist footer template but I am not at all able to select it. Below is my footer template:
<FooterTemplate>
<tr>
<td align="right" colspan="7"><br />
</td>
</tr>
<tr>
<td align="left" valign="middle" colspan="7">
<div style="background-color:#FCEE21; height:47px ;">
<div style=" position:relative; top:15px; left:20px;">
<asp:CheckBox ID="cbAgree" Checked="true" Text="I agree on all terms & conditions" runat="server" />
</div>
<div style=" position:relative; top:-1px; left:410px;">
<asp:Label ID="Label2" runat="server" Text="Total: (INR)"></asp:Label>
</div>
<div style=" position:relative; top:-22px; left:550px;">
<asp:Label ID="lbltotal" runat="server" Text="000000" Font-Size="14pt"></asp:Label>
</div>
</div>
</td>
</tr>
<tr>
<td align="right" colspan="7">
<div style="background-image: url(images/footerBg.png); height:47px ;">
<div style=" position:relative; top:10px; left:-172px;">
<asp:Label ID="Label9" runat="server" Text="Select an option: "></asp:Label>
<asp:RadioButton ID="rb1" Text="Colect" AutoPostBack="true" runat="server" GroupName="rboption"/>
<asp:RadioButton ID="rb2" Text="Deliver" AutoPostBack="true" runat="server" GroupName="rboption"/>
</div>
<div style=" position:relative; top:-18px;">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" BackColor="#F8CD20" CssClass="anchor"
BorderColor="#F8CD20" BorderStyle="None" OnClick=" Submit_Clicked" Font-Bold="True" Font-Size="14pt"
Height="38px" Width="105px" />
</div>
</div>
</td>
</tr>
</FooterTemplate>
I have not done any databinding also. Please help me out, if I missed out something.
Your problem is about your css styling. If you remove inline css styles from your divs you can click them.
Those divs are displaying on top of each other without proper styles and radiobuttons stay under another div, prevents you clicking on them.
Or if you want to keep the styles and still click them you can use "z-index" attribute with adding z-index:1;, so you bring the div with radiobuttons, above the other div, making them clickable.
....
<div style=" position:relative; top:10px; left:-172px; z-index:1;">
<asp:Label ID="Label9" runat="server" Text="Select an option: "></asp:Label>
<asp:RadioButton ID="rb1" Text="Colect" AutoPostBack="true" runat="server" GroupName="rboption"/>
<asp:RadioButton ID="rb2" Text="Deliver" AutoPostBack="true" runat="server" GroupName="rboption"/>
</div>
....
Overview: Clicking on text of first CheckBox in a repeater control clicks the last one. I know why this is happening; association of label tag with element id chkMarkedForDeletion and when that label is clicked it selects the last CheckBox, as all the CheckBoxes have same ID.. damn you repeater control!! I am wondering if there is any way to avoid this? Easy way would be to create individual labels and associate correctly to each CheckBox but that defeats the supposed default behaviour of a CheckBox.
Repeater code:
<asp:Repeater ID="childNodesDataRepeater" runat="server">
<ItemTemplate>
<table style="width: 100%;" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width: 200px;">
<asp:CheckBox ID="chkMarkedForDeletion" runat="server" EnableViewState="true" Text="Remove"
Checked='<%# DataBinder.Eval(Container.DataItem, "IsMarkedForDeletion") %>' />
</td>
<td>
</td>
<td style="width: 200px;">
<asp:CheckBox ID="chkHighImpactCause" runat="server" EnableViewState="true" Text="High Impact Cause"
Checked='<%# DataBinder.Eval(Container.DataItem, "IsHighPriority") %>' />
</td>
</tr>
<tr>
<td colspan="3">
<asp:Label ID="header002" runat="server" Text="What caused this problem?" />
</td>
</tr>
<tr>
<td colspan="3">
<asp:TextBox ID="txtProblemCausedBy" runat="server" EnableViewState="true" Width="100%"
Text='<%# DataBinder.Eval(Container.DataItem, "Description") %>' /><br />
</td>
</tr>
<tr>
<td colspan="3" style="height: 5px;">
<hr />
<asp:HiddenField ID="nodeIdentifier" runat="server" EnableViewState="true" Value='<%# DataBinder.Eval(Container.DataItem, "AnalysisID") %>' />
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
Generated HTML Code for CheckBox:
<INPUT id=chkMarkedForDeletion type=checkbox name=TabContainer$tabProblemResolution$frmProblemResolution1$childNodesDataRepeater$ctl00$chkMarkedForDeletion>
<LABEL for=chkMarkedForDeletion>Remove</LABEL>
...
...
<INPUT id=chkMarkedForDeletion type=checkbox name=TabContainer$tabProblemResolution$frmProblemResolution1$childNodesDataRepeater$ctl02$chkMarkedForDeletion>
<LABEL for=chkMarkedForDeletion>Remove</LABEL>
Issue:
Thanks,
Abhi
Make sure the ClientIDMode on the repeater is not set to "Static".
This setting is inheritable from the parent, which goes all the way up to web.config. So if you have to set the ClientIDMode explicitly on the repeater, it means that some parent overrides the default (Predictable) to "Static".
I am using two listviews to display two tag clouds (a red one and a green one). When the tag gets quite big, it overlaps the smaller ones. Is there a way to space out the tags, i.e vertical padding or something?
<div style="padding-left: 25px; padding-right: 25px; text-align: center;">
<asp:listview runat="server" ID="ListView1" ItemPlaceholderID="itemPlaceHolder">
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
</LayoutTemplate>
<ItemTemplate>
<%# Eval("Tag") %>
</ItemTemplate>
<EmptyDataTemplate>
<asp:Label ID="negative_tags" runat="server" Text=""></asp:Label>
</EmptyDataTemplate>
</asp:listview>
</div>
<br />
<div style="padding-left: 25px; padding-right: 25px; text-align: center;">
<asp:listview runat="server" ID="ListView2" ItemPlaceholderID="itemPlaceHolder">
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
</LayoutTemplate>
<ItemTemplate>
<%# Eval("Tag") %>
</ItemTemplate>
<EmptyDataTemplate>
<asp:Label ID="positive_tags" runat="server" Text=""></asp:Label>
</EmptyDataTemplate>
</asp:listview>
</div>
Yes,
on your <a> tags you can add:
line-height: 30px
or alternativelly you can add
padding-top:5px; padding-bottom:5px
I have a fileupload control with an updatePprogress in an updatePanel like this:
UpdatePanel is: updExtraSmall
<Triggers>
<asp:PostBackTrigger ControlID="lnkExtraSmall" />
</Triggers>
<ContentTemplate>
<table>
<tr>
<td style="border: 1px">
<asp:FileUpload ID="fupldExtraSmall" runat="server" />
</td>
<td>
<asp:LinkButton ID="lnkExtraSmall" OnClientClick="javascript:showWait();" OnClick="lnkExtraSmall_click" CausesValidation="false"
runat="server" Text="Upload" />
<asp:Label ID="lblMessage" runat="server" />
</td>
<td>
<asp:Label ID="lblExtraSmallMessage" runat="server" />
</td>
<td>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updExtraSmall">
<ProgressTemplate>
<DIV id="IMGDIV" align="center" valign="middle" runat="server" style="position: absolute;left: 35%;top: 25%;visibility:visible;vertical-align:middle;border-style:inset;border-color:black;background-color:White">
<img src="loading/loading.gif" /><br />
</DIV>
</ProgressTemplate>
</asp:UpdateProgress>
</td>
</tr>
</table>
</ContentTemplate>
and:
function showWait()
{
if ($get('fupldExtraSmall').value.length > 0)
{
$get('UpdateProgress1').style.display = 'block';
}
}
The problem is that the updateProgrss doesn't show.
Can anyone help me please?
Thank you,
Alina
Just Use the asyncfileupload control which come with ajaxcontroltoolkit 3.0 and then upload the file.
Put the UpdateProgress outside the ContentTemplate.
Ref: http://msdn.microsoft.com/en-us/library/bb398821.aspx