I have been messing around with asp.net for awhile now and always have issues aligning objects with various heights on the same row. For example, in this case, I have a search label, a text field, then a image button. What is the "proper way" to get these three items to align properly?
My existing code:
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Panel VerticalAlign="Center" runat="server">
<asp:Label ID="Label1" runat="server" Font-Size="X-Large" Text="Search Tests:"></asp:Label>
<asp:TextBox ID="searchTextBox" runat="server" Font-Size="X-Large"
Height="30px" style="margin-left: 13px; margin-top: 0px" Width="219px"></asp:TextBox>
<asp:ImageButton ID="ImageButton2" runat="server" Height="45px"
ImageUrl="~/Images/SearchButton.PNG" style="margin-left: 18px; margin-top: 0px"
Width="95px" />
</asp:Panel>
</asp:Content>
The easiest is using CSS or tables. I put a div around with a height and vertical align to the top. CSS Reference
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Panel ID="Panel1" VerticalAlign="Center" runat="server">
<div style="height: 40px; vertical-align: top">
<div style="padding-top: 10px; float:left;">
<asp:Label ID="Label1" runat="server" Font-Size="X-Large" Text="Search Tests:"></asp:Label>
</div>
<div style="padding-top: 5px; float:left;">
<asp:TextBox ID="searchTextBox" runat="server" Font-Size="X-Large" Height="30px"
Style="margin-left: 13px; margin-top: 0px" Width="219px"></asp:TextBox>
</div>
<div style="padding-top: 5px; float:left;">
<asp:ImageButton ID="ImageButton2" runat="server" Height="45px" ImageUrl="~/Images/SearchButton.PNG"
Style="margin-left: 18px; margin-top: 0px" Width="95px" />
</div>
</div>
</asp:Panel>
</asp:Content>
i had the same problem and i think that using a table or a div only to align the Textbox it's excessive.
I solved simply:
<asp:TextBox ID="TextBox2" runat="server" Width="60px"></asp:TextBox>
<asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl="~/imatges/imgNou.png"
CssClass="style3" ImageAlign="AbsBottom" />
And adding the margin-top in Design view, the IDE added:
.style3
{
margin-top: 6px;
}
Related
I want to show some scrolling(marquee) link in my Website form to
display data I am using repeater control.but when i am trying to give
marquee to the repeater it doesn't give me output How I give marquee
Please help. My code:
<div id="calendar1">
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:CBMIAConnectionString %>"
SelectCommand="SELECT Event FROM [Home_EventLink]"></asp:SqlDataSource>
<table id="Head_Meeting">
<tr>
<td style="font-size: large; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-transform: capitalize; color: white;">  <i class="fas fa-calendar-alt" style="font-size: 25px; color: white"></i>  Upcoming Meetings</td>
</tr>
</table>
<br />
<div id="Meeting_Event" padding-left="5px" padding-right="5px">
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" class="hyperlink" Text='<%# Eval("Event") %>' href="home.aspx" runat="server" /><br />
</ItemTemplate>
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
</asp:Repeater>
</div>
</div>
THIS MAY HELP
<marquee id="MyMovingText" style="width: 80%" scrollamount="5" onmouseover="stop();" onmouseout="start();" runat="server" direction="left">
<asp:datalist RepeatDirection="Horizontal" ID="rptbreaknews" runat="server">
<ItemTemplate>
<a class="readmore" target="_blank" href='<%#"details.aspx?Id="+Eval("Id") %>'>
<h3><asp:Label ID="lbltext" Text='<%#Eval("NewNewsTitle") %>' runat="server"></asp:Label></h3>
</a>
</ItemTemplate>
</asp:datalist>
</marquee>
You can use marquee like this. And do not use class and href within an aspnet Control but use the correct properties like CssClass and NavigateUrl
<marquee id="MyMovingText" direction="left" scrollamount="10">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="scroll-item">
<asp:HyperLink ID="HyperLink1" CssClass="hyperlink" Text='<%# Eval("Event") %>'
NavigateUrl="/home.aspx" runat="server" />
</div>
</ItemTemplate>
</asp:Repeater>
</marquee>
<style>
.scroll-item {
float: left;
margin-right: 50px;
}
</style>
I have the following code to create a "favourites" button:
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
<asp:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server"
TargetControlID="CheckBox1"
ImageWidth="24"
ImageHeight="24"
UncheckedImageUrl="~/ClientBin/images/icons24x24/openstar.png"
CheckedImageUrl="~/ClientBin/images/icons24x24/filledstar.png"
CheckedImageAlternateText="Check"
UncheckedImageAlternateText="UnCheck"></asp:ToggleButtonExtender>
<br />
<asp:Label runat="server"
Text="Favourite"
font-size="8"
font-name="Verdana"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
Which gives me the following layout on the page:
What I would like is for the elements to be aligned something like this:
with the star's and text's centre's aligned.
I feel I'm missing something obvious, but I can't find the right search terms to reveal the answer.
This may not be ideal, but you can place the Checkbox and ToggleButtonExtender in a table of a certain size, and then nudge the image to the right using cell padding:
<div style="margin-left: 1in; margin-top: 1in; width: 24px; text-align: center">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table style="width: 75px">
<tr>
<td style="padding-left: 12px">
<asp:CheckBox ID="CheckBox1" runat="server" />
<asp:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server"
TargetControlID="CheckBox1"
ImageWidth="24"
ImageHeight="24"
UncheckedImageUrl="star_24x24.bmp"
CheckedImageUrl="star_24x24.bmp"
CheckedImageAlternateText="Check"
UncheckedImageAlternateText="UnCheck">
</asp:ToggleButtonExtender>
</td>
</tr>
</table>
<asp:Label runat="server"
Text="Favourite"
Font-Size="8"
font-name="Verdana"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
I have a set of controls that will show/hide when the user clicks a button. The controls consist of a grid, 2 labels, a dropdown, a text box and another button. I would like to position them as follows:
I have the grid positioned correctly but the dropdown and textbox controls are to the left but below the grid. The button is not centered.
How can I position the DIV with the controls to be positioned beside the grid and the button to display in the center but at the bottom of the main PANEL?
This is my makeup:
<asp:Button ID="btnShowMappingPanel" runat="server" Text="Update Value(s) in Multiple Mappings" Width="325px" />
<asp:Panel ID="pnlMultipleMappingControls" runat="server" Height="300px" Width="1000px" style="display:none;" BackColor="White" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px">
<div id="divMultiMapGrid" style="margin: 25px; width:45%">
<asp:GridView ID="msmgvMultiMappingSelection" runat="server" AllowPaging="True" PageSize="4" AllowSorting="True" AutoGenerateColumns="False" Caption="Select Multiple Mappings to Update"
CaptionAlign="Top" CssClass="grid" Visible="true">
<Columns>
<asp:TemplateField HeaderText="Select">
<EditItemTemplate>
<asp:CheckBox ID="msmgvCkBoxEditSelect" runat="server" />
</EditItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="msmgvCkBoxSelect" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Mapping ID">
<ItemTemplate>
<asp:Label ID="msmgvLblMappingID" runat="server" Text='<%# Bind("EnrollmentMappingID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Schoology Course ID">
<ItemTemplate>
<asp:Label ID="msmgvLblSchoologyCourseID" runat="server" Text='<%# Bind("SchoologyCourseID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CE City Activity ID">
<ItemTemplate>
<asp:Label ID="msmgvLblCECityActivityID" runat="server" Text='<%# Bind("CECityActivityID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div id="divMultiMapControls" style="float:right; width:45%; padding:5px">
<div id="divMultiMapActiveCtrl" style="padding:10px">
<asp:Label ID="lblActive" runat="server" Text="Is Active: " CssClass="label"></asp:Label>
<asp:DropDownList ID="ddlActiveOptions" runat="server">
<asp:ListItem> </asp:ListItem>
<asp:ListItem>Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:DropDownList>
</div>
<div id="divMultiMapMaxEnrollCtrl" style="padding:10px">
<asp:Label ID="lblMaxEnrollment" runat="server" Text="Maximum Enrollment: " CssClass="label"></asp:Label>
<asp:TextBox ID="txtBoxMapEnroll" runat="server" Width="25%"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" ControlToValidate="txtBoxMapEnroll" runat="server"
ErrorMessage="Enter only integers." ValidationGroup="multiMapEditMappingValidation" ValidationExpression="^\d+$"
Display="Dynamic" CssClass="message-error">
</asp:RegularExpressionValidator>
</div>
</div>
<div id="divMultiMapUpdateBtn">
<asp:Button ID="btnUpdateSelectedMappings" runat="server" Text="Update Selected Mappings" Width="200px" CausesValidation="true"
ValidationGroup="multiMapEditMappingValidation" OnClick="btnUpdateSelectedMappings_Click" />
</div>
</asp:Panel>
AS REQUESTED this is the jsfiddle
<panel>
<div id="divMultiMapGrid" style="margin: 25px; width:45%">Grid is here</div>
<div id="divMultiMapControls" style="float:right; width:45%; padding:5px">Controls are here
<div id="divMultiMapActiveCtrl" style="padding:10px">Dropdown control</div>
<div id="divMultiMapMaxEnrollCtrl" style="padding:10px">text box control</div>
</div>
<div id="divMultiMapUpdateBtn">Button</div>
First of all Don't use inline CSS. It will be very tough to manage later.
Now for your question:
#divMultiMapGrid {
margin: 25px;
width: 45%;
float: left;
}
#divMultiMapControls {
float: right;
width: 45%;
padding: 5px;
}
#divMultiMapActiveCtrl {
padding: 10px;
}
#divMultiMapMaxEnrollCtrl {
padding: 10px;
}
#divMultiMapUpdateBtn {
clear: both;
margin: auto;
width: 104px; // adjust width based on button
}
If you are still interested only in inline style, then
<panel>
<div id="divMultiMapGrid" style="margin: 25px; width:45%;float: left;">Grid is here</div>
<div id="divMultiMapControls" style="float:right; width:45%; padding:5px">Controls are here
<div id="divMultiMapActiveCtrl" style="padding:10px">Dropdown control</div>
<div id="divMultiMapMaxEnrollCtrl" style="padding:10px">text box control</div>
</div>
<div id="divMultiMapUpdateBtn" style=" clear: both; margin: auto; width: 104px;">Button</div>
</panel>
I have the following Listview in my aspx page
<asp:ListView ID="ListView1" GroupItemCount="4" runat="server"
DataKeyNames="contentid" DataSourceID="sqldsPhotos">
<LayoutTemplate>
<asp:Placeholder
id="groupPlaceholder"
runat="server" />
</LayoutTemplate>
<GroupTemplate>
<div>
<asp:Placeholder
id="itemPlaceholder"
runat="server" />
</div>
</GroupTemplate>
<ItemTemplate>
<asp:Image id="picAlbum" runat="server"
ImageUrl='<%# "ShowImage.ashx?id=" + Convert.ToString(Eval("contentid")) %>'
Height="108" Width="192" />
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</ItemTemplate>
<EmptyItemTemplate>
</EmptyItemTemplate>
</asp:ListView>
The resulting webpage displays my image with the link button beside it. What I would like is the image with the Linkbutton centered below it for each item.
Can someone help me out with the necessary html or css to achieve this.
Try the following html inside ItemTemplate
<div style="float: left; margin-left: 10px; text-align:center;width: 192; ">
<asp:Image id="picAlbum" runat="server"
ImageUrl='<%# "ShowImage.ashx?id=" + Convert.ToString(Eval("contentid")) %>'
Height="108" Width="192" />
<asp:LinkButton ID="LinkButton1" runat="server"
style="display: block; clear: both;">LinkButton</asp:LinkButton>
</div>
The above code will show divs side by side. So inorder to show 4 divs add with (800px) to your items in list view.
If you don't get the linkbutton at center add some margin-left to it to show it at center.
Try this:
<div style="width: 192px; text-align:center;">
<asp:Image id="picAlbum" runat="server"
ImageUrl='<%# "ShowImage.ashx?id=" + Convert.ToString(Eval("contentid")) %>'
Height="108" Width="192" /><br/>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</div>
I am trying to create the rows of controls. Basically it is for filtering a search. There are six controls in each row, 3 labels and 3 dropdownlists/textboxes. I have a div which creates rows and the first row turns out great but the rest is really weird.
The markup is the following
<div class="fullRow" style="margin-top:10px">
<asp:Label ID="FilterDepartmentLabel" AssociatedControlID="FilterDepartment" runat="server" Text="Department" CssClass="aThirdLabel"></asp:Label>
<asp:DropDownList ID="FilterDepartment" runat="server" CssClass="aThirdInput" />
<asp:Label ID="FilterCardStatusLabel" AssociatedControlID="FilterCardStatus" runat="server" Text="Status" CssClass="aThirdLabel"></asp:Label>
<asp:DropDownList ID="FilterCardStatus" runat="server" CssClass="aThirdInput" />
<asp:Label ID="FilterCardBehaviorLabel" AssociatedControlID="FilterCardBehavior" runat="server" Text="Behavior" CssClass="aThirdLabel"></asp:Label>
<asp:DropDownList ID="FilterCardBehavior" runat="server" CssClass="aThirdInput" />
</div>
<div class="fullRow" style="margin-top:10px">
<asp:Label ID="FilterCarPlateLabel" AssociatedControlID="FilterCarPlate" runat="server" Text="Car Plate" CssClass="aThirdLabel"></asp:Label>
<asp:TextBox ID="FilterCarPlate" runat="server" CssClass="aThirdInput"></asp:TextBox>
<asp:Label ID="FilterCardNoLabel" AssociatedControlID="FilterCardNo" runat="server" Text="Car No" CssClass="aThirdLabel"></asp:Label>
<asp:TextBox ID="FilterCardNo" runat="server" CssClass="aThirdInput"></asp:TextBox>
<asp:Label ID="FilterRuleSetCodeLabel" AssociatedControlID="FilterRuleSetCode" runat="server" Text="Rule Set" CssClass="aThirdLabel"></asp:Label>
<asp:DropDownList ID="FilterRuleSetCode" runat="server" CssClass="aThirdInput" />
</div>
<div class="fullRow" style="margin-top:10px">
<asp:Label ID="FilterDriverLastNameLabel" AssociatedControlID="FilterDriverLastName" runat="server" Text="Driver Lastname" CssClass="aThirdLabel"></asp:Label>
<asp:TextBox ID="FilterDriverLastName" runat="server" CssClass="aThirdInput"></asp:TextBox>
<asp:Label ID="FilterCardTypeLabel" AssociatedControlID="FilterCardType" runat="server" Text="Type" CssClass="aThirdLabel"></asp:Label>
<asp:DropDownList ID="FilterCardType" runat="server" CssClass="aThirdInput" />
</div>
And here is the css
.fullRow
{
width: 100%;
display:block;
}
.aThirdLabel
{
width: 15%;
float: left;
font-size:small;
height: 22px;
}
.aThirdInput
{
width: 15%;
float: left;
}
Actually, even though this looks good in design view of VS2010, when its loaded in the browser, its a mess.
Thanks
EDIT: The answer is in the comment huMpty duMpty made.
Add <div style="clear:both;"></div> after each row.