I am having a problem in ASP.NET to style buttons like the Facebook Buttons, found here:
http://nicolasgallagher.com/lab/css3-facebook-buttons/
I tried using asp:Button with CssClass set, which works most of the time, except for the buttons that contain images, for example:
class="uibutton icon add"
If i use:
Button
then things look fine, however I can't connect to the C# code without using JavaScript to do the work.
I'm hoping there is something simple I am missing (I have tried using 'background' and 'background image' in CSS with no luck.
As there's only one element it should work. Could you post a JSFiddle?
Bootstrap suffers the same problem, and the only way (sort of) around it is by using a LinkButton as described here.
Looking at the link provided, it seems you can't use the icons with an <input> tag, only with <button> or <a> tags. Fortunately, <asp:LinkButton> will act the same as an <asp:Button> on the server, but render as an <a> tag on the client.
So try using <asp:LinkButton CssClass="uibutton icon add" ... > and it should work fine.
Related
I'm working on a little project with ASP and C#.
In my project I'm using a masterpage for the navigationbar on the top of my pages, looking like that:
The navigationbar contains some normal navigation-points and one to log out with float: right;
On all of my diffenrent pages this works excepted for one.
The only difference is, that on this special page I have some textbox-elements like this:
<asp:TextBox ID="tbTOP1sum" runat="server"></asp:TextBox>
As soon as I only enter one of this textboxes my navigationbar looks like that:
It doesn't matter what sort of element im adding, everything is okay, excepted with this textboxes.
I noticed that this only happens in Google-chrome, not with Firefox and not with Internet-Explorer or Edge. Another thing i found out is, that disabling and enabling the CSS-rule in Chrome-Page-Inspector fixes the problem.
I have no idea what to do...
Thanks in advance for your help!
I have the same issue sometimes. When you change it in the inspector go into your code and make the same change and save/build, go to the web browser and do a hard refresh with "ctrl+F5". If it still does not work, wrap your logout a link in a div and then call it in CSS. Set the position to relative, and then put the top: -55px;
It finally turned out, that adding display: inline; to the of the navigationbars <ul> is all to do.
Another way is to do it with table columns. One for the normal content and one for the logout.
Thanks for the other answers!
I use VS 2010 . I add button to webfrom that created, but I can't change his position.
I read in previous questions that I need to change the layout to absolute , but it didn't work. when I drag the button to the center it's back automatically to left-center..
you can see that in the picture:
how can I fix that?
Thank you!!
solution:
Tools -> Options, and set HTML Designer -> CSS Styling to "Change positioning to absolute.."
Changing the position to absolute seems more like a workaround which would introduce further problems after "solving" this one. Unless you really know what you're doing for styling, don't do that.
Centering an element on a webpage is really a matter for the CSS styling. Take a look at the markup (HTML) view and find where that button is. You can add a class to that button for the CSS styling:
<asp:Button runat="server" ID="Button1" CssClass="centeredButton" ...
Then in your site's CSS file (Site.css might be the standard in the ASP.NET template? I don't remember) you can apply the styling you're looking for. There's a lot you can do at that point. Not knowing how the rest of the page is laid out, I can only offer very random suggestions. Something like this for example:
.centeredButton {
display: block;
margin: auto;
}
That's one way to center that particular element. There are definitely more, depending on how the rest of the markup/layout is structured.
First of all i recommend not to use this drag options. Because what happens behind this whenever you drag a button or anything, will make you more confused. You can do it using div or table.
I'm going crazy with this. I got the twitter-bootstrap menu running in my c# code and it looks and works great. However, the menu is overwriting my text of the site I've built. It seems no matter what I do the body of the site appears under the menu.... I'm thinking it's a CSS issue because if I resize the page to mobile size the body is then placed under the menu.
I'm not even sure what code I should cut and paste...?
I've tried various or row, ... etc...
How do I get my body text to show below the menu vs. underneath it?
Thanks
I had this problem too, I had to do a padding in my _layout.cshtml. This solved it for me.
<body style="padding-top: 40px;">
I am unable to write a nice title to this topic because my problem is a little weird. I am using AjaxControlToolkit HTMLEditorExtender in my website to send HTML formatted emails. Every other feature like bold, italic, underline etc. are working fine but when I add a link it shows the HTML code of it as follows:
As you can see BOLD is working but the anchor tag is appearing in HTML code format.
Code for extender and the textbox:
<asp:TextBox ID="TextBox2" runat="server" Height="376px"
TextMode="MultiLine" Width="795px"></asp:TextBox>
<asp2:HtmlEditorExtender ID="TextBox2_HtmlEditorExtender"
runat="server" Enabled="True" TargetControlID="TextBox2">
</asp2:HtmlEditorExtender>
Can any one please tell me why this is happening? Is this some bug with the extender?
Considering I do not have enough reputation for commenting on the post, I will ask a followup question here. Is there any way we could see the text you are getting on your C# backend? This is a possible source for the issue if the string has some weird formatting.
Plus email clients are not meant to be browsers and there is a possibility that the email client will not render the html correctly.
Is that image a screen shot of the editor itself? I created my own test project using your same code.
Also, how did you create the link? I typed some text highlighted the text and clicked on the 'create link' icon and from there I typed in the URL. It created the link as expected.
The only difference is that I didn't bother implementing a sanitizer, which it appears you did. I would try disabling the sanitizer (just for testing purposes) and see if that's where your problem lies.
Try this it should solve your issue-
txtEmialMsg.Text=Server.HtmlDecode(ActualStringFromExtender.ToString());
Or if you are getting (A href) text then you need to use following when sending emails
Server.UrlDecode(link)
I am writing a simple personal app that has a browser control and I want it to automatically "Refresh" gmail to check it more often than it does by default. There are monkey scripts that do this but I'm trying to add my personal style to it.
Anyhow, I've looked around and found everything but what I can do in csharp using the browser control.
I found this:
// Link the ID from the web form to the Button var
theButton = webBrowser_Gmail.Document.GetElementById("Refresh");
// Now do the actual click.
theButton.InvokeMember("click");
But it comes back with null in 'theButton' so it doesn't invoke anything.
Anyone have any suggestions?
It's been awhile since I've used JavaScript, but given the other answers and comments that there is no real ID associated with the element, could you do something like the following:
Search all Div's with an attribute of Role == 'Button' and an InnerHtml == 'Refresh'.
Once the correct InnerHtml is found, get the Element.
Invoke the click on the found Element.
Again, this may be blowing smoke, but thought I'd throw it out there.
edit: Just realized you are doing this with C# and a browser control; however, the concept would still be the same.
The best suggestion I could give you at this point involves an existing API that is used for .NET web browser based automation:
http://watin.org/
Since the div tag with the desired button really only seems to identify itself with the class name, you could use the Find.BySelector(“”) code included with the most recent version of watin.