how to control space between radiobuttons of the radiobuttonlist control - html

I am having lot of space between newly added radiobuttons(yes and No) of the RadioButtonList and the first part of the existing region(divName) is aligned properly.
can any body help me in aligning the newly added second region(div1)
<div id="divpanelFacts" runat="server">
<fieldset id="panelFacts">
<table width="100%">
<tr>
<td>
<div id="divName" runat="server" visible="false">
<span>
<label runat="server" id="Label1">
<span id="pNameSpan" runat="server">*</span>P Name</label>
<asp:TextBox ID="textPName" runat="server" MaxLength="20"></asp:TextBox>
</span>
</div>
</td>
<td>
<div id="div1" runat="server" visible="false">
<asp:Label ID="lbl1" runat="server" Text="Would like to use this option for document purpose"></asp:Label>
<asp:RadioButtonList ID="rbl1" runat="server" TextAlign="Left" RepeatDirection="Horizontal">
<asp:ListItem Value="Yes" Text="Yes" />
<asp:ListItem Value="No" Text="No" Selected="True" />
</asp:RadioButtonList>
</div>
</td>
</tr>
</table>
</fieldset>
</div>

Your table width is at 100%, which means it's going to stretch it, and table I think takes precedence.

Related

asp.net Dropdownlist inside a div with data-toggle=button

I have an ASP.Net DropDownList inside a div that has data-toggle="button", and when I try to select an option in the dropdownlist, it disappears instantly before I can make a selection. I have to hold the mouse button down to make a selection.
I believe it is somthing to do with the data-toggle on the parent div because when I remove that, the dropdownlist works normal.
Here is the straightforward markup.
<asp:Repeater ID="ShippingTermsRepeater" runat="server" Visible="false">
<HeaderTemplate>
<div class="form-group onewCustomer clearfix">
<label>Shipping Terms</label>
<div class="btn-group radioDouble shipTermsRadio" data-toggle="buttons">
</HeaderTemplate>
<ItemTemplate>
<div class="btn btn-primary">
<input id="ShippingTermsSelector" runat="server" type="radio" name="ShippingTermsGroup"/>
<label for="ShippingTermsSelector">
<span class="onewCurrency fontBlack"><asp:Literal ID="CurrencyLabel" runat="server" /></span>
<span class="onewWHName fontBlack"><asp:Literal ID="WarehouseInternalNameLabel" runat="server" /></span>
<span class="onewAccount"><asp:Literal ID="CustomerAccountCodeLabel" runat="server" /></span>
<span class="onewTerms fontBlack"><asp:Literal ID="ShippingTermsLabel" runat="server" /></span>
</label>
<asp:DropDownList ID="ShippingTermsSelectList" runat="server" CssClass="form-control shippingTerms" AppendDataBoundItems="true">
</asp:DropDownList>
</div>
</ItemTemplate>
<FooterTemplate>
</div>
</div>
</FooterTemplate>
</asp:Repeater>
Has anyone encountered this issue before?
Adding stopPropagation(); to the click event has fixed it.
$('select.shippingTerms').click(function (e) {
e.stopPropagation();
})

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

How to remove border of the asp.net radio button

I have a radio button like below, and i am unable to delete the border of that radio button in IE. The same is working in Chrome.
<fieldset id="fsdeSign">
<table width="98%">
<tr>
<td align="right" colspan="2">
<div id="divName" runat="server" visible="false">
<span>
<label class="required" runat="server" id="Label1" style="width: 90px">
<span id="NameSpan" runat="server">*</span>Name</label></span>
<asp:TextBox ID="textName" runat="server" MaxLength="20"></asp:TextBox>
</div>
</td>
<td align="right">
<asp:Label ID="lblaccount" Style="display: none" runat="server" Width="155px"
Text="Would you like to use your account?"></asp:Label>
</td>
<td align="left">
<asp:RadioButtonList ID="rblaccount" runat="server" Style="display: none;border-style:none;" RepeatDirection="Horizontal">
<asp:ListItem Value="Yes" Text="Yes" />
<asp:ListItem Value="No" Text="No" Selected="True" />
</asp:RadioButtonList>
</td>
</tr>
</table>
</fieldset>
I have used the below cssclass="Sign" which is not reflecting.Do i need add any more tags?
fieldset#fseSign input.Sign
{
border-style:none;
}
Try to add BorderStyle="None" within <asp: RadioButtonList>. Your code should look like this:
<asp:RadioButtonList ID="rblaccount" runat="server" Style="display: none" RepeatDirection="Horizontal" BorderStyle="None">
<asp:ListItem Value="Yes" Text="Yes" />
<asp:ListItem Value="No" Text="No" Selected="True" />
</asp:RadioButtonList>
In any case, try to have a look at this similar case here.
In case it does not work, it is also possible that you have to edit its css in the following way:
input[type="radio"] {
border-style:none;
}
Try this fieldset#fsdeSign input
{border-style: none;}

ajax update not working

I am trying to get a combobox to update with the correct value when a button has been clicked.
So when the user chooses a year in the combobox then enters a day in the 'HolidayYearAllocation' input box and clicks the button, the combobox called 'AssignUserHoliday' needs to update with the year selected.
Here is the code where i select the year, and then enter an amount and click the button
<asp:UpdatePanel ID="UpdateBulkHoliday" runat="server" class="BulkHolidayAllocation">
<ContentTemplate>
<div class="BulkHolidayAllocationHeader">
<asp:Label ID="lbl_bulkholidayallocationheader" runat="server" Text="Bulk Holiday Allocation" />
</div>
<div class="SelectYearHolidayAllocation">
<asp:Label ID="lbl_selectyearholidayallocation" runat="server" Text="Select Year" CssClass="applicationfont" />
<asp:DropDownList ID="ddl_selectyearholidayallocation" runat="server" CssClass="smallinputbox" />
</div>
<div class="EnterYearHolidayAllocation">
<asp:Label ID="lbl_enteryearholidayallocation" runat="server" Text="Enter Amount of Days" CssClass="applicationfont" />
<input id="txt_enteryearholidayallocation" runat="server" class="smallinputbox" />
</div>
<div class="SubmitYearHolidayAllocation">
<input id="btn_submityearholidayallocation" runat="server" type="button" class="Button" value="Add" onserverclick="btn_submityearholidayallocation_ServerClick" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
Here is the update panel wrapped around the code i want to update after button click.
<asp:UpdatePanel id="Update" runat="Server">
<ContentTemplate>
<div class="UserSettingsSection2">
<div class="AssignUserHoliday">
<asp:Label ID="lbl_assignuserholiday" runat="server" Text="Assign User Holiday" CssClass="applicationfont" />
<asp:DropDownList ID="ddl_assignuserholiday" runat="server" CssClass="smallinputbox" Enabled="false" AutoPostBack="true" OnDataBound="ddl_assignuserholiday_DataBound" OnSelectedIndexChanged="ddl_assignuserholiday_SelectedIndexChanged" />
</div>
<div class="SetNewUserHoliday">
<asp:Label ID="lbl_setnewuserholiday" runat="server" Text="New Holiday Amount" CssClass="applicationfont" />
<input id="txt_setnewuserholiday" runat="server" class="smallinputbox" />
</div>
<div class="SubmitNewUserHoliday">
<input id="btn_submitnewuserholiday" runat="server" class="Button" type="button" value="Change" visible="false" onserverclick="btn_submitnewuserholiday_ServerClick" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
You will have to add following attribute to both update panel UpdateMode="Conditional" and call Update.Update() in the btn_submityearholidayallocation_ServerClick method once you have assigned the values to the controls in the second panel.

how to put 4 control on a line in asp.net?

I have two labels and two text boxes and I want put those control on a line without position absolute
<div id="divlbluser" >
<asp:Label CssClass="lbl" ID="lblUser" runat="server" Text="نام کاربری:"></asp:Label>
</div>
<div id="divtxtuser" >
<asp:TextBox CssClass="txt" ID="txtUser" runat="server"></asp:TextBox>
</div>
<div id="divlblpass" >
<asp:Label CssClass="lbl" ID="lblPass" runat="server" Text="رمز عبور:"></asp:Label>
</div>
<div id="divtxtpass">
<asp:TextBox runat="server" CssClass="txt" ID="txtPass"></asp:TextBox>
</div>
Don't put them in separate divs.
<div>
<asp:TextBox CssClass="txt" ID="txtUser" runat="server"></asp:TextBox>
<asp:Label CssClass="lbl" ID="lblPass" runat="server" Text="رمز عبور:"></asp:Label>
<asp:TextBox runat="server" CssClass="txt" ID="txtPass"></asp:TextBox>
</div>
See example jsFiddle
Use CSS
<style>
#divtxtuser, #divlblpass, #divtxtpass { float: left; }
</style>