I want a hyperlink that looks like a standard button. I have tried using a LinkButton but can't get it to look like a button. It always seems to stay looking like a hyperlink. I don't want to set an image to do this.
Any ideas?
Use css for this... like
<asp:LinkButton ID="LnkButtion" CssClass="buttonClass" runat="server" Text="Button" />
Here you can specify your own colors
.buttonClass
{
padding: 2px 20px;
text-decoration: none;
border: solid 1px Green;
background-color: #ababab;
}
.buttonClass:hover
{
border: solid 1px Black;
background-color: #ffffff;
}
you can do it through css.
<asp:LinkButton ID="linkButton" CSSClass="btn" runat="server"></asp:LinkButton>
also define the following class in your css.
.btn{ text-decoration:none; border:1px solid #000; }
<asp:Button OnClick="submit" Text="Submit" runat="server" />
This worked for me:
<a href="mypage.aspx?param1=1" style="text-decoration:none;">
<asp:Button PostBackUrl="mypage.aspx?param1=1" Text="my button-like link" runat="server" />
</a>
style="text-decoration:none;" is used to remove underling:
Removing underline with href attribute
Related
I have original.css file that i can't remove or change from the page.
original.css
table {
border-collapse: collapse;
border-spacing: 0;
}
The radio buttons are showing a border and only way it seems to go away its when using chromedev tool I remove border-collapse:collapse from the original.css. I been trying to do overwrite it using the code below but nothing works. Any suggestion on how to remove border?
<style>
input[type="radio"] {
margin-left: 10px;
margin-right: 1px;
border: none;
border-spacing: 0;
CellSpacing:-1;
}
</style>
<div class="contact-input-item" style="padding-left: 8.9cm; ">
<label><b>By:</b>
<asp:RadioButtonList ID="send_by" runat="server" RepeatDirection="Horizontal" CssClass="rbl" BorderStyle="None" Style="display: none">
<asp:ListItem Text="Email" Value="Email" /> <asp:ListItem Text="fax" Value="fax" />
</asp:RadioButtonList></label>
More specific CSS will override less specific css. So if you can use the class name as well as the type of item inside of your style tags that might be able to push out that "Table" specification.
<style> .contact-input-item input {...etc...} </style>
Then as a last resort you can use !important:
<style>
.contact-input-item input {
border-collapse:separate !important;
}
</style>
I have two options for the user on my page, one is a button that performs an edit function and the other is a hyperlink that navigates to another page. Both are styled to look the same but because the delete option is a hyperlink control it only works when you click on the text and not the surrounding box like the button does.
The .aspx file is as follows:
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit"/>
<div class ="deletebutton">
<asp:HyperLink ID="HyperLinkDeleteRecord" runat="server" NavigateUrl='<%#"DeleteArticle.aspx?passarticleid=" + Eval("ArticleID") %>'>Delete</asp:HyperLink>
</div>
And the CSS is:
.deletebutton, input[type="submit"]
{
align-items: flex-start;
text-align: center;
cursor: default;
color:#BD193A;
padding: 2px 6px 3px;
border: 2px outset buttonface;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: buttonface;
box-sizing: border-box;
-webkit-appearance: push-button;
-webkit-user-select: none;
white-space: pre;
width: 200px;
font: 11px/1.75em Verdana, Tahoma, arial, sans-serif;
float: left;
margin:5px;
}
Simply remove DIV from hyperlink and set deletebutton class to hyperlink
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit" />
<asp:HyperLink ID="HyperLinkDeleteRecord" CssClass="deletebutton" runat="server" NavigateUrl='<%#"DeleteArticle.aspx?passarticleid=" + Eval("ArticleID") %>'>Delete</asp:HyperLink>
In that case I think you can use the hyperlink outside the DIV element, like:
<asp:HyperLink ID="HyperLinkDeleteRecord" runat="server" NavigateUrl='<%#"DeleteArticle.aspx?passarticleid=" + Eval("ArticleID") %>'>
<div class="deletebutton">
Delete
</div>
</asp:HyperLink>
Depending on your CSS you can have changes to do...
or like the edited version that I've mentioned in comments:
<asp:HyperLink ID="HyperLinkDeleteRecord" CssClass="deletebutton" runat="server" NavigateUrl='<%#"DeleteArticle.aspx?passarticleid=" + Eval("ArticleID") %>'>
Delete
</asp:HyperLink>
i am trying to style my second column "mentor name" as i used css it give style to whole Grid i also tried "control styl css class = (some other css file)" and "item styl horizontal align=right" and also change property align = right by using # in css file but template field do not allow "id" to implement css my .aspx page and css ar below,
.mGrid {
width: 100%;
background-color: #fff;
margin: 0px 0 0px 0;
border: 0px #525252;
}
.mGrid table
{
border:0px;
}
.mGrid td {
padding: 2px;
border-width: 0px ;
background-color:#3A3F3E;
color: #fff;
text-align:left;
}
td#Mname {
text-align:left;
}
.mGrid th {
padding: 4px 2px;
color: #fff;
background-color:#3A3F3E;
border-width: 0px ;
font-size: 0.9em;
text-align:center;
}
<asp:GridView Width="300px" ID="GridView1" runat="server" AutoGenerateColumns="False"
Font-Size="10pt" OnRowCreated="GridView1_RowCreated" CssClass="mGrid">
<Columns>
<asp:BoundField DataField="mentor_id" HeaderText="Image" />
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image2" runat="server" ImageUrl="~/images/small_image.png" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Mentor Name">
<ItemTemplate>
<asp:Label ID="Label1" Text='<%#Eval("mentor_FirstName")+ "</br> " + "<b>Experience: </b>"+Eval("mentor_experience") %> ' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
hopes for your suggestions thanks in advance
use td+td it will be applied to the Second td of the grid.
.mGrid td+td {
text-align:left !important;
}
.mGrid td+td+td {
text-align:left !important;
}
Here is a good post on this.
Styling the last td in a table with css
This is driving me mental!!!
Ok, I have the following scenario - ModalPopupExtender used to display an UpdateProgress panel when AJAX is running. So I have the following:
<asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress" >
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="2" runat="server" ClientIDMode="Static">
<ProgressTemplate>
<div style="position: relative; top: 40%; text-align: center;">
<asp:Image ID="Image1" runat="server" Style="border: 0px; vertical-align: middle;
padding-bottom: 4px;" ImageUrl="~/Images/Refresh.gif" />
<asp:Label ID="Label2" runat="server" Style="border: 0px; vertical-align: middle;
margin-left: 7px" Text="Refreshing data, please wait..."></asp:Label>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress"
BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress">
</ajaxToolkit:ModalPopupExtender>
Javascript to fire the thing when AJAX kicks ins:
<script type="text/javascript" language="javascript">
var ModalProgress = '<%= ModalProgress.ClientID %>';
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
function beginReq(sender, args) {
// shows the Popup
$find(ModalProgress).show();
}
function endReq(sender, args) {
// Hides the Popup
$find(ModalProgress).hide();
}
</script>
With the styling of :
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=50);
opacity: 0.50;
}
.updateProgress
{
float: right;
border-width: 1px;
border-style: solid;
background-color: #FAFAD2;
width: 250px;
height: 100px;
}
</style>
However, I cannot for the life of me get the updateProgress to float right or adjust position (just as an example).
Using the developer tools, I can see that some sort of inline style overides the CSS style.
How on earth can I get, for example, my updateprogress to float right?
If you're fighting against inline styles that you have no control over, this is one of those rare cases where the use of !important is actually justified:
Give this a try:
.updateProgress
{
float: right !important;
/* etc. */
}
If this doesn't work, try adding a clear:right, or using a more specific selector like:
#someElement .updateProgress {}
EDIT: Specificity in CSS selectors won't help against inline styles, so ignore that as a possible solution.
well I've ditch the style sheet and run with this:
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="2" runat="server" ClientIDMode="Static">
<ProgressTemplate>
<div style="float: right; border-width: 1px; border-style: solid; background-color: #FAFAD2;
width: 250px; height: 100px;">
<div style="position: relative; top: 40%; text-align: center;">
<asp:Image ID="Image1" runat="server" Style="border: 0px; vertical-align: middle;
padding-bottom: 4px;" ImageUrl="~/Images/Refresh.gif" />
<asp:Label ID="Label2" runat="server" Style="border: 0px; vertical-align: middle;
margin-left: 7px" Text="Refreshing data, please wait..."></asp:Label>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
It does the business so I'm happy for now :D
I have the following html which is display correctly in IE8. Below is the html and the css for grey_btn_75. Any idea why this would be happening?
<div style="float: left; width: 70px; margin-right: 25px; padding-top: 60px;
margin-left: 25px">
<asp:Button ID="btnAddAll" runat="server" Text="Add All"
OnClick="btnAddAll_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnAdd" runat="server" Text="Add"
OnClick="btnAdd_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnRemove" runat="server" Text="Remove"
OnClick="btnRemove_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnRemoveAll" runat="server" Text="Remove All"
CssClass="grey_btn_75"
OnClick="btnRemoveAll_Click" /><br />
</div>
CSS:
.grey_btn_75
{
background: url(../images/grey-75px.png);
background-repeat: no-repeat;
border-style: none;
font-family: Arial,Helvetica,Sans-Serif;
font-size: 12px;
font-weight: bold;
width: 75px;
height: 23px;
color: #000000;
cursor: pointer;
}
Things I have tried so far:
I removed the CssClass and the buttons still did not show up.
I modifed the CssClass and the buttons still did not show up.
I put other controls such as an asp:Label and and asp:ImageButton and they showed up fine.
I tried putting a new button and it did not show up.
Your div width is 70px, your button is 75px. You need to clean that up.
The problem is with the styles. Try commenting them out to see which one (or the combination) is responsible for the buttons to disappear.
Don't forget about the inline style of the top DIV as well.
This is a nice guide for button styles:
http://particletree.com/features/rediscovering-the-button-element/
People recommend
width:auto;
overflow:visible;
specifically for IE
I think it is the color value you have set in your CSS. I got the same problem previously and what I did was change the color value to something else.