I'm using jquerybubblepopup plugin, as shown in the image:
In the IE (8, 7, 6) I’m unable to show button inside the JQuery Bubble plugin as shown in the above image (red rectangle). Other browsers(like Chrome, Opera, Firefox) render it correctly. Can anyone let me know how to show the button inside the bubble plugin.
<input type="submit" value="Add Comment" />
It's the position: relative (in combination with all the other styling, but that's the root cause) throwing it off in IE, just remove that styling from your button CSS.
Related
I am working on adding custom CSS styling for my checkboxes via Awesome Bootstrap Checkboxes and have them actually showing up in the grids with them initially being checked or unchecked properly via JSON data being read...
the issue is when I go to change the value. The values are updating properly from when shown to when hidden.
However, instead of just the checkmark disappearing in the checkbox, the entire checkbox disappears and the only way for me to get it back is to change the value of the back to ui-grid-cell-focus manually through F12 debugger in the browser.
It appears something is not set up right with them, but I haven't been able to pinpoint exactly what he issue is yet...any help would be appreciated.
Cell Template:
cellTemplate:
`<!-- .blueCheckbox --> <div class="checkbox checkbox-primary"> <input type="checkbox" class="ng-scope" value="true" name="select_item" ng-model="row.entity.Name" /> <label></label> </div> <!-- end .blueCheckbox -->,`
Got them working...Had to enable the checkboxes and move them underneath the overlay and they worked fine...weird because its totally different from how it normally works...
I'm trying to make a link on a webpage to link to another website.
It works in Google chrome but in IE and FF it's not working.
When i hover the link in chrome, it shows in the left bottom cornor the correct link. When i hover it in FF and IE it shows the link of the page that i am currently on.
this is the code i have on my .apsx page
<div id="return">
<button>
<p><a id="ReturnBack" runat="server" href="http://www.stuff.be">Terug naar de site</a></p>
</button>
</div>
i even added some javascript to force it to redirect
$('#return button').click(function () {
alert("oke?");
window.location = 'http://www.stuff.be/Pages/Home.aspx';
});
The alert triggers when u click the link, just to check if it works
And when in IE in the f12 screen i can use window.location = 'http://www.stuff.be/Pages/Home.aspx'; to redirect it. So they both work seperatly but not in combo :s
Is there anybody who can help me?? i just spend 2 days on a silly link :(
This is probably confusing to the browser:
<button>
<p><a id="ReturnBack" runat="server" href="http://www.stuff.be">Terug naar de site</a></p>
</button>
A button which contains a paragraph and a link? I don't think buttons can contain links. (After all, when you click on the link, are you clicking on it or on the button?) This is probably invalid HTML, which means browser behavior is going to be undefined and browser-specific.
Don't use a button, just use a link:
<p><a id="ReturnBack" runat="server" href="http://www.stuff.be">Terug naar de site</a></p>
You can style the link to look like a button if you want. But structurally it can't be inside a button.
Then just change your jQuery selector:
$('#return a')
(Or, conversely, remove the link and keep the button? It's up to you. But it can't be both.)
Side note: This has nothing to do with ASP.NET. What you're using here is HTML and JavaScript.
You can't put a link inside a button.
Remove the button tags and script and it will work like a normal hyperlink in all browsers. You can style it to look like a button if you need that.
Alternatively, remove the <p> and <a> tag from within the button, and keep the click script...
I've got an ASP.NET 4 app being developed and tested against http:// localhost/mysite - I spent a while looking into a problem with Twitter Bootstrap buttons in Firefox (v12.0) where they looked weird.
However I noted that, when testing, if I swapped the URL and changed 'localhost' for my machine's FQDN (e.g. http://mymachine.mydomain.com/mysite) then it worked normally and as expected.
This is kinda good news because it means that there isn't a "bug" as such that I have to fix but I'm curious about why it's happened in the first place.
The weird behaviour is as follows:
The 'button' is marked up as follows (in this case, a <a> to look like a button):
<p><a class="btn btn-success" href="checkout.aspx"><i class="icon-shopping-cart icon-white"></i> Checkout</a></p>
I also have the same behaviour when using a 'real' button, marked up as follows:
<p><input type="submit" name="ctl00$cphMainContent$btnProceedToCustomerDetails" value="Next: Your details" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$cphMainContent$btnProceedToCustomerDetails", "", true, "", "", false, false))" id="cphMainContent_btnProceedToCustomerDetails" class="btn btn-primary" /></p>
In both cases, the buttons render in a grey, unreadable state and then sort of 'fill up' in green colour when you hover over, until it is about 75% filled up and then stops filling up.
Here's some images
The <a class="btn btn-success">
On load (before mouseover)
When you put your mouse over it, it fills up with colour from the bottom up in about 0.5 seconds, finishing up looking like this:
The <input type="submit" class="btn btn-primary">
On load (before mouseover)
After mouseover, again it fills up with colour from bottom up, in about 0.5 seconds, and looks like this:
Like I say, this only happens when using Firefox, and only when looking at localhost. Other browsers are fine. I am using a freshly downloaded copy of bootstrap.js (downloaded today) with no amendments, I only include one other css file, and even when I don't include it, it's the same behaviour.
I ran into this problem earlier today. This link: twitter bootstrap button changes rendering oddly in firefox and chrome helped me.
In my css, I applied the following:
.btn-primary, .btn-danger, .btn-success { background-image: none; filter: none;}
It worked. My pages now render correctly in firefox. Chrome worked fine for me.
After lots of efforts, I was finally able to pin down this issue to a specific CSS-Hack in Twitter Bootstrap.
Removing * (asterisk) from *background-image of btn-primary and other similar classes resolves this issue.
But the problem itself is not in the CSS. It has got to do with the implementation.
For example, I was using AjaxMin to minify and combine CSS and since *property is not a valid CSS, Ajaxmin was ignoring it rendering the final CSS without those properties. Buggy button effects being one such side-effect.
I am working on my new site and I checked it in multiple browsers: ie6+, chrome, safari and firefox.
I noticed that firefox display the top offset of my button in wrong position - like top=-1 and I cant fix it in NORMAL way...
Here's an example
http://jsfiddle.net/7XRZG/
Thank you
button inputs and text inputs seem to have different default vertical align properties in firefox. Try explicitly setting them to the same thing. For instance:
<input type="text" style="height:19px;border:1px solid silver;font-size:10px;vertical-align:text-top;">
<input type="button" value="Search" style="margin-left:5px;background-color:#f5f5f5;color:#707070;border:1px solid #e3e3e3;font-size:9px;padding:0 10px;height:21px;font-weight:700;vertical-align:text-top;">
so I'm building a custom firefox extension and I got to the step where the toolbar is showing up and I put in buttons etc with css
If you look at feedly's button (Feedly is a firefox extension), there is this nice rectangular background behind the button of the extension that makes it look like a legitimate clickable button: http://imageshack.us/photo/my-images/196/feedly.png/
whereas default extension buttons have no background behind it....
how do you style a custom extension button such that it has a button-like background just like the feedly button?
The <toolbarbutton> element has an image attribute that allows you to specify an image:
<toolbarbutton image="chrome://.../icon.png" label="My button"/>
However, usually you want to set the image from CSS using the list-style-image property. For example if your XUL code looks like this:
<toolbarbutton id="myButton" label="My button"/>
You would have the following CSS code:
#myButton
{
list-style-image: url("chrome://.../icon.png");
}
More info: https://developer.mozilla.org/en/XUL_Tutorial/Adding_Labels_and_Images