I have 4 labels inside a div, it looks like this:
I want them to display in one single line, how do I do this?
The code for labels:
<div style="float:left; width:50%">
<asp:UpdatePanel ID="loginPanel" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Label ID="LoginLabel" runat="server" CssClass="label-info" Font-Bold="true" ForeColor="White" Width="300px"/>
</ContentTemplate>
</asp:UpdatePanel>
<%--Login ID--%>
<asp:UpdatePanel ID="RolePanel" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Label ID="ShowRole" runat="server" CssClass="label-info" Font-Bold="true" ForeColor="White" Width="300px"/>
</ContentTemplate>
</asp:UpdatePanel>
<%-- role --%>
<asp:UpdatePanel ID="timePanel" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Label ID="ShowTime" runat="server" CssClass="label-info" Font-Bold="true" ForeColor="White" Width="300px"/>
</ContentTemplate>
</asp:UpdatePanel>
<%--<br />--%>
<asp:UpdatePanel ID="projPanel" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Label ID="ProjCount" runat="server" CssClass="label-info" Font-Bold="true" ForeColor="White" Width="300px"/> <%--project counter--%>
</ContentTemplate>
</asp:UpdatePanel>
</div>
I don't know with asp.net, but with a single css :
.label-info{
display : inline-block;
float : left;
}
It appears the part that has
<%--<br />--%>
is breaking the line apart. Once changing that, the CSS bit display: inline-block; will do the trick.
Please use following css property, because <asp:label/> gets rendered as <div>.
div.lable-info{
display:inline;
}
Related
I want to set individual DIVs inside a grid visible/hidden programmatically like so, but it isn't working. How would you fix this code?
foreach (DataGridItem dgItem in dgW.Items)
{
HtmlGenericControl dvGoodRow =
(HtmlGenericControl)dgItem.FindControl("dvGoodRow");
HtmlGenericControl dvBadRow =
(HtmlGenericControl)dgItem.FindControl("dvBadRow");
dvGoodRow.Visible = true;
dvBadRow.Visible = false;
}
Debug sessions show that the Visible attribute I set above does take effect at least in my watch window, but visually on the browser I see no change. I have a grid like the one below:
<asp:datagrid id="dgW" AutoGenerateColumns="False" ShowHeader="False" ShowFooter="False" runat="server" DataKeyField="SID" CellPadding="0" GridLines="None" AllowSorting="True" OnItemDataBound="dgW_ItemDataBound">
<HeaderStyle />
<FooterStyle>
</FooterStyle>
<Columns>
<asp:TemplateColumn HeaderText="SID" SortExpression="SID">
<ItemTemplate>
<asp:Label ID="lblSID" Runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "SID") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Extension" SortExpression="ExtensionStopDate">
<ItemTemplate>
<asp:Label id="lblExtensionStopDate" Runat="server" text='<%# String.Format("{0:MM/dd/yyyy}", DataBinder.Eval(Container.DataItem, "ExtensionStopDate"))%>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<ItemTemplate>
<div id="dvGoodRow" runat="server" hidden>
<div>
<asp:Label runat="server" ID="lblGoodRow">
<i id="icnGoodRow" runat="server"></i>
</asp:Label>
</div>
</div>
<div id="dvBadRow" runat="server" hidden>
<div>
<asp:Label runat="server" ID="lblBadRow">
<i id="icnBadRow" runat="server"></i>
</asp:Label>
</div>
</div>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>
Remove that 'hidden' property and use visible
<div id="dvGoodRow" runat="server" visible="false">
<div id="dvBadRow" runat="server" visible="false">
Here's what I ended up doing to fix the code: I switched to showing/hiding ASP.NET Panels instead of DIVs!
<asp:TemplateColumn>
<ItemTemplate>
<asp:Panel runat="server" ID="pnlGoodRow" Visible="False">
<div id="dvGoodRow">
<asp:Label runat="server" ID="lblGoodRow">
<i id="icnGoodRow" runat="server"></i>
</asp:Label>
</div>
</asp:Panel>
<asp:Panel runat="server" ID="pnlBadRow" Visible="False">
<div id="dvBadRow">
<asp:Label runat="server" ID="lblBadRow">
<i id="icnBadRow" runat="server"></i>
</asp:Label>
</div>
</asp:Panel>
</ItemTemplate>
</asp:TemplateColumn>
So in the code, I now hide/show the Panel elements instead of DIVs:
foreach (DataGridItem dgItem in dgW.Items)
{
System.Web.UI.WebControls.Panel pnlGoodRow =
(System.Web.UI.WebControls.Panel)dgItem.FindControl("pnlGoodRow");
System.Web.UI.WebControls.Panel pnlBadRow =
(System.Web.UI.WebControls.Panel)dgItem.FindControl("pnlBadRow");
pnlGoodRow.Visible = true;
pnlBadRow.Visible = false;
}
This works!
I have multiple tabs on my page and currently I am binding all dropdownlists on every tab at page load.
I want to bind the dropdownlists only when the tab is selected. I also want to clear the gridviews when the tab is changed.
This is my HTML code
<li>
<input type="radio" id="tab1d" name="tabs1" runat="server"/>
<label for="tab1d">Search</label>
<div id="tab-content1d" class="tab-content animated fadeIn" style="background-color:white; padding:10px; ">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label4" runat="server" Text="Select Platform"></asp:Label>
<asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList3_SelectedIndexChanged" CssClass="inputs" Width="150px"></asp:DropDownList>
<asp:Label ID="Label10" runat="server" Text="Select Family Name"></asp:Label>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" CssClass="inputs" Width="150px" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"></asp:DropDownList>
<asp:Label ID="Label11" runat="server" Text="Select price Level"></asp:Label>
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true" CssClass="inputs" Width="150px" ></asp:DropDownList>
<asp:Button ID="Button7" runat="server" Text="Search" CssClass="buttons" OnClick="Button7_Click"/><br /><br />
<div id="gdvLeft">
<asp:GridView ID="gdvFamilyname" runat="server" EnableViewState="True" class="grid" RowStyle-CssClass="rows"></asp:GridView>
</div>
<div id="gdvRight">
<asp:GridView ID="gdvQuantity" runat="server" EnableViewState="True" class="grid" RowStyle-CssClass="rows"></asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</li>
Hi Himani, Try like this -
<input type="radio" value="Click Me" onclick="rdioClick();" />
In Javascript -
function rdioClick() {
var GridView1 = document.getElementById('GridView1');
GridView1.innerHTML = "";
}
Thanks :)
So, the reason for my disturbance, I need to put these TextBoxes, Labels, Buttons in a pretty line among themselves.
For some of you this might be easy doing in CSS, so please help me :D
Any reference where I can read about it would be nice too.
Extra Info:
Website is based on ASP.NET
EDIT1:
<asp:RadioButtonList ID="radioListRight" runat="server" AutoPostBack="True" RepeatDirection="Horizontal" >
<asp:ListItem>Recht hinzufuegen</asp:ListItem>
<asp:ListItem>Recht entfernen</asp:ListItem>
</asp:RadioButtonList>
<asp:Label ID="LabelError" runat="server" Font-Bold="True" Font-Size="Large" ForeColor="Red"></asp:Label>
<br />
Projekt: <asp:DropDownList ID="comboProj" runat="server" AutoPostBack="True" Width="140px" Visible="False">
</asp:DropDownList><br />
Teilprojekt: <asp:DropDownList ID="ComboTP" runat="server" Width="136px" Visible="False">
</asp:DropDownList>
<asp:Button ID="btnAddTP" runat="server" Text="Hinzufügen" Visible="False" />
<br />
<asp:ListBox ID="ListBoxTP" runat="server" Height="164px" Width="422px" Visible="False"></asp:ListBox><br />
Art der Berechtigungen:
<asp:DropDownList ID="comboBerechtigungsArt" runat="server" Visible="False" AutoPostBack="True">
<asp:ListItem>Auswählen...</asp:ListItem>
<asp:ListItem Value="CHECK-IN / CHECK-OUT"></asp:ListItem>
<asp:ListItem>CHECK-OUT</asp:ListItem>
<asp:ListItem>CHECK-IN</asp:ListItem>
</asp:DropDownList><br />
Berechtigungen eintragen für <asp:TextBox ID="TextBoxUser" runat="server" Width="151px" placeholder="HendrikHeim" Visible="False"></asp:TextBox>
<asp:Button ID="btnAddUser" runat="server" Text="Hinzufügen" Visible="False" />
<br />
<asp:Label ID="labelEmail" runat="server" Text="EMail"></asp:Label>
Don't use tables, use CSS and 'div' nodes to wrap the content and the display style to put the data inline.
Use http://www.w3schools.com/
As a source for CSS
Tables will not flow correctly if the browser width is to narrow, putting into individual tags will allow the browser to style the layout correctly.
To put elements on the same row:
<div style="display:inline;width:80px;">content here</div>
<div style="display:inline;width:100px;">content here</div><br />
You can then fix the width of the columns by adding more styles, width etc.
If you are unfamiliar with CSS, then spend some time learning it.
trying to get value from textbox called tbAantalgv in a gridview within an updatepanel after button click. standard value after databind for tbAantalgv = 0, but when i change the textbox value to 1, the textbox value will NOT change.
For Each gvr As GridViewRow In gvOnderdelenLos.Rows
If gvr.RowType = DataControlRowType.DataRow Then
Dim lblCode As Label = gvr.FindControl("lblCode")
Dim lblArtikel As Label = gvr.FindControl("lblArtikel")
Dim tbAantalgv As TextBox = gvr.FindControl("tbAantalgv")
End If
Next
<asp:UpdatePanel ID="pnlOnderdelenLos" runat="server" style="width:95%; border:solid 3px white; display:none;" UpdateMode="Conditional" >
<ContentTemplate>
<asp:ImageButton ID="imgOnderdelenLosToevoegen" runat="server" OnClientClick="imgOnderdelenLosToevoegen()" ImageUrl="~/Afbeeldingen/Icons/table_row_insert.png"
style="vertical-align:text-top; float:right; margin-right:2%" />
<asp:SqlDataSource ID="dsOnderdelenLos" runat="server" ConnectionString="<%$ ConnectionStrings:AftersalesConnectionString %>"
SelectCommand="EXEC spAppPnlOnderdelenLos">
</asp:SqlDataSource>
<asp:GridView ID="gvOnderdelenLos" runat="server" DataSourceID="dsOnderdelenLos" AllowSorting="False" PagerSettings-PageButtonCount="20" ShowHeader="false"
AllowEditing="True" AutoGenerateColumns="False" CellPadding="3" GridLines="Both" AllowPaging="False" style="width:100%; margin-left:2px;">
<HeaderStyle CssClass="Gridview" />
<Columns>
<asp:TemplateField HeaderText="Artikelnummer" SortExpression="Code" ItemStyle-Width="25%" >
<ItemTemplate>
<asp:Label ID="lblCode" runat="server" Text='<%# Bind("Code")%>' ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Artikel" SortExpression="Omschrijving" ItemStyle-Width="25%">
<ItemTemplate>
<asp:Label id="lblArtikel" runat="server" Text='<%# Bind("Omschrijving")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Aantal" SortExpression="Aantal" ItemStyle-Width="25%">
<ItemTemplate>
<asp:TextBox id="tbAantalgv" runat="server" Width="95%" text='<%# Bind("Aantal")%>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Kostenplaats" SortExpression="Kostenplaats" ItemStyle-Width="25%">
<ItemTemplate>
<asp:DropDownList ID="dlKostenplaats" runat="server" Width="100%">
<asp:ListItem Text="Werkplaats"></asp:ListItem>
<asp:ListItem Text="Verkoop"></asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnOnderdelenLosToevoegen" runat="server" OnClick="btnOnderdelenLosToevoegen_click" style="display:none;"/>
I do not understand what the issue can be.
Thanks in advance.
Frank
Here i have a problem with adding asp table inside the template field in gridview.
in my gridview one button is there named as "View" when i click this it should display all information below that row... so how do i do that??? should i use template field?? how to add button("View") for each row using this template field
Please correct my code
<asp:TemplateField HeaderText="View">
<ItemTemplate>
<asp:Table ID="tblModify" runat="server" Width="100%" Visible="False" CssClass="table">
<asp:TableRow>
<asp:TableCell ID="TableCell35" runat="server" HorizontalAlign="Right"><h1>Debit Information</h1></asp:TableCell>
<asp:TableCell></asp:TableCell>
<asp:TableCell></asp:TableCell>
<asp:TableCell></asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="TableRow6" runat="server">
<asp:TableCell ID="TableCell3" runat="server" HorizontalAlign="Right">DebitNoteNumber</asp:TableCell><asp:TableCell
ID="TableCell4" runat="server">
<asp:Label ID="lblDebitNoteId" runat="server" MaxLength="50" Columns="70" />
</asp:TableCell><asp:TableCell ID="TableCell5" runat="server" HorizontalAlign="Right">Date</asp:TableCell><asp:TableCell
ID="TableCell6" runat="server" HorizontalAlign="Left">
<asp:Label ID="lblDate" runat="server" MaxLength="30" Columns="50"></asp:Label>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="TableRow1" runat="server">
<asp:TableCell ID="TableCell11" runat="server" HorizontalAlign="Right">Patient Name</asp:TableCell><asp:TableCell
ID="TableCell37" runat="server" HorizontalAlign="Left">
<asp:Label ID="lblPatientName" runat="server" MaxLength="50" Columns="70"></asp:Label>
</asp:TableCell>
<asp:TableCell ID="TableCell1" runat="server" HorizontalAlign="Right">Patient Number</asp:TableCell><asp:TableCell
ID="TableCell2" runat="server" HorizontalAlign="Left">
<asp:Label ID="lblPatientId" runat="server" MaxLength="50" Columns="70"></asp:Label>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="TableRow2" runat="server">
<asp:TableCell ID="TableCell38" runat="server" HorizontalAlign="Right">Phone Number</asp:TableCell><asp:TableCell
ID="TableCell39" runat="server" HorizontalAlign="Left">
<asp:Label ID="lblPatientPhoneNumber" runat="server"> </asp:Label>
</asp:TableCell>
<asp:TableCell ID="TableCell7" runat="server" HorizontalAlign="Right">Bill Number</asp:TableCell><asp:TableCell
ID="TableCell8" runat="server" HorizontalAlign="Left">
<asp:Label ID="lblBillId" runat="server"> </asp:Label>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="TableRow5" runat="server">
<asp:TableCell ID="TableCell9" runat="server" HorizontalAlign="Right">Receipt Number</asp:TableCell><asp:TableCell
ID="TableCell10" runat="server" HorizontalAlign="Left">
<asp:Label ID="lblReceiptId" runat="server" MaxLength="30" Columns="50"></asp:Label>
</asp:TableCell><asp:TableCell ID="TableCell13" runat="server" HorizontalAlign="Right">Amount</asp:TableCell><asp:TableCell
ID="TableCell14" runat="server" HorizontalAlign="Left">
<asp:Label ID="lblAmount" runat="server" MaxLength="30" Columns="50"></asp:Label>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="TableRow8" runat="server">
<asp:TableCell ID="TableCell15" runat="server" HorizontalAlign="Right">Balacne</asp:TableCell><asp:TableCell
ID="TableCell16" runat="server" HorizontalAlign="Left">
<asp:Label ID="lblBalacne" runat="server" MaxLength="30" Columns="50"></asp:Label></td>
</asp:TableCell><asp:TableCell></asp:TableCell><asp:TableCell></asp:TableCell>
</asp:TableRow>
</asp:Table>
</ItemTemplate>
</asp:TemplateField>
if i use this code, i could't find button("View") in my gridview...
U can use Modal Pop Up Extender.
write simple html table tag(TR,TD) with your server side tag into the modal pop up.When You click on "View" the details will be shown into Modal pop up.