How can I give spacing between Radio Button and Text using Asp:RadioButton control in ASP.NET?
<asp:RadioButton ID="radio1" runat="server" GroupName="Group1" />
Try:
<asp:RadioButton ID="radio1" CssClass="Space" runat="server" GroupName="Group1" />
and CSS:
.Space label
{
margin-left: 20px;
}
works here...
Use CSS:
input[type="radio"]
{
margin-right: 2px;
}
Or:
input[type="radio"] + label
{
margin-left: 2px;
}
Another method that works is to precede the text property of the radiobutton with the symbol like this Text=" I have pad before me"
where is your text? use a label for the radiobutton or put some margin in CSS around the button.
Related
I want the hyperlink centered in the cell of GridView, this is the code for the grid column:
<asp:TemplateField HeaderText="Ticket#" ItemStyle-HorizontalAlign="Center" SortExpression="ows_ID">
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:Hyperlink ID="hlID" Target="_parent" runat="server" Text='<%# Bind("ows_ID")%>' Font-Underline="false"
NavigateUrl='<%#"Default.aspx?TktNo=" & Server.UrlEncode(Trim(Container.DataItem("ows_ID")))%>'/>
</ItemTemplate>
</asp:TemplateField>
HorizontalAlign="Center" doesn't work, nor does ItemStyle-HorizontalAlign="Center". I have set style as described here and that doesn't work either. FYI, bootstrap is involved also. What am I missing? Some setting in the grid declaration? Please help.
In your CSS file, edit the style for td tag.
td
{
text-align: center;
}
GridView will be converted to table structure when rendered on webpage. So GridView takes styles of table
You can do it with css:
Here is a demo from this post: post
And you have to add a css class to the table cell and wrap your css into the class, otherwise it will align all td's that way!
td {
height: 100%;
}
a {
display: table;
position: relative;
height: 100%;
width: 100%;
background-color: yellow;
}
span {
display: table-cell;
text-align:center;
vertical-align: middle;
background-color: red;
}
This can achieve by two methods
1- try to use
< center >
< ItemTemplate >
' Font-Underline="false" NavigateUrl='<%#"Default.aspx?TktNo=" & Server.UrlEncode(Trim(Container.DataItem("ows_ID")))%>'/>
</ItemTemplate>
< /center >
2- Or you simply goto view souce file of your webpage
try to find rendered html of hyperlink ....and then place your
< asp:Hyperlink >
inside a < span class="class1"> < /span >
< style > .class1 { text-align:center; }
< /style >
The only thing that worked was to place a div around the Hyperlink with alignment in the div.
<div style="text-align:center">
<asp:Hyperlink ID="hlID" Target="_parent" runat="server" Text='<%# Bind("ows_ID")%>' Font-Underline="false"
NavigateUrl='<%#"Default.aspx?TktNo=" & Server.UrlEncode(Trim(Container.DataItem("ows_ID")))%>'/>
</div>
I have a radiobutton and want to show its text as bold.
1) I have tried with
<asp:RadioButton ID="RadioButtonLevel0" runat="server"
GroupName="ItemAccess" value="0" AutoPostBack="true"
oncheckchanged="RadioButton_CheckedChanged"
Text="Only to Me" Font-Bold="true"/>
... But it is still showing the text with normal font-weight.
2) I have tried with
<asp:RadioButton ID="RadioButtonLevel0" runat="server"
GroupName="ItemAccess" value="0" AutoPostBack="true"
oncheckchanged="RadioButton_CheckedChanged"/>
<b>Only To Me</b>
</asp:RadioButton>`
But this is producing an error.
Try out the below code snippet:
<asp:radiobutton ID="rdbText" runat="server" CssClass="bold" Text="Text"></asp:radiobutton>
<style type="text/css">
.bold
{
font-weight:bold !important;
}
Its surly because of CSS..you can also check it..install the firebug or use any developer tool to inspect the element..it will show you which css is overriding it..
I think this can slow your problem..try this.
define a css on your page in which your radio button is than apply this css on your radio button..
<style type="text/css">
.bold
{
font-weight:bold !important;
}
</style>
"!important" will override every thing..
<asp:RadioButton ID="rbtn1" runat ="server" Text ="check1" style="font-weight :bold;" />
I think it is surely because of css of parent control. check with inspect element and know which parent control is cause for this. For example if label is the cause then modify the css class as
.bold > label {
font-weight:bold !important;
}
... This will solve your problem.
use style=>font-weight for making radio button bold:
<asp:RadioButton ID="RadioButton1" runat="server" style="font-weight: 900" Text="test" />
if it doesn't work, it is because of parent CSS. if you have chrome you can use developer tools to see where exactly the Inherited CSS comes from. if you have IE you can use F12 for developer tools. Trace Syle it show you the reason
<asp:RadioButton ID="RadioButton1" GroupName="RadioButton12" runat="server" Text="test1" /><br />
<asp:RadioButton ID="RadioButton2" GroupName="RadioButton12" runat="server" Text="test2" />
<style>
input[type="radio"] + label {
font-weight: normal !important;
color: gray;
opacity: 0.5;
cursor: pointer;
}
input[type="radio"]:checked + label {
color: initial;
opacity: 1;
cursor: pointer;
}
</style>
input[type="radio"] + label {
font-weight: normal !important;
color: gray;
opacity: 0.5;
cursor: pointer;
}
input[type="radio"]:checked + label {
color: initial;
opacity: 1;
cursor: pointer;
}
<asp:RadioButton ID="RadioButton1" GroupName="mygroup" runat="server" Text="test1" /><br />
<asp:RadioButton ID="RadioButton2" GroupName="mygroup" runat="server" Text="test2" />
<span><input id="MainContent_RadioButton1" type="radio" name="ctl00$MainContent$RadioButton12" value="RadioButton1" checked="checked"><label for="MainContent_RadioButton1">Test1</label></span><br>
<span><input id="MainContent_RadioButton2" type="radio" name="ctl00$MainContent$RadioButton12" value="RadioButton2"><label for="MainContent_RadioButton2">Test2</label></span>
I have an image button inside the div. I am increasing the image size and z-index on the hover on div. but I want to add some text over the image button when the hover is calling. how can I do ?
my css:
.HoverImageClass input[type=image]:hover
{
position: relative;
z-index: 10000;
height: 274px;
width: 226px;
margin-top: -67px;
margin-left: -14px;
padding-bottom: 13px;
background-color: #F7F6EB;
}
my html:
<div id="divImageDisplay" class="HoverImageClass" runat="server">
<asp:ImageButton runat="server" CssClass="course_img" ID="imgbtnCourse" AlternateText='<%#Eval("LevelName") %>' ToolTip='<%#Eval("LevelName") %>' ImageUrl='<%#Eval("CourseImagePath") %>' CausesValidation="False" CommandName="AddToCart" CommandArgument='<%# String.Format("{0},{1},{2},{3},{4},{5}",Eval("ID"),Eval("LevelID"),Eval("CurrencyWithValue"),Eval("CourseImagePath"),Eval("CategoryID"),Eval("MRP")) %>'></asp:ImageButton>
</div>
Well, if you do the text on the button via normal HTML, one possible method would to on the main CSS class make the " color:"" " the same as that of the background, and then on the :hover class, you could change it to a different color that would be readable/eligible. Or possibly you could even set the font size to something really tiny on the original, then bump it up a size on the :hover!
Hope it helps!
I have a login FORM inside a Hidden DIV, this DIV is hidden using CSS display:none; when I click on some other DIV, I show this DIV using jquery .slideDown(), so I can be able to use this form.
When I click on the button, the OnClick="Login" doesn't seem to work,and when I removed this form from this hidden div to simply another place in the body, it worked. What's the problem?
ASP.NET:
<div id="userCPContainer">
<form id="loginForm" runat="server">
<asp:Label ID="Label1" runat="server" Text="Username" class="loginLabels"></asp:Label>
<br />
<asp:TextBox ID="usernameField" runat="server" MaxLength="50" class="loginFields"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Text="Password" class="loginLabels"></asp:Label>
<br />
<asp:TextBox ID="passwordField" runat="server" MaxLength="50"
TextMode="Password" class="loginFields"></asp:TextBox>
<asp:Button ID="loginButton" runat="server" Text="Log in" onclick="Loginn" class="loginButton"/>
</form>
</div>
JQUERY:
function showUserCP() {
$("#userCPContainer").slideDown(200);
$(".userCPDiv").css("background-color", "#000000");
$(".userCPDiv").css("border-color", "#000000");
}
function hideUserCP() {
$(".userCPDiv").css("background-color", "rgb(43, 147, 206)");
$(".userCPDiv").css("border-color", "rgb(43, 147, 206)");
$("#userCPContainer").slideUp(200);
}
$(".userCPDiv").click(function (e) {
//Either way, hide Main Menu
hideMainMenu();
if ($("#userCPContainer").is(":visible")) {
hideUserCP();
}
else {
showUserCP();
}
e.stopPropagation();
});
CSS:
#userCPContainer
{
overflow:hidden;
border-style:solid;
border-top-style:none;
border-color:rgb(43,147,206);
border-width:2px;
position:absolute;
right:0px;
top:0px;
display:none;
z-index:1;
width:300px;
background-color: #000000;
}
Nothing really complicated...
When you use CSS display: none; the problem is that all that's inside that DIV gets removed completely from the HTML Document and that causes that ASP.NET does not recognize this element when you show it via jQuery. I see to possible solutions:
Use visibility: hidden instead of display: none;, if you do this you will probably have some problems with the DIV height because it will take the space needed to render but it will not be visible.
Use a ScriptManager and an UpdatePanel and put the div and the form inside those elements, so the server will know when you render the Button in the client. Also, make sure that you register your jQuery scripts inside the ScriptManager
Hope this helps you
I have the following CSS that I can apply to an HTML input tag.
#headerSearch
{
width: 265px;
}
#headerSearch .text
{
width: 215px;
}
#headerSearch #searchButton
{
background: url(../images/searchButton.png) no-repeat 0 0;
width: 36px;
border: 1px solid #ccc;
margin: 0;
}
#headerSearch #searchButton:hover
{
background: url(../images/searchButton.png) no-repeat 0 -28px;
}
And the HTML to which I apply it...
<div id="headerSearch" class="float">
<input id="txtSearch" class="text left" type="text" />
<input id="searchButton" class="submit right" type="submit" value="" />
</div>
It works wonderfully.
However, I want to use an ImageButton control instead of the input tag because I want the page submit behavior of the ImageButton (which occurs when you click on it and click event is raised, etc.), but I am not sure how to go about mixing CSS with the ImageButton. I tried something simple like
<asp:ImageButton ID="ibtnSrch" runat="server" CssClass="searchBtn" onclick="ibtnSrch_Click" AlternateText="Search" />
but what occurs is the image displays with a red X in a white box (the default image is missing icon) over top of it.
So, more succinctly, how do I mix elegant CSS with the .NET ImageButton?
based on the sample code you have set the <asp:ImageButton /> CssClass to "searchBtn" but there is no CSS for .searchBtn
perhaps add this to your css
.searchBtn {
background: url(../images/searchButton.png) no-repeat 0 0;
border: 1px solid #ccc;
margin: 0;
}
.searchBtn:hover {
background: url(../images/searchButton.png) no-repeat 0 -28px;
}
an <asp:ImageButton /> renders down to <input type="image" name="ibtnSrch" id="ibtnSrch" class="searchBtn" src="" alt="Search" style="border-width:0px;" />
since the control is an image input with no image source that is why you get a red x
If you change your searchButton style to be a class, then you can just use an <asp:Button>
<asp:Button ID="ibtnSrch" runat="server"
CssClass="submit right searchButton" OnClick="ibtnSrch_Click" />
You can then put that button in a separate ValidationGroup or set CausesValidation="false".
If you want to keep it all client-side and do the redirect to the search page in JavaScript but also want to take advantage of the ASP.NET validation you've set up on your controls, you can use the client-side ASP.NET validation.
In short I would not use the asp image button.
I would use your current html controls and then add some javascript to click a hidden asp:Button control when your submit input is clicked.
<div id="headerSearch" class="float">
<input id="txtSearch" class="text left" type="text" />
<input id="searchButton" class="submit right" type="submit" value="" onclick="<% hiddenSearch.ClientID %>.click();" />
<asp:Button ID="hiddenSearch" runat="server" style="display:none;" />
</div>
I don't quite recall if that is the correct syntax to get the client id...