I'm trying to learn CSS3 and get away from using table tags. Working with Visual studio 2010, .net 4.0 and vb.nt in an asp.net project. I have a listview that i'm trying to get the rows to alternate color. What i have works but only partially. What is rendered to screen is several rows that have wrapping text. The shading is only effecting a small line across the screen.. it does not cover the entire row. Here is the code:
div.row
{
clear: both;
padding-top: 5px;
}
div.row:nth-child(1n+3)
{
background-color: #C0C0C0;
}
div.row span.label
{
float: left; /*width: 100px;*/
text-align: right;
padding-right: 5px;
font-weight: bold;
}
div.row span.cell
{
float: left; /*width: 335px;*/
text-align: left;
}
Here is the markup:
<ItemTemplate>
<div class="row" >
<span class="cell" style="width: 200px;">
<asp:HyperLink ID="lblCalendarDataID" runat="server" NavigateUrl='<%# "CalendarAddEdit.aspx?ID=" & databinder.eval(container.dataitem,"CalendarDataID")%>'
Text='<%# databinder.eval(container.dataitem,"Title")%>' />
</span>
<span class="cell" style="width: 150px;">
<asp:Label ID="lblStartDate1" runat="server" Text='<%# databinder.eval(container.dataitem,"StartDate1","{0:d}")%>' />
-
<asp:Label ID="lblEndDate1" runat="server" Text='<%# databinder.eval(container.dataitem,"EndDate1","{0:d}")%>' />
</span>
<span class="cell" style="width: 150px;">
<asp:Label ID="lblStartTime1" runat="server" Text='<%# databinder.eval(container.dataitem,"StartTime1", "{0:t}")%>' />
-
<asp:Label ID="lblEndTime1" runat="server" Text='<%# databinder.eval(container.dataitem,"EndTime1", "{0:t}")%>' />
</span>
<span class="cell" style="width: 350px;">
<asp:Label ID="lblDescription" runat="server" Text='<%# databinder.eval(container.dataitem,"Description")%>' />
</span>
<span class="cell" style="width: 50px;">
<asp:HyperLink ID="hlDeleteID" runat="server" NavigateUrl='<%# "CalendarDelete.aspx?ID=" & databinder.eval(container.dataitem,"CalendarDataID")%>'
Text="Delete" />
</span>
</div>
</ItemTemplate>
anyone know what i'm doing wrong. I tried to use the alternatingItemTemplate but could not get it to shade. In that senerio.. i did a
<div class="row" style="background-color: #C0C0C0;">
any help would be great.
To have your background shading do what you want, try modifying this style:
div.row:nth-child(1n+3)
{
background-color: #C0C0C0;
}
to be this:
div.row:nth-child(1n+3) span
{
background-color: #C0C0C0;
}
to actually apply the background color to the spans that contain the content.
Related
This question already has answers here:
Floating elements causes the parent to collapse. HTML / CSS
(2 answers)
Closed 7 years ago.
This is the code from my asp.net application, and below is the CSS I have so far.
The problem I'm having is that the border I have is only covering the H2 element in my application. What I want is for the border to cover everything within the "persInfo" div, but it's not doing this and I cannot figure out why.
When I use "split" in Visual Studio it shows the border covering everything, but when I run it, it's only covering the H2 element.
#persInfo {
border: 3px solid;
border-radius: 25px;
}
#lblWrapper {
width: 50%;
float: left;
}
#tbxWrapper {
width: 50%;
float: right;
}
.lbl {
display: block;
margin-top: 9px;
margin-left: 20px;
}
.tbx {
display: block;
margin-top: 6px;
}
<div id="persInfo">
<h2>Personal Information</h2>
<div id="lblWrapper">
<asp:Label ID="Label7" runat="server" Text="First name" CssClass="lbl"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Surname" CssClass="lbl"></asp:Label>
<asp:Label ID="Label3" runat="server" Text="Email" CssClass="lbl"></asp:Label>
<asp:Label ID="Label4" runat="server" Text="Confirm Email" CssClass="lbl"></asp:Label>
<asp:Label ID="Label5" runat="server" Text="Password" CssClass="lbl"></asp:Label>
<asp:Label ID="Label6" runat="server" Text="Confirm Password" CssClass="lbl"></asp:Label>
</div>
<div id="tbxWrapper">
<asp:TextBox ID="tbxFname" runat="server" CssClass="tbx"></asp:TextBox>
<asp:TextBox ID="tbxSname" runat="server" CssClass="tbx"></asp:TextBox>
<asp:TextBox ID="tbxEmail" runat="server" CssClass="tbx"></asp:TextBox>
<asp:TextBox ID="tbxEmail2" runat="server" CssClass="tbx"></asp:TextBox>
<asp:TextBox ID="tbxPass" runat="server" CssClass="tbx"></asp:TextBox>
<asp:TextBox ID="tbxPass2" runat="server" CssClass="tbx"></asp:TextBox>
</div>
</div>
Elements that only contain floated elements will collapse.
You will need to "clear" the floats.
For a variety of so-called "clearfix" options, see this Question
I am using a Telerik RadListView (the elements are the same in a standard ASP.NET ListView) to show some data from a database. I want to show them in a tiled layout, but it loads the items from left to right.
For example - if I have 4 items in a row, the 5th item is shown on the left side. I tried to add dir="rtl" to all divs but that doesn't work.
How can I make this load items from right to left?
Here is my code:
<telerik:RadListView ID="RadListView1" runat="server" AllowPaging="True" AllowCustomSorting="True" AllowMultiFieldSorting="True" AllowNaturalSort="True" DataKeyNames="product_key" DataSourceID="DS_pure_product" PageSize="12">
<LayoutTemplate>
<div class="RadListView RadListViewFloated RadListView_Default" dir="rtl">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<telerik:RadDataPager ID="RadDataPager1" runat="server" SEOPagingQueryPageKey="CurrentPageKey" PageSize="12">
<Fields>
<telerik:RadDataPagerButtonField FieldType="FirstPrev" LastButtonImageUrl="" NextButtonImageUrl="" PrevButtonImageUrl="" />
<telerik:RadDataPagerButtonField FieldType="Numeric" LastButtonImageUrl="" NextButtonImageUrl="" PrevButtonImageUrl="" />
<telerik:RadDataPagerButtonField FieldType="NextLast" LastButtonImageUrl="" NextButtonImageUrl="" PrevButtonImageUrl="" />
<%--<telerik:RadDataPagerGoToPageField />
<telerik:RadDataPagerNumericPageSizeField />--%>
</Fields>
</telerik:RadDataPager>
</div>
<div class="col-md-3">
<table>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<div class="rlvFloated">
<div class="container-fluid" dir="rtl" style="text-align:right;">
<div class="row">
<div id="itemPlaceholder" runat="server">
</div>
</div>
</div>
</div>
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="rlvI col-md-3 lv_items">
<asp:Button ID="SelectButton" runat="server" CausesValidation="False" CommandName="Select" CssClass="rlvBSel" Text=" " ToolTip="Select" />
<table class="tbl_product">
<tr>
<td>
<asp:Image ID="Image2" CssClass="img-responsive img_product" runat="server" ImageUrl='<%# Eval("product_img") %>' />
</td>
</tr>
<tr>
<td>
<asp:Image ID="Image1" runat="server" CssClass="img_product_logo" ImageUrl='<%# Eval("product_brand") %>' />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("product_name") %>' />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("product_price") %>' />
</td>
</tr>
</table>
</div>
</ItemTemplate>
<EmptyDataTemplate>
<div class="RadListView RadListView_Default">
<div class="rlvEmpty">
There are no items to be displayed.</div>
</div>
</EmptyDataTemplate>
</telerik:RadListView>
After some conversation in the comments, it sounds like what you want is to right-align your content. In that case, float: right is what you're looking for.
The key is to have an overall container that will hold all of your data. Then, have another container for each row. This inner container is what you will float to the right. By not giving the inner container a width, it will grow to be as big as its children. If the inner container's width is less than that of its parent, it will show as aligning to the right side.
Below is an example of that.
.body {
height: 100px;
width: 500px;
background-color: red;
}
.child-container {
height: 100%;
float: right;
}
.child-1 {
height: 50%;
width: 100px;
float: left;
background-color: green;
}
.child-2 {
height: 50%;
width: 100px;
float: left;
background-color: orange;
}
.child-3 {
height: 50%;
width: 100px;
float: left;
background-color: blue;
}
<div class="body">
<div class="child-container">
<div class="child-1">
</div>
<div class="child-2">
</div>
<div class="child-3">
</div>
</div>
</div>
I have created a web page that looks as follows:
I have used css display:table to create the overall layout. My intention is to have 3 columns, the left for message type filter, middle for date filters and right for the apply filters checkbox and refresh grid button. The gridview appears in a stand-alone div below the table divs
My problem is I have not been able to get the "right" applyFilters div to stay in-line at the right of the screen. The broswer insists on displaying under the dataFilters div. Note, this can't be seen from the screen grab but there is lots of availabl space to the right of the dateFilters div.
Could anyone please let me know how I can correct this problem.
Aspx
<div id="layoutTable" style="display:table">
<div id="layoutRow1" style="display:table-row">
<div id="dataFilters">
<div id="table1Row1" style="display:table-row">
<span id="msgTypeFilter" class="filterProp">Message Type:
<asp:DropDownList ID="ddlMessageType" DataSourceID="dsmessageType" AutoPostBack="false"
DataValueField="messageType" runat="server" AppendDataBoundItems="true">
<asp:ListItem Text="All" Value="%"></asp:ListItem>
</asp:DropDownList>
</span>
</div>
<div id="table1Row2" style="display:table-row">
<%--additional filters here--%>
</div>
</div> <%--end data filters--%>
<div id="dateFilters">
<div id="table2Row1" style="display:table-row">
<span class="filterProp" id="startDate">Start Date:<asp:TextBox
ID="txtReceivedFilterStart" runat="server" Text="01/01/2013"
AutoPostBack="False" />
<ajaxToolkit:MaskedEditExtender ID="medReceivedStart" runat="server" MaskType="Date"
Mask="99/99/9999" MessageValidatorTip="true" TargetControlID="txtReceivedFilterStart"
AcceptAMPM="false" />
</span>
<span class="filterProp" id="endDate">End Date:<asp:TextBox
ID="txtReceivedFilterEnd" runat="server" Text="31/12/2050"
AutoPostBack="False" />
<ajaxToolkit:MaskedEditExtender ID="medReceivedEnd" runat="server" MaskType="Date"
Mask="99/99/9999" MessageValidatorTip="true" TargetControlID="txtReceivedFilterEnd" />
</span>
<span class="filterProp" id="whichDateFilter">Apply date filter to:
<asp:DropDownList runat="server" id="ddlDateFilterFieldname">
<asp:ListItem Value="ReceivedTime" Text="Received Time" />
<asp:ListItem Value="SentTime" Text="Sent Time" />
</asp:DropDownList>
</span>
</div>
<div id="table2Row2" style="display:table-row">
<span class="filterProp" id="startTime">
Start Time:<asp:TextBox ID="txtReceivedStartTime"
runat="server" Text="00:00:00" AutoPostBack="False" />
<ajaxToolkit:MaskedEditExtender ID="medReceivedStartTime" runat="server" MaskType="Time"
Mask="99:99:99" MessageValidatorTip="true" TargetControlID="txtReceivedStartTime"
AcceptAMPM="false" />
</span>
<span class="filterProp" id="endTime">
End Time:<asp:TextBox ID="txtReceivedEndTime" runat="server"
Text="23:59:59" AutoPostBack="False" />
<ajaxToolkit:MaskedEditExtender ID="medReceivedEndTime" runat="server" MaskType="Time"
Mask="99:99:99" MessageValidatorTip="true" TargetControlID="txtReceivedEndTime"
AcceptAMPM="false" />
</span>
<span class="filterProp" id="medValidators">
<ajaxToolkit:MaskedEditValidator ID="mvalReceivedStart" runat="server" ControlToValidate="txtReceivedFilterStart"
InvalidValueMessage="Incorrect format for date" ControlExtender="medReceivedStart"
TooltipMessage="Enter date in format dd/mm/yyyy" />
<ajaxToolkit:MaskedEditValidator ID="mvalReceivedEnd" runat="server" ControlToValidate="txtReceivedFilterEnd"
ControlExtender="medReceivedEnd" InvalidValueMessage="Incorrect format for date"
TooltipMessage="Enter datee in format dd/mm/yyyy" />
<ajaxToolkit:MaskedEditValidator ID="mvalReceivedStartTime" runat="server" ControlToValidate="txtReceivedStartTime"
InvalidValueMessage="Incorrect format for time" ControlExtender="medReceivedStartTime"
TooltipMessage="Enter time in format hh:mm:ss" />
<ajaxToolkit:MaskedEditValidator ID="mvalReceivedEndTime" runat="server" ControlToValidate="txtReceivedEndTime"
InvalidValueMessage="Incorrect format for time" ControlExtender="medReceivedEndTime"
TooltipMessage="Enter time in format hh:mm:ss" />
</span>
</div> <%--end table2Row2--%>
</div> <%--end dateFilters--%>
<div id="applyFilters">
<div id="tbl3row1" style="display:table-row">
<span class="filterProp" >
<asp:CheckBox ID="chkFilter" runat="server" Text="Apply Filters"
AutoPostBack="False" oncheckedchanged="chkFilter_CheckedChanged"/>
</span>
</div>
<div id="tbl3row2" style="display:table-row">
<span >
<asp:Button ID="btnRefresh" runat="server" Text="Refresh Grid"
onclick="btnRefresh_Click" class="button" />
</span>
</div>
</div>
</div> <%--end layout row 1--%>
</div> <%--end layout table--%>
CSS
.filterProp
{
/* float:left; */
display:table-cell;
}
#resultsGrid
{
padding: 20px 0px 20px 0px;
float: left;
}
#dateFilters > .filterProp
{
text-align: left;
}
#dateFilters
{
border: thin solid #C0C0C0;
display:table;
}
.filtersTitle
{
font-weight: bold;
margin-right: 20px;
}
#dataFilters
{
display:table;
float:left;
border: thin solid #C0C0C0;
}
#applyFilters
{
display:table;
}
.button
{
background-color: #00CC99;
color: #FFFFFF;
}
.button:hover
{
background-color: #33CCCC;
color: #FFFFFF;
}
.gridPager
{
text-align: right;
background-color: #C0C0C0;
color: #000000;
}
You could give the three columns a definitive width and float them (...or not. If you have enough space floating wouldn't be necessary but taking them out of the flow and floating them next to each other would work). Your date filters expand so that the apply filters div wraps. Giving them a definitive width will align the date text boxes vertically, leaving more space at the end for the apply filters div. Experiment with the numbers (using percentage would be best, and the wrapper would be set at 100%). So for your Message type, make it 40%, your date type could be 20%, and your apply type would be 40%.
edit: I see you have the apply portion in a span. Maybe placing that in a div separate from the date div would allow more control in positioning (making it a block element as opposed to an inline element).
I'm trying to align 2 sets of buttons to the panel in the div above. The buttons called but1, but2 for the left panel. The others are but1, but2, but3 right panel. At the moment the buttons are in a straight line under the 2 panels. So I would like the 2 left buttons right under the left panel aligned left. The 2 right buttons right under the right panel align left?
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
div.input
{
clear: left;
margin: 0 0 0.2em;
padding: 6pt 1em;
}
.flclass
{
float: left;
}
.imageDetails
{
color: Gray;
line-height: 1.2;
margin: 34px 0 0 10px;
}
input.special
{
background: none repeat scroll 0 0 #913297;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="input">
<label>
panel 1</label>
<asp:Panel CssClass="flclass" ID="pnlcustomerImage" runat="server" Style="background-color: #DDDDDD;
border: solid 1px black; vertical-align: middle; text-align: center; padding: 0"
Width="200px" Height="70px">
<asp:Literal ID="lt1" runat="server" Text="Panel left" />
<asp:HyperLink ID="hl1" runat="server" Target="_blank">
<asp:Image ID="im1" runat="server" Visible="false" Width="200px" Height="70px" AlternateText="Contact Admin to change your image" /></asp:HyperLink>
</asp:Panel>
<div class="flclass">
<p class="imageDetails">
<asp:Literal ID="lt4" Text="what to write here?" runat="server" />
</p>
</div>
<label>
small image</label>
<asp:Panel CssClass="flclass" ID="pnlAgentSmallLogo" runat="server" Style="background-color: #DDDDDD;
border: solid 1px black; vertical-align: middle; text-align: center;" Width="120px"
Height="42px">
<asp:Literal ID="lt2" runat="server" Text="Panel right" />
<asp:HyperLink ID="hl2" runat="server" Target="_blank">
<asp:Image ID="im2" runat="server" Visible="false" Width="120px" Height="42px" AlternateText="Contact Admin to change your image" /></asp:HyperLink>
</asp:Panel>
<p class="imageDetails" style="margin-top: 5px">
<asp:Literal ID="lt3" Text="what to write here?" runat="server" /></p>
<div class="input" style="margin: top">
<label>
</label>
<asp:Button ID="btn1" runat="server" Text="but1 left" CssClass="special" Style="margin-top: 54px;
margin-left: 10px" />
<asp:Button ID="btn2" runat="server" Text="but2 left" CssClass="special" Style="margin-top: 54px;
margin-left: 10px" Visible="true" />
<asp:Button ID="btn3" runat="server" Text="but1 right" CssClass="special" Style="margin-top: 26px;
margin-left: 10px" />
<asp:Button ID="btn4" runat="server" Text="but2 right" CssClass="special" Style="margin-top: 26px;
margin-left: 10px" Visible="true" />
<asp:Button ID="btn15" runat="server" Text="but3 right" CssClass="special"
Style="margin-top: 26px; margin-left: 10px" Visible="true" />
</div>
</div>
</form>
</body>
</html>
Change ur code
<asp:Button ID="btn3" runat="server" Text="but1 right" CssClass="special" Style="margin-top: 26px; margin-left: 150px" />
set margin-left: 150px in btn3
For future viewers, I found that this works better:
<asp:Button ID="btn3" runat="server" Text="but1 right"
CssClass="special" Style="margin-left:auto; display:block;" />
That way, if you change the width of your button, you don't have to do math to figure out the margin size.
I have a dropdownlist (asp.net) and when user change the selection from the dropdownlist it display respected div.
i need help in aligning the controls. and want to look like this:
DropdownListControl -- > selected_div -- > button
below is my soucr code....
<div style="width: 880px; padding-top: 2px; border-bottom: none;
height: 28px;">
<asp:Label ID="lblFilterResultsBy" runat="server" Text="Filter Results by:"></asp:Label>
<asp:DropDownList ID="ddlFilter" runat="server" Width="221px">
<asp:ListItem Text="Select..." Value=""></asp:ListItem>
<asp:ListItem Text="Date" Value="DATE"></asp:ListItem>
<asp:ListItem Text="Subject" Value="SUBJECT"></asp:ListItem>
<asp:ListItem Text="Status" Value="STATUS"></asp:ListItem>
</asp:DropDownList>
<div id="divDateRangeSearch">
<div style="float: left">
<asp:Label ID="lblDateRange" runat="server" Text="Date Range"></asp:Label>
<br />
<uc1:DatePicker ID="FromDate" runat="server" />
<uc1:DatePicker ID="ToDate" runat="server" />
</div>
</div>
<div id="divSearchSubject" >
<div style="float: left">
<asp:Label ID="lblSubject" runat="server" Text="Subject"></asp:Label><br />
<asp:TextBox ID="txtSubject" runat="server" Width="225px"></asp:TextBox>
</div>
</div>
<div id="divStatusSearch">
<div style="float: left">
<asp:Label ID="lblStatus" runat="server" Text="Status" ></asp:Label>
<br />
<asp:DropDownList ID="ddStatus" runat="server" Width="152px" >
</asp:DropDownList>
</div>
</div>
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />
UPDATE:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
#main {
width: 800px;
}
#select {
float: left;
width: 250px;
border: 1px solid blue ;
}
#holder {
position: relative;
width: 300px;
float: left;
margin-left: 20px;
border: 1px solid red ;
}
#div_date, #div_subject, #div_status {
position: absolute;
top: 0;
left: 0;
}
#button {
float: left;
margin-left:20px
}
</style>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$('#filterResultsBy').change(function () {
var sel = $(this).val();
$('#div_date').hide();
$('#div_subject').hide();
$('#div_status').hide();
if (sel === 'Date') {
$('#div_date').show();
}
else if (sel == 'Subject') {
$('#div_subject').show();
}
else if (sel == 'Status') {
$('#div_status').show();
}
});
});
</script>
<div id="main">
<div id="select">
Filter Results by:
<select id="filterResultsBy">
<option value="">Select...</option>
<option value="Date">Date</option>
<option value="Subject">Subject</option>
<option value="Status">Status</option>
</select>
</div>
<div id="holder">
<div id="div_date" style="width: 250px; display: none;" >
Date Range:
<asp:textbox width="50px" id="startdate" runat="server" /> - to - <asp:textbox width="50px" id="enddate" runat="server" />
</div>
<div id="div_subject" style="display: none;" >
Subject:
<asp:TextBox ID="txtSubject" runat="server" Width="225px" ></asp:TextBox>
</div>
<div id="div_status" style="display: none;" >
Status:
<asp:DropDownList ID="ddlStatus" runat="server" Width="152px">
</asp:DropDownList>
</div>
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />
</div>
</form>
</body>
</html>
Sure, not a problem. You can clean up your markup a bit on the div's that appear by removing the nested <div style="float: left">. The CSS would be as follows:
select {
float: left;
}
#divDateRangeSearch, #divSearchSubject, #divStatusSearch, #btnSearch {
float: left;
margin-left: 20px; /* put some space between the elements */
}
The above assumes that you're creating and destroying the respected <div>'s as you hide and show them. If you need them to all exist in the source and you'll show and hide them, you'll need something like the following:
#divHolder {
position: relative;
float: left;
width: 200px; /* adjust as needed */
}
#divDateRangeSearch, #divSearchSubject, #divStatusSearch {
position: absolute;
top: 0;
left: 0;
}
And the HTML:
<div id="divHolder">
<!-- Markup for the 3 divs would go in here -->
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />
Try the following. You'll have to add your other two divs back in, and I'm assuming you toggle their visibility based on selection.
<div style="width: 880px; padding-top: 2px; border-bottom: none;
height: 28px;">
<div style="float:left">
<asp:Label ID="lblFilterResultsBy" runat="server" Text="Filter Results by:"></asp:Label>
<asp:DropDownList ID="ddlFilter" runat="server" Width="221px">
<asp:ListItem Text="Select..." Value=""></asp:ListItem>
<asp:ListItem Text="Date" Value="DATE"></asp:ListItem>
<asp:ListItem Text="Subject" Value="SUBJECT"></asp:ListItem>
<asp:ListItem Text="Status" Value="STATUS"></asp:ListItem>
</asp:DropDownList>
</div>
<div id="divStatusSearch">
<div style="float: left">
<asp:Label ID="lblStatus" runat="server" Text="Status" ></asp:Label>
<asp:DropDownList ID="ddStatus" runat="server" Width="152px" >
</asp:DropDownList>
</div>
</div>
<div style="float:left">
<asp:Button ID="btnSearch" Text="Search" runat="server" />
</div>