Styling uneditable-input checkbox and textbox - css

I'm making a login form within a table but I'm having a hard time formatting everything just the way I want to (never mind the left margin of the table, is just messed up on paint).
I want to make it look something like this:
However it currently looks like this:
The whole table is inside a div called "span54".
The checkbox "box" currently has 50px width (I want it like that), however this also affects the width of the textboxes.
How can I differentiate textboxes within that div?
The current CSS code:
checkbox (inspected checkox)
textbox (inspected textbox)
table code
<table class="logintable">
<tr>
<th colspan="2" rowspan="1">Login</th>
</tr>
<tr>
<td class="creds"><asp:label id="user" runat="server" text="User:" /></td>
<td colspan="1" rowspan="1"><input id="UserNameTextBox" type="text" runat="server" /></td>
<td colspan="1" rowspan="1"><asp:RequiredFieldValidator ID="vUserName" ControlToValidate="UserNameTextBox" Display="Static" ErrorMessage="Username Inválido" runat="server" /></td>
</tr>
<tr>
<td class="creds"><asp:label id="pass" runat="server" text="Password:" /></td>
<td colspan="1" rowspan="1"><input id="PasswordTextBox" type="password" runat="server" /></td>
<td colspan="1" rowspan="1"><asp:RequiredFieldValidator ID="vUserPass" ControlToValidate="PasswordTextBox" Display="Static" ErrorMessage="Password Inválida" runat="server" /></td>
</tr>
<tr>
<td colspan="3" rowspan="1"><asp:Button ID="btnlogin" runat="server" Text="Login" Class="btn-login" onclick="LoginButton_Click" /><asp:CheckBox id="RemPassword" cssclass="checkbox" runat="server" autopostback="false" text="Lembrar-me"/></td>
</tr>
<tr>
<td><asp:Label id="MsgLabel" runat="server" /></td>
</tr>
</table>

Edit file dq.css, near line 336 change width:50px; to width:160px;

Related

AjaxModalPopup don't show on visual studio 2013

I'm working on simple asp.net project with master page and content page. On the content page I have a ImageButton inside a gridview. I'm trying to show a modal popup when I click Image button, but it does not appear.
This is the necessary code:
<asp:Button ID="showPopUp" runat="server" Text="Button" Visible="False" />
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" style="display:none">
<table class="nav-justified">
<tr>
<td colspan="3" style="background-color: #CCCC00; color: #FFFFFF;" title="Purchase Invoice Details"></td>
</tr>
<tr>
<td class="auto-style5">Invoice</td>
<td class="auto-style6">:</td>
<td class="auto-style13">
<asp:Label ID="lblInvoice" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style12">Name</td>
<td class="auto-style8">:</td>
<td class="auto-style14">
<asp:Label ID="lblName" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style12">Category</td>
<td class="auto-style8">:</td>
<td class="auto-style14">
<asp:Label ID="lblCategory" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style5">Total Qty</td>
<td class="auto-style6">:</td>
<td class="auto-style13">
<asp:Label ID="lblQuantity" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style12">Total Price</td>
<td class="auto-style8">:</td>
<td class="auto-style14">
<asp:Label ID="lblPrice" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style12">SalePrice/Item</td>
<td class="auto-style8">:</td>
<td class="auto-style14">
<asp:Label ID="lblSalePrice" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style12">Comments</td>
<td class="auto-style8">:</td>
<td class="auto-style14">
<asp:Label ID="lblComments" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style12">Date</td>
<td class="auto-style8">:</td>
<td class="auto-style14">
<asp:Label ID="lblDate" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style12"></td>
<td class="auto-style8"></td>
<td class="auto-style14"></td>
</tr>
<tr>
<td colspan="3" style="height: 20px">
<asp:Button ID="btnClose" CssClass="btn-info" runat="server" Text="Close" OnClick="btnClose_Click" />
</td>
</tr>
</table>
</asp:Panel>
<ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="showPopUp"
PopupControlID="Panel1"
CancelControlID="btnClose"
BackgroundCssClass="backgroundcss" >
</ajax:ModalPopupExtender>
<style type="text/css">
.backgroundcss{
background-color:gray;
filter:alpha(opacity=80);
opacity:0.8;
z-index:10000;
}
.modalPopup
{
background-color: #FFFFFF;
width: 300px;
border: 3px solid #0DA9D0;
padding: 0;
}
</style>
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
ImageButton imgbtn = (ImageButton)sender;
GridViewRow gvr = (GridViewRow)imgbtn.NamingContainer;
lblInvoice.Text = gvr.Cells[1].Text;
lblName.Text = gvr.Cells[2].Text;
lblCategory.Text = gvr.Cells[3].Text;
lblQuantity.Text = gvr.Cells[4].Text;
lblPrice.Text = gvr.Cells[5].Text;
lblSalePrice.Text = gvr.Cells[6].Text;
lblComments.Text = gvr.Cells[7].Text;
lblDate.Text = gvr.Cells[8].Text;
this.ModalPopupExtender1.Show();
}
I was setting the targetcontrolid of the extender to a hidden button and trying to fire the Show() event in server side code. It wasn't being displayed even though the code was getting hit. I discovered that the problem was that I was hiding the hidden button using "visible = false" which doesn't render the control to the page. I changed it to "style='display:none'" and it started working. Try changing your target control to a hidden button and make sure it's getting rendered and maybe it will work.

putting drop down on page in proper place

i am designing Daily Attendance System. I have designed a page where Employer can put date range FROM--TO to find attendance of some worker for particular date range now i have been told to put NAME field too like an employer can search by date range but even for particular worker in particular date range. Now i am confused about design that where ti is best to put Name Drop DOwn List, which position on page sounds great for it which will make it better looking.
Interface:
You can try this.
<table>
<tr>
<td colspan="4">
Search By
</td>
</tr>
<tr>
<td>
Student Name :
</td>
<td colspan="3">
<asp:DropDownList ID="ddlStudentName" Width="320px" runat="server">
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
From Date :
</td>
<td>
<asp:TextBox ID="txtFromDate" runat="server" CssClass="datepicker" onkeypress="return false;"
Width="120px"></asp:TextBox>
</td>
<td style="width: 70px;">
To Date :
</td>
<td>
<asp:TextBox ID="txtToDate" runat="server" CssClass="datepicker" onkeypress="return false;"
Width="120px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</td>
<td style="width: 70px;">
</td>
<td>
</td>
</tr>
</table>
Stack vertically with a two column three row layout. Labels on the left, right justified.

Not able to see radio button list in my screen

I am unable to see the radio button list yes or NO in my screen I am getting the values from XML file.
Following code in aspx page:
<asp:Panel ID="pnlAction" runat="server" Width="100%" Visible="false">
<table cellpadding="0" cellspacing="0" border="0" width="99%">
<tr style="height: 20px;">
<td style="width: 25px;">
<hr />
</td>
<td class="secHeading frmlblBold"" style="width: 80px;" align="center">
Action
</td>
<td>
<hr />
</td>
</tr>
</table>
<table style="font-weight:normal" width="100%" border="0" cellpadding="2" cellspacing="2">
<tr>
<td style="width:250px;"></td>
<td style="width:350px;"></td>
<td style="width:250px;"></td>
<td style="width:350px;"></td>
</tr>
<tr>
<td class="frmlblBold" style="text-align:right;vertical-align:top">Action </td>
<td><asp:DropDownList ID="ddlAction" runat="server" CssClass="DropDown" DataSourceID="dsAction" DataValueField="CODE" DataTextField="CDDesc" AutoPostBack = "False" Width="342px"></asp:DropDownList></td>
</tr>
<tr>
<td class="frmlblBold" style="text-align:right;vertical-align:top">Service Agreement Clause </td>
<td style="vertical-align:top" style="width: 350px;">
<%-- <fieldset id="fldSLA" runat="server" style="width: 280px;">--%>
<asp:RadioButtonList ID="radSLA" runat="server" RepeatDirection="Horizontal" DataValueField="SLAID" DataTextField="SLADESC" DataSourceID="dsSLA" visible = "true">
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="rfvSLA" runat="server" ControlToValidate="radSLA" ErrorMessage="Please select if service agreement is applicable or not."
Enabled="true" Display="none"></asp:RequiredFieldValidator>
<%-- </fieldset>--%>
</td>
</tr>
<tr>
<td class="frmlblBold" style="text-align:right;vertical-align:top">Comments </td>
<td style="vertical-align:top">
<asp:TextBox runat="server" ID="txtActionComments" MaxLength="500" TextMode="MultiLine" width="95%" Rows="5" /> </td>
</tr>
<tr>
<td align="center" colspan="2">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" CssClass="btnOther" />
</tr>
</asp:Panel>
<asp:XmlDataSource ID="dsSLA" runat="server" EnableCaching="false" DataFile="~/XML/VisaTracking.xml"
XPath="BVILetter/SLA/ITEM" />
Code in .cs file:
if (!IsPostBack)
{
base.PageLoad();
GetReqPndActTknByMe(base.LogShortID);
radSLA.DataBind();
radSLA.SelectedValue = "Yes";
BindDataToDropdownListAction();
}
I am able to see the row count of radSLA.DataBind(); as '2'
My XML code:
<BVILetter>
<SLA>
<ITEM SLAID ="Yes" SLADESC ="Yes" />
<ITEM SLAID ="No" SLADESC ="No" />
</SLA>
</BVILetter>
But I am not able to see the radio buttons in my screen:
Please help me.
Please Check the Binding function clearly. If binding not happened properly then RadioBottonList does not appear.RadioBottonList apear only when when listItem bind properly

Not able to select text in textbox

I've got this here wizard step with a couple of text boxes. For some reason I cannot highlight/select the text in the textbox in IE or FF and I have no idea why, not even after spending a couple of hours googling the problem. I could really use another set of eyes on this. Let me know if you need more code to help.
<asp:WizardStep ID="wsPlanInfo" runat="server" Title="" StepType="Step">
<div style="width:100%; height:290px; margin-top:150px ">
<table border="0" style="margin:0 auto;">
<tr>
<td colspan="2" class="title">
Placeholder text here?
</td>
</tr>
<tr>
<td colspan="2"><asp:TextBox runat="server" ID="txtLearningPlanName" Width="300px" CssClass="input-text" /> <asp:RequiredFieldValidator runat="server" ID="rflLearningPlanName" ControlToValidate="txtLearningPlanName" ErrorMessage="*" CssClass="validator" /><br /><br /></td>
</tr>
<tr>
<td colspan="2" class="title">
placeholder text here?
</td>
</tr>
<tr>
<td> </td>
<td>
<table border="0"><tr><td><asp:RadioButton runat="server" ID="rbSpecificDate" GroupName="DeadlinePicker" Checked="true" /></td><td><UC:DatePicker runat="server" ID="ucSpecificDatePicker" RequiredField="false" /></td></tr></table>
</td>
</tr>
<tr>
<td> </td>
<td>
<asp:RadioButton runat="server" ID="rbCustomUserFieldPlusDays" GroupName="DeadlinePicker" /> <asp:DropDownList runat="server" ID="ddlUserCustomFields" CssClass="input-text" /> plus <Telerik:RadNumericTextBox runat="server" SkinID="Normal" ID="rntbUserCustomFieldOffset" ShowSpinButtons="true" DataType="System.Int32" NumberFormat-DecimalDigits="0" Width="60px" Value="365" /> days
</td>
</tr>
<tr>
<td> </td>
<td>
<asp:RadioButton runat="server" ID="rbPlusDays" GroupName="DeadlinePicker" /> <Telerik:RadNumericTextBox runat="server" SkinID="Normal" ID="rntbPlusDays" ShowSpinButtons="true" DataType="System.Int32" NumberFormat-DecimalDigits="0" Width="60px" Value="365" /> days from today
</td>
</tr>
<tr>
<td> </td>
<td>
<asp:RadioButton runat="server" ID="rbNone" GroupName="DeadlinePicker" /> None
</td>
</tr>
</table>
</div>
</asp:WizardStep>
Try:
((TextBox)wsPlanInfo.FindControl("txtLearningPlanName")).Text
It will search the Wizard Step's Control list for a textbox with that ID name. It then casts it as a TextBox and so you can then use the Text property.
Removing disableSelection(document.body) in my javascript solved my problem. Note to self, post entire code when asking a question.

How do i repeat my table / RadListView x times?

I have made one html-table that contain a RadListView (with use of LayoutTemplate and ItemTemplate), and it works fine.
It's a Property-table with two columns ("CadastralNummer", "CadastralSomething").
(The table has as many rows as the property has cadastrals)
Now comes the tricky part for me!
I now have a list of properties, instead of just one.
How do repeat my table for every property below each other?
If it can help, here's my code for one table:
<table border="0" cellspacing="2" cellpadding="0" width="75%">
<thead>
<tr>
<td style="width: 25%;">
CadastralNummer
</td>
<td style="width: 25%;">
CadastralSomething
</td>
</tr>
</thead>
<telerik:RadListView runat="server"
ID="RadListViewProperty"
AllowPaging="false" DataKeyNames="PropertyNR"
OverrideDataSourceControlSorting="true"
ItemPlaceholderID="ListViewContainer"
OnItemDataBound="RadListViewProperty_ItemDataBound">
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="listViewContainer" />
</LayoutTemplate>
<ItemTemplate>
<tbody>
<tr>
<td style="vertical-align: top;">
<asp:Label ID="lblCadastralNummer" runat="server" />
</td>
<td style="vertical-align: top;">
<asp:Label ID="lblCadastralSomething" runat="server" />
</td>
</tr>
</tbody>
</ItemTemplate>
</telerik:RadListView>
</table>
Have you seen the repeater control? This may provide what you need.
I put my table/RadListView inside another table/RadListView, and it worked fine.

Resources