When using blueprintjs to display a menu using Popover I get some very, very strange results that only occur in Safari. (See the images.) The nice image shows what the menu looks like in Chrome or Firefox. The ugly image shows what it always looks like in Safari, on any Mac or on an iPad. I'm using bp4 and it happens with both Popover and Popover2.
Poking around in the element inspector in Safari doesn't reveal anything very illuminating. But in many cases if I change a style attribute (which one doesn't matter) the problem goes away.
Here's a tiny bit of the jsx code. I know this won't tell you much but I can provide more if that would be helpful. Mostly, I'm hoping for any insight at all about what might be going on.
<Popover2 minimal={true}
content={the_menu}
transitionDuration={150}
position={this.props.position}>
<AltButton/>
</Popover2>
Okay, I figured out the culprit. I had a style set that ended up attaching
svg {
width: 90%;
height:90%
}
To the icons that were displayed in the menu items. This caused all of the icons to be displayed at giant size - but only in Safari. The strange image is the result of many icons being displayed extra large.
Related
I'm trying to create an application that would be as standard as possible in terms of style.
An image is worth a thousand words: I can't figure out how to make my buttons the same size as in Apple's programs such as Safari or Finder.
As you can see, the sizing I've set in interface builder don't seem to match the size the buttons get when I run the app, but maybe that part doesn't speak in pixels but in points or something? Also, textured rounded button has only width editable, but not height.
In this case, these are NSButtons, but I guess I'll have a similar problem with other control types...
I found it out! The problem was with neither of these two parts outlined in the screenshot, but in the "Toolbar" item, higher in the hierarchy.
There is a Size attribute in the Attributes inspector which defaults to Small, but you can set it to Regular instead, and then the buttons get the same sizing as in Finder and all.
Is there a method to quickly scroll through fonts to see what looks good when working with a UITextView in Storyboard?
Like in Photoshop I can just press the down arrow to quickly cycle through fonts and see one I like. In Xcode it is a whole series of clicks to change the font and I just want to make sure I'm not missing something.
Thanks
I'm working on some updates to my first Mac app and I'm trying to get my window's toolbar buttons to look like the toolbar buttons on EVERY standard Mac app. However, for the life of me, I can't find a button type or a barbutton type that gets me what I'm looking for. Am I missing something?
Here is an image showing several Mac apps (Preview, Finder, and Safari) with toolbars at the top which have very-slighty rounded corner buttons which also have a slight gradient on them, etc.
However, in my .xib I've got a toolbar and I've dropped every kind of button I can find on the thing and nothing looks like the standard Mac button.
The first button looks pretty close, but it's clearly not the same color. Am I missing something?
#Matt Ball is right - you can use NSSegmentedControls, even for single one-time click buttons. Just set the number of segments to 1, and set the mode to "Select None".
One of my shipping apps uses this technique, see below:
All of the controls there are NSSegmentedControl, including the single one.
Update: there are a few standard button icons which are meant for toolbars. The NSImage Class Reference has a list.
In the above screenshot, only two of the buttons are using built-in images: NSLeftFacingTriangleTemplate, and NSRightFacingTriangleTemplate. The others I drew myself.
I've been searching all over for a resolution to this issue, but for the life of me I can't find anything.
Essentially, on every hyperlink on a page that self references (some are collapsible panel extenders, others use JS to open a popup, etc.) the font changes for the hyperlink after it is clicked. This is only occurring in IE8.
Example:
(Apparently I can't post images, so here's some links to the images. You may want to download and open them side-by-side as the difference is not extremely clear when looking at them individually.)
Pre-Click Hyperlink Image
Post-Click Hyperlink Image
The font does not return to normal once the element loses the focus, nor does the font become distorted if you give focus to the element via keyboard navigation so I don't think that it is related to selecting the hyperlink.
Further, hyperlinks with an href that doesn't self-reference do not change fonts when clicked.
I also don't think that it is the a:visited CSS as refreshing the page causes the font to go back to normal.
Has anyone ever experienced this? I can't seem to find anything that is related to this issue. Any help is appreciated.
I am using TextArea tags in my web project, that shall never show scrollbars.
This can easily be accomplished using
TEXTAREA { overflow: hidden }
All browsers that I need (IE, FF, Chrome) hide the scrollbars, as intended.
However Internet Explorer and Chrome will scroll to the current cursor position anyway, while Firefox does not scroll anymore at all. You can move the cursor into the invisible area and type, but you will not see, what you are doing.
Can this be solved?
Regards,
Steffen
EDIT: Because I have not found the source of the problem and I would really like to solve this, I leave this question open. However I found a really bad workaround: We now use overflow: scroll on that TEXTAREA, put it into a DIV, measure the width and height of the horizonal and vertical scrollbars, increase the size of the TEXTAREA by that values and set overflow:hidden to the DIV effectivly clipping away the scrollbars. They get invisible to the user but Firefox still scrolls. Not nice but working.
As far as I can tell, Firefox is behaving as I'd expect given the semantics behind overflow:hidden.
That said, and having read your comments above, you can quite easily mimick the behaviour you want with a small bit of jQuery.
Here's the code I've written:
$('textarea').bind("focus keyup", function(){
var $current = $(this);
$current.scrollTop(
$current[0].scrollHeight - $current.height()
);
});
This will basically scroll the textarea to the bottom when you focus on it and as you type. It may need tweaking to account for edits being done further up in the content.
Here's a Working Demo