I have a repeater control with an Image and a hyperlink one below the other. Everytime I add more than one line of text the text pushes the imahe control up. I wan the top of the images to be aligned horizontally and the text to continue downward if there is more than a line of text.
please advise.
Here is the ascx code I have used:
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<asp:UpdatePanel ID="UpdatePanelAnnouncements" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table>
<tr>
<asp:Repeater ID="repAnnouncements" runat="server">
<ItemTemplate>
<td style="padding-right:19px; padding-top:1px; padding-left:7px;">
<asp:HiddenField ID="ItemID" Value='<%#Eval("ID") %>' runat="server" />
<asp:HyperLink ID="hypImageEditLink" runat="server">
<div class="ImageStyle" >
<asp:Image ID="imgLink" Height="110px" Width="150px" runat="server" ImageUrl='<%#Eval("Images")%>' CssClass ="magnify"/>
</div>
</asp:HyperLink>
<br/><br/>
<div id="div3" class="Div3"><asp:HyperLink ID="hypTextEditLink" runat="server" Text='<%#Eval("Title")%>' CssClass="TitleStyle"/></div>
</td>
</ItemTemplate>
</asp:Repeater>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:View>
And here is the style sheet:
.div3
{
width: 150px !important;
display:inline !important;
/*display: -moz-inline-box !important;
display: inline-block !important; */
float:left !important;
}
.ImageStyle
{
margin-left:8px;
/* Width:150px !important; Height:110px !important;
box-shadow: 0px 0.5px 35px 15px #888888;*/
border-collapse: separate !important;
box-shadow: 0px 0.5px 11px 4px #888888;
/*box-shadow: 0px 0.5px 11px 4px rgb(150,150,150);*/
}
.ImageStyle:hover
{
opacity:0.5 !important;
filter: alpha(opacity=50) !important;
border-color:blue !important;
border-width:thick !important;
}
As I understand your question, when there is a lot of text underneath a picture it causes the rest of the pictures to align themselves vertically in the middle of their cells. To resolve this alter your TD tag to the following:
<td style="vertical-align: top; padding-right:19px; padding-top:1px; padding-left:7px;">
Related
I am currently developing a page where users can rate products with the usage of AJAX Rating. The control works fine, users are able to rate products, however the images showing the rating does not appear.
This page is created with the use of a Master Page and the inclusion of a CSS Sheet stored elsewhere.
Below is the following CSS involved:-
<style type="text/css">
.StarRating{
font-size: 0pt;
width:50px;
height:50px;
margin: 0px;
padding: 0px;
cursor:pointer;
display: block;
background-repeat: no-repeat;}
.FilledStars{
background-image:url("css/images/star.png");
width:50px;
height:50px;
}
.WaitingStars{
background-image:url("css/images/wait.png");
width:50px;
height:50px;
}
.EmptyStars{
background-image:url("css/images/empty.png");
width:50px;
height:50px;
}
</style>
And below is code for displaying the Rating:-
<tr>
<td>Select Rating:</td>
<td>
<asp:scriptmanager ID="s1" runat="server"></asp:scriptmanager>
<asp:updatepanel runat="server">
<ContentTemplate>
<ajaxToolkit:Rating ID="Rating1" AutoPostBack="true" runat="server"
StarCssClass="StarRating"
FilledStarCssClass="FilledStars"
EmptyStarCssClass="EmptyStars"
WaitingStarCssClass="WaitingStars"
MaxRating="5"
CurrentRating="1"
style="float: left;"
>
</ajaxToolkit:Rating>
</ContentTemplate>
</asp:updatepanel>
</td>
</tr>
everybody
there's something weird in my webpage as it automatically adds new line after each controller
<asp:Label ID="ll" Class="question_bold" runat="server" Text="label 1" Visible="false"></asp:Label>
<asp:RequiredFieldValidator runat="server" id="lln" controltovalidate="Textbox" errormessage="* Required" Font-Bold="True" ForeColor="Red" SetFocusOnError="True" Display="Dynamic" />
<asp:TextBox ID="Textbox" runat="server" Visible ="false" Width="350px" ></asp:TextBox>
<asp:LinkButton ID="check" CssClass="myclass" visible="false" runat="server" OnClick="check_Click">Check</asp:LinkButton>
and here's CSS code:
a.myclass{ color: #FF0000; text-decoration: none; }
a.myclass:hover { text-decoration: none; }
.question_bold {
font-weight: bold;
border: 1px solid #e6e6e6;
border-radius: 10px;
background-color: #e6e6e6;
height: 25px;
width: 100%;
display: block;
}
i've tried changing display, and even removing the entire CSS from asp but still same
i need textbox, field validator, link button to be on same line....
any ideas ?!
The code below will line up the controls on one line. It uses CSS3 flexbox to line up the controls.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
a.myclass{ color: #FF0000; text-decoration: none; }
a.myclass:hover { text-decoration: none; }
.question_bold {
font-weight: bold;
border: 1px solid #e6e6e6;
border-radius: 10px;
background-color: #e6e6e6;
height: 25px;
width: 100%;
display: block;
}
.flex-container {
display: flex;
width: 650px;
height: 250px;
}
.flex-item {
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="flex-container">
<div class="flex-item"><asp:Label ID="ll" Class="question_bold" runat="server" Text="label 1"></asp:Label></div>
<div class="flex-item"><asp:RequiredFieldValidator runat="server" id="lln" controltovalidate="Textbox" errormessage="* Required" Font-Bold="True" ForeColor="Red" SetFocusOnError="True" Display="Dynamic" /></div>
<div class="flex-item"><asp:TextBox ID="Textbox" runat="server" Width="350px" ></asp:TextBox></div>
<div class="flex-item"><asp:LinkButton ID="check" CssClass="myclass" runat="server" OnClick="check_Click">Check</asp:LinkButton></div>
</div>
</form>
</body>
</html>
The solution above requires the browser supports CSS3 flexbox. Can you set the widths of each control? This can also be done using CSS. The solution below works for me across the different browsers.
<div>
<span><asp:Label ID="ll" Class="question_bold" runat="server" Text="label 1" Width="100px"></asp:Label></span>
<span><asp:RequiredFieldValidator runat="server" id="lln" controltovalidate="Textbox" errormessage="* Required" Font-Bold="True" ForeColor="Red" SetFocusOnError="True" Display="Dynamic" /></span>
<span><asp:TextBox ID="Textbox" runat="server" Width="350px" ></asp:TextBox></span>
<span><asp:LinkButton ID="check" CssClass="myclass" runat="server">Check</asp:LinkButton></span>
</div>
<html>
<head>
<title> </title>
</head>
<body>
<table class="format1" width="740px" cellpadding="2" cellspacing="0">
<tr>
<td>
<asp:Label ID="ll" Class="question_bold" runat="server" Text="label 1" Visible="false"></asp:Label>
<asp:RequiredFieldValidator runat="server" ID="lln" ControlToValidate="Textbox" ErrorMessage="* Required" Font-Bold="True" ForeColor="Red" SetFocusOnError="True" Display="Dynamic" />
</td>
<td>
<asp:TextBox ID="Textbox" runat="server" Visible="false" Width="350px"></asp:TextBox>
</td>
<td>
<asp:LinkButton ID="check" CssClass="myclass" Visible="false" runat="server" OnClick="check_Click">Check</asp:LinkButton>
</td>
</tr>
</table>
</body>
</html>
I used below code to generate a table view from ListView control, after some more document load (mostly 10 item), the order of items are disturbed,
<asp:ListView ID="ListView1" runat="server" >
<LayoutTemplate>
<ul>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li>
<table >
<tr>
<td >
<asp:ImageButton ID="ibtnDownload" ImageUrl='../res/i/UploadedFiles.jpg' ToolTip='<%#Eval("Name") %>' runat="server" OnClick="ibtnDownload_Click" />
<asp:Label ID="lblFullName" runat="server" Text='<%#Eval("FullName") %>' Visible="false"></asp:Label>
</td>
</tr>
<tr>
<td >
<asp:CheckBox ID="chkSelect" runat="server" style="margin-right:1px;" />
<asp:LinkButton ID="LinkFileName" runat="server" Text='<%#Eval("Name") %>' OnClick="ibtnDownload_Click"></asp:LinkButton></td>
</tr>
</table>
</li>
</ItemTemplate>
<EmptyDataTemplate>
<p style="font-weight:bold; margin:50%; width:200px;">No Files Uploaded </p>
</EmptyDataTemplate>
</asp:ListView>
THe CSS used for this listview is,
li
{
display: inline ;
}
ul li table
{
float: left;
margin-left:10px;
width: 10em;
text-decoration: none;
text-align:center;
overflow:hidden;
color:black;
padding: 0.2em 0.6em;
border-right: 1px solid white;
cursor: pointer; cursor: hand;
}
Below is the picture of result
The css option float: left; leads to this behavior, because your items have different height. When a row is full, the next item is floating as far to the top as possible, without its upper edge floating top left the lower edge of any previous item.
The effect is, that whenever a 3-line text is followed by a 2-line-text item (in line 1 and 3) or a 4-line-text is followed by 3-line-text (in line 4), the next line item is aligned in the corner below these items.
In order to prevent this behavior, set a common height for all items.
This can be done by moving the floating-behavior from table to <li> and adding a fixed height there or using some dynamic (jQuery) approach to set an equal height based on the largest item.
You also have to move some other css properties to the list item, since they are related to the floating
li {
display: inline;
min-height:150px; /* set your desired height*/
max-height:150px;
float: left;
overflow: hidden;
}
Here is my asp.net codes
<div class="output">
<div class="listbox">
<asp:ListBox ID="ListBox1" runat="server" Height="304px" Width="240px" ></asp:ListBox>
<asp:Label ID="Label1" runat="server" Text="."></asp:Label>
<asp:ListBox ID="ListBox3" runat="server" Height="100px" Width="240px"></asp:ListBox>
</div>
</div>
and here css style
.listbox {
width: 100%;
}
.output{
background-color:rgba(23, 23, 23, 0.71);
border: 2px solid grey;
width: 270px;
height: 540px;
position:absolute;
top:25%;
left:60%;
border-radius: 25px;
padding: 10px; }
I dont know why but on page inspecter it is left but on google chrome always aligned right.I have deleted history on chrome and check my code but couldnt find solution
i have a page wherein i need to lock the screen when user clicks on the send email button, but everything is happening except i am unable to see my lock screen page. i have used the update progress for this purpose.. m posting part of the code here
.aspx part
<asp:UpdatePanel ID="SendMailUpdatePanel" runat="server">
<ContentTemplate>
<div style="float: right;">
<asp:Button ID="btnSend" runat="server" Text="Send" ToolTip="Send "
Visible="false" Font-Bold="True" OnClick="btnSendResume_Click" />
<asp:Button ID="btnDown" runat="server" Text="Download IDs" ToolTip="follow-up"
Visible="false" Font-Bold="True" OnClick="btnDownloadEmailIDs_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<table>
<td style="width: auto; vertical-align: top;">
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="SendMailUpdatePanel">
<ProgressTemplate>
<div id="blur" style="width: 100%; background-color: black; moz-opacity: 0.5; khtml-opacity: .5;
opacity: .5; filter: alpha(opacity=50); z-index: 120; height: 100%; position: absolute;
top: 0; left: 0;">
<div id="progress" style="z-index: 200; background-color: White; position: absolute; top: 0pt;
left: 0pt; border: solid 1px black; padding: 5px 5px 5px 5px; text-align: center;">
<b>Mail in progress.Please Wait...</b>
<br />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</td>
</table>
.cs part
protected void btnSendResume_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);
}
rest of the part i have not mentioned here...any help
Your HTML Table is incorrectly formed. You have no <tr> elements, but the real problem probably lies with your style attributes, please see my updated code below.
You can find a good example of how to accomplish what you are trying to do here: http://blogs.visoftinc.com/2008/03/13/Modal-UpdateProgress-for-UpdatePanel-Revisited/
Try adjusting your code to the following:
<asp:UpdatePanel ID="SendMailUpdatePanel" runat="server">
<ContentTemplate>
<div style="float: right;">
<asp:Button ID="btnSend" runat="server" Text="Send" ToolTip="Send "
Visible="false" Font-Bold="True" OnClick="btnSendResume_Click" />
<asp:Button ID="btnDown" runat="server" Text="Download IDs" ToolTip="follow-up"
Visible="false" Font-Bold="True" OnClick="btnDownloadEmailIDs_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="SendMailUpdatePanel">
<ProgressTemplate>
<div id="blur" style="position:fixed; top:0px; bottom:0px; left:0px; right:0px; overflow:hidden; padding:0; margin:0; background-color:black; filter:alpha(opacity=50); opacity:0.5; z-index:1000;" />
<div id="progress" style="position:fixed; top:30%; left:43%; width:14%; z-index:1001; background-color:white; border:solid 1px black; padding:5px; text-align:center;">
<b>Mail in progress.Please Wait...</b>
<br />
<br />
</div>
</ProgressTemplate>
</asp:UpdateProgress>