HTML/CSS display Elements in nice manner - html

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.

Related

How do I hide/show a DIV inside a grid ItemTemplate?

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!

How to add an onClick event to an HTML radio button in asp.net

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 :)

Don't want the vertical scrollbar in dropdown list

I do not want the vertical scrollbar to appear for the dropdown list. I want to show all the items. How do I do that ?
size attribute doesn't work.
code design:
<asp:DropDownList ID="ddlTables" CssClass="labels" runat="server" AutoPostBack="true"
AppendDataBoundItems="true" Width="230px"
OnSelectedIndexChanged="ddlTables_SelectedIndexChanged">
<asp:ListItem Text="--Select--" Value="0" />
</asp:DropDownList>
The Scrollbar is there because you have too many items or too few height. Assuming you want to keep all the items there, you need to set this.size attribute to a value which will show all of the items without scrolling:
<asp:DropDownList ID="ddlTables"
CssClass="labels"
runat="server"
AutoPostBack="true"
AppendDataBoundItems="true"
Width="230"
onMouseOver="this.size=50;"
onMouseOut="this.size=1;"
OnSelectedIndexChanged="ddlTables_SelectedIndexChanged">
<asp:ListItem Text="--Select--" Value="0" />
</asp:DropDownList>

how to make the content inside div to display in one line

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;
}

How do I fix the button's position?

<table>
<tr>
<td>
<div style="margin-left: 220px;">
<asp:Button ID="btn1" Text="Edit" CommandArgument='<%#Eval("UserID") %>'
CausesValidation="false" CommandName="Edit" Visible="false" runat="server" />
</td>
</div>
<td>
<div style="margin-left: 370px;">
<asp:Button ID="btn2" Visible="false" Text="Edit" CommandArgument='<%#Eval("UserID") %>'
CausesValidation="false" CommandName="Edit" runat="server" />
</div>
</td>
</tr>
</table>
The problem is when both buttons are made visible dynamically..the second button shifts right wards..how do I fix their position so they appear exactly where I want them ?
[edit]
Do I need to use span or something instead of those divs ? IS there an HTML property that lets u fix a position of an element on page ? How do u do it ? I hv been googling but nothing came up..plz help
[edit 2]
I just added position:fixed in style attribute in the two buttons..when I ran the code again..both buttons didn't even appear!
how do u do it if not even this way ?
[edit 3]
I removed the divs and set both "td's" align property to centre..now the edit buttons are both appearing on the left together :/
Set a fixed width on the columns.
Also you need to fix the ordering of your td and div tags
<table>
<tr>
<td width="200px">
<asp:Button ID="btn1" Text="Edit" CommandArgument='<%#Eval("UserID") %>' CausesValidation="false" CommandName="Edit" Visible="false" runat="server" />
</td>
<td width="200px">
<asp:Button ID="btn2" Visible="false" Text="Edit" CommandArgument='<%#Eval("UserID") %>' CausesValidation="false" CommandName="Edit" runat="server" />
</td>
</tr>
</table>
Will make the column 200px wide, just replace it with whatever width that suits your needs.
Edit:
And well you don't really need the div tags for what you are doing.