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.
Related
I know that it's not possible to directly add css styles to a listview but is there any way round this? I'm trying to create a news page where each news block is contained within a box essentially.
Here is my listview code
<div>
<asp:ListView ID="lvNews" runat="server" DataSourceID="SqlNewsDataSource">
<ItemTemplate>
<asp:Label ID="TitleLabel" CssClass="subtitle" runat="server" Text='<%# Eval("Title") %>' />
<br />
<asp:Image ID="news_image" Width="300px" Height="250px" runat="server" ImageUrl='<%# Eval("Imageurl") %>'/>
<br/>
<br />
<asp:Label ID="NewsLabel" CssClass="bodyText" runat="server" Text='<%# Eval("News") %>' />
<br />
<br/>
</ItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="SqlNewsDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:sqlMUConnectionString %>" SelectCommand="SELECT [Title], [News], [Imageurl] FROM [News]"></asp:SqlDataSource>
</div>
And the css style that Im trying to apply
/*News Page*/
.newsBox {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: auto;
text-align: center;
}
Just wrap the items in your ItemTemplate with a div of that class.
Like this:
<asp:ListView ID="lvNews" runat="server" DataSourceID="SqlNewsDataSource">
<ItemTemplate>
<div class="newsBox">
<asp:Label ID="TitleLabel" CssClass="subtitle" runat="server" Text='<%# Eval("Title") %>' />
<br />
<asp:Image ID="news_image" Width="300px" Height="250px" runat="server" ImageUrl='<%# Eval("Imageurl") %>'/>
<br/>
<br />
<asp:Label ID="NewsLabel" CssClass="bodyText" runat="server" Text='<%# Eval("News") %>' />
<br />
<br/>
</div>
</ItemTemplate>
</asp:ListView>
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>
We are currently developing an asp.NET 4.0 Web Forms application. In a particular screen we attempted to create a grid view with a fixed header and footer. We got this working how we wanted, but then we realised that when we click a button which issues a partial post back (triggers required field validators for example) the fixed header disappears.
Any ideas why this is happening?
Code as follows:
CSS (relevant parts):
.tableStyle
{
}
.tableStyle th
{
text-align: left !important;
padding: 2px 5px !important;
font-weight: bold;
}
.tableStyle td
{
padding: 1px 5px !important;
text-align: left;
}
.container
{
overflow-y: scroll;
overflow-x: hidden;
height: 500px;
}
.container table tbody
{
overflow-x: hidden;
}
/* Creates a Scrollable Div */
.GridViewContainer
{
overflow: auto;
}
.freezeHeader
{
position: absolute;
background-color: White;
font-weight: bold;
margin-top: -40px;
padding-bottom: 5px;
z-index: 99;
}
.freezeFooter
{
position: absolute;
background-color: White;
top: 530px;
padding-bottom: 20px;
z-index: 95;
}
.paddingTop
{
margin-top: 40px;
}
ASPX Page (Grid View Part):
<fieldset>
<legend>Products Mapping Table (EXT_CFG_PDT_MAP)</legend>
<div id="grdWithScroll" class="container">
<asp:GridView
ID="ProductsMappingTableGridView"
AutoGenerateColumns="false"
runat="server"
OnRowCancelingEdit="ProductsMappingTableGridView_RowCancelingEdit"
OnRowEditing="ProductsMappingTableGridView_RowEditing"
OnRowUpdating="ProductsMappingTableGridView_RowUpdating"
ShowFooter="true"
OnRowCommand="ProductsMappingTableGridView_RowCommand"
CssClass="tableStyle paddingTop"
HeaderStyle-CssClass="freezeHeader"
FooterStyle-CssClass="freezeFooter">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="editButton" Text="Edit" CausesValidation="false" CommandName="Edit" runat="server" Enabled='<%# Session["ProductsMappingsWriteAccess"] %>'/>
</ItemTemplate>
<EditItemTemplate>
<asp:Button ID="updateButton" Text="Update" CommandName="Update" runat="server" ValidationGroup="Edit"/>
<asp:Button ID="cancelButton" Text="Cancel" CausesValidation="false" CommandName="Cancel" runat="server" />
</EditItemTemplate>
<FooterTemplate>
<asp:Button ID="insertButton" Text="Insert" CommandName="Insert" runat="server" ValidationGroup="Insert" Enabled='<%# Session["ProductsMappingsWriteAccess"] %>'/>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>Product Mapping ID</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="mptIdLabel" runat="server" Text='<%# Eval("MPT_ID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>Source Key</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="srcKeyLabel" runat="server" Text='<%# Eval("SRC_KEY") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:DropDownList AutoPostBack="false" ID="srcKeyListEdit" runat="server" Width="95px" OnLoad="SrcKeyListInitalization" >
</asp:DropDownList>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList AutoPostBack="false" ID="srcKeyListInsert" runat="server" Width="95px" OnLoad="SrcKeyListInitalization"
Visible='<%# Session["ProductsMappingsWriteAccess"] %>'>
</asp:DropDownList>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>Product Key - Source</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="pdtKeySrcLabel" runat="server" Text='<%# Eval("PDT_KEY_SRC") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="pdtKeySrcTextBoxEdit" runat="server" Text='<%# Eval("PDT_SRC") %>'
MaxLength="32"></asp:TextBox>
<br />
<asp:RequiredFieldValidator runat="server" ID="pdtKeySrcTextBoxEditRequiredFieldValidator"
ControlToValidate="pdtKeySrcTextBoxEdit" ValidationGroup="Edit" ForeColor="Red"
ErrorMessage="PDT_KEY_SRC is required"></asp:RequiredFieldValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="pdtKeySrcTextBoxInsert" runat="server" Text='<%# Eval("KEY_SRC") %>'
MaxLength="32" Visible='<%# Session["ProductsMappingsWriteAccess"] %>'></asp:TextBox>
<br />
<asp:RequiredFieldValidator runat="server" ID="pdtKeySrcTextBoxInsertRequiredFieldValidator"
ControlToValidate="pdtKeySrcTextBoxInsert" ValidationGroup="Insert" ForeColor="Red"
ErrorMessage="PDT_KEY_SRC is required"></asp:RequiredFieldValidator>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</fieldset>
Update 1: I would like to point out that this appears not to have been affected on IE 8 but it was affected when I used IE 10.
A hotfix is available for the ASP.NET browser definition files in the Microsoft .NET
please refer http://support.microsoft.com/kb/2600088 for .NET 4.0
Refer http://support.microsoft.com/kb/2608565 for .Net 3.5
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;
}
My Registration page currently looks like the following:
The current styling I have for the above is image is:
<style type="text/css">
#contactinfo label
{
float: left;
width: 10em;
margin-right: 0.5em;
text-align: right;
font-size: 14px;
}
#contactinfo p
{
padding: 5px;
}
#contactinfo input[type="text"], input[type="password"]
{
height: 1.5em;
}
#contactinfo select
{
padding: 0.25em;
}
#contactinfo input[type="text"]:focus, input[type="password"]:focus
{
background-color: #FFFFE0;
}
#contactinfo .update
{
margin-left: 12.5em;
}
#contactinfo .error
{
background-color: transparent;
}
#contactinfo .longtextbox
{
width: 20em;
}
#contactinfo .shorttextbox
{
width: 5em;
}
</style>
and the markup is
<div id="contactinfo">
<p>
<asp:Label runat="server"
AssociatedControlID="txtEmail">Email
</asp:Label>
<asp:TextBox ID="txtEmail"
runat="server"
CssClass="longtextbox" />
</p>
<p>
<asp:Label runat="server"
AssociatedControlID="txtFirstName">First Name
</asp:Label>
<asp:TextBox ID="txtFirstName"
runat="server"
ValidationGroup="AccountValidation" />
<asp:RequiredFieldValidator runat="server"
ControlToValidate="txtFirstName"
Text="First Name is required."
ValidationGroup="AccountValidation"
CssClass="error">
</asp:RequiredFieldValidator>
</p>
<p>
<asp:Label runat="server"
AssociatedControlID="txtLastName">Last Name
</asp:Label>
<asp:TextBox ID="txtLastName"
runat="server"
ValidationGroup="AccountValidation" />
<asp:RequiredFieldValidator runat="server"
ControlToValidate="txtLastName"
Text="Last Name is required."
ValidationGroup="AccountValidation"
CssClass="error">
</asp:RequiredFieldValidator>
</p>
<p>
<asp:Label runat="server"
AssociatedControlID="txtBusinessName">Business Name
</asp:Label>
<asp:TextBox ID="txtBusinessName"
runat="server"
CssClass="longtextbox"
ValidationGroup="AccountValidation" />
<asp:RequiredFieldValidator runat="server"
ControlToValidate="txtBusinessName"
Text="Business Name is required."
ValidationGroup="AccountValidation"
CssClass="error">
</asp:RequiredFieldValidator>
</p>
<p>
<asp:Label runat="server"
AssociatedControlID="txtPhone">Phone
</asp:Label>
<asp:TextBox ID="txtPhone"
runat="server"
ValidationGroup="AccountValidation" />
</p>
<p>
<asp:Label runat="server"
AssociatedControlID="txtAddress">Address
</asp:Label>
<asp:TextBox ID="txtAddress"
runat="server"
CssClass="longtextbox"
ValidationGroup="AccountValidation" />
<asp:RequiredFieldValidator runat="server"
ControlToValidate="txtAddress"
Text="Address is required."
ValidationGroup="AccountValidation"
CssClass="error"></asp:RequiredFieldValidator>
</p>
<p>
<asp:Label runat="server"
AssociatedControlID="txtCity">City
</asp:Label><asp:TextBox ID="txtCity"
runat="server"
ValidationGroup="AccountValidation" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator4"
runat="server"
ControlToValidate="txtCity"
Text="City is required."
ValidationGroup="AccountValidation"
CssClass="error">
</asp:RequiredFieldValidator>
</p>
<p>
<asp:Label runat="server"
AssociatedControlID="ddlState">State
</asp:Label>
<asp:DropDownList ID="ddlState"
runat="server"
DataSourceID="dsStates"
DataTextField="Name"
DataValueField="Id">
</asp:DropDownList>
</p>
<p>
<asp:Label runat="server"
AssociatedControlID="txtZipcode">Zipcode</asp:Label>
<asp:TextBox ID="txtZipCode" runat="server" CssClass="shorttextbox"
ValidationGroup="AccountValidation" />
</p>
</div>
As you can see from above, I have every label field pair wrapped in a p tag so it breaks to the next line, but I am not sure if I need to do this. I want to get city, state, and zip all on the same line, but as soon as I move all the labels and inputs for city,state,zip into one p tag, it looks like the following and I don't know how to fix it.
EDIT : Try using this as cssclass for
those labels -
#contactinfo noformatlabel
{
//add here if you need to adjust the spacing..but dont float add padding or //something else..
padding:0.2em //maybe this if needed for formatting..
}
I think -
#contactinfo label
{
float: left;
width: 10em;
margin-right: 0.5em;
text-align: right;
font-size: 14px;
}
these css properties are a problem...do a different type css for the labels for city state and zipcode...i mean try it without any formating...it might work then..
You could probably float those three inputs as well as the labels. Or stop floating the labels, since the width isn't going to matter like it does now.