Setting usesSingleLineMode to true for a non-system font causes the top of the text to be clipped.
I've created 3 very simple test cases that illustrate this:
good : non-system font, with usesSingleLineMode = false. Works fine.
bad : non-system font with usesSingleLineMode = true. Does not work.
system : system font with usesSingleLineMode = true. Works fine.
Add the following to the viewDidLoad() method of a new Cocoa OSX application:
// Do any additional setup after loading the view.
let good = NSTextField(frame: NSRect(x: 0, y: 0, width: 800, height: 55))
good.usesSingleLineMode = false
good.font = NSFont(name: "HelveticaNeue-UltraLight", size: 24)
good.stringValue = "Good usesSingleLineMode false "
self.view.addSubview(good)
let bad = NSTextField(frame: NSRect(x: 0, y: 100, width: 800, height: 55))
bad.usesSingleLineMode = true
bad.font = NSFont(name: "HelveticaNeue-UltraLight", size: 24)
bad.stringValue = "Bad usesSingleLineMode true"
self.view.addSubview(bad)
let system = NSTextField(frame: NSRect(x: 0, y: 200, width: 800, height: 55))
system.usesSingleLineMode = true
system.font = NSFont.systemFontOfSize(24)
system.stringValue = "Good usesSingleLineMode true, System Font"
self.view.addSubview(system)
If I create the same bad NSTextField using Interface Builder in a storyboard, set the font in IB and check Uses Single Line Mode in IB it works fine! But, it would be impractical to build the overall view in IB, thus I want to programmatically create it.
Why is this happening? Have I missed some important setting (I've tried adjusting many NSTextField and NSTextFieldCell parameters to no avail? Is there a workaround?
According to Apple themselves, this is correct and even desired behavior:
Engineering has determined that this issue behaves as intended based
on the following information:
This behaves correctly according to the documentation for NSCell:
Cells in the single line mode use the fixed baseline layout. The text
baseline position is determined solely by the control size regardless
of content font style or size.
Source: http://www.openradar.me/13813516
What the documentation says is really correct but the important detail here is what the documentation does not say. It does say that the "text baseline position is determined solely by the control size" but it does not explain in detail how this is done. And it is a known fact, that the baseline always seems to fit correctly to the system font, yet it hardly ever fits to any other font on your system. The problem is that Apple speaks of "the fixed baseline layout", as if that would be something known and well documented, but it isn't. I haven't found any document, not even among the legacy ones, that would explain the fixed baseline layout.
I solved it the problem by setting usesSingleLineMode to false.
Related
I have a 100 page PDF document that my app opens up. In my document there are various textfield that I have added to allow the user to add comments. I have tried various ways to save the text in the textboxes to allow the user to return tp editing/marking up the document, but I am without luck. How can I save the text in the PDFAnotoation TextBox as an annotated string to allow the user to pickup where they left off when editing?
Here is my original:
var textFieldMultiline21 = PDFAnnotation()
let textFieldMultilineBounds21 = CGRect(x: 27, y: 58+2, width: 339, height: 508)
textFieldMultiline21 = PDFAnnotation(bounds: textFieldMultilineBounds21, forType: PDFAnnotationSubtype(rawValue: PDFAnnotationSubtype.widget.rawValue), withProperties: nil)
textFieldMultiline21.widgetFieldType = PDFAnnotationWidgetSubtype(rawValue: PDFAnnotationWidgetSubtype.text.rawValue)
textFieldMultiline21.backgroundColor = UIColor.clear
textFieldMultiline21.font = UIFont.systemFont(ofSize: 18)
textFieldMultiline21.isMultiline = true
page.addAnnotation(textFieldMultiline21)
Here I say attempt in saving the text inside the text boxes:
document.page(at: 21)?.annotations[0].contents = "Sample text"
textFieldMultiline21.caption = "sampletext"
Somewhat of a simple answer that was hiding in plain sight
Reading Text
pdfAnnotationTextField.value(forAnnotationKey: .widgetValue)
returns a string value with attributes
Setting Text
pdfAnnotationTextField.setValue("Enter Text", forAnnotationKey: .widgetValue)
I want to build a chart in my Google spreadsheet. The chart responds to all options except the chartArea. I want my labels to show on the left side of the V-Axis. Now these are hidden behind the chartArea. (photo)
This chart has the labels hidden behind the chartArea
var chartBuilder = SS.newChart();
chartBuilder.addRange(range)
.setPosition(10, 2, 0, 0)
.setChartType(Charts.ChartType.BAR)
.setOption('height', BVhoogte)
.setOption('width', 720)
.setOption('isStacked', true)
.setOption('legend', { position: "bottom" })
.setOption( 'hAxis', {textStyle:{color:"white"}, gridlines:{color:"white"}})
.setOption('height', 150)
.setOption('width',720)
.setOption('colors', ["#6d6f75","#000000", "#dcdee2"])
.asBarChart().setOption('chartArea',{ left:200, width: 500}) ;
SS.insertChart(chartBuilder.build());
I've tried
.asBarChart().setOption('chartArea.left', 100)
but this doesn't work either.
How about the following modification?
From :
.asBarChart().setOption('chartArea.left', 100)
To :
.asBarChart().setOption('chartArea', {left:'20%', top:'10%', width:"60%", height:"60%"})
About each parameter, please adjust for your design. If this was not useful for you, I'm sorry.
Wow, I've really fallen down the rabbit hole. I'm trying to have text on the background of part of a UI and a text field as another part, e.g. the birthday in:
I then want to repurpose that text filed to allow text entry. So I do something like:
myTextFieldName.editable = true
myTextFieldName.backgroundColor = NSColor.textBackgroundColor()
and I get something like:
Which is all well and good, but then I note the nice thin border around the text field below it. So I think, I need a border! I add one with:
myTextFieldName.bordered = true
...and I get:
Pow! What a hideous strange thick border! It doesn't look like the default text field border at all! For the life of me, I can't figure out how to make the border of my "activated" text field match that of the default. Any ideas?
Many thanks in advance!
Need to set border and border color:
myTextFieldName.wantsLayer = true
myTextFieldName.layer?.borderColor = NSColor(red:204.0/255.0, green:204.0/255.0, blue:204.0/255.0, alpha:1.0).cgColor
myTextFieldName.layer?.borderWidth = 1.0
myTextFieldName.layer?.cornerRadius = 0.0
Set corner radius if you want rounded corner.
You can add borders to NSTextfield and customise it according how you want it.
let border = CALayer()
border.borderColor = NSColor.gray.cgColor
border.autoresizingMask = [.layerHeightSizable, .layerWidthSizable]
border.borderWidth = 1.0
myTextFieldName.wantsLayer = true
myTextFieldName.layer?.addSublayer(border)
myTextFieldName.layer?.masksToBounds = true
I'm having trouble setting the number of rows for a table to automagically fill the available estate of its encapsulating container.
According to the API, setting the visibleRowCountMode property to sap.ui.table.VisibleRowCountMode.Auto should render the table to
"[...] automatically fills the height of the surrounding container.
The visibleRowCount property is automatically changed accordingly. All
rows need the same height, otherwise the auto mode doesn't always work
as expected."
I have used the following code:
var oTable = new sap.ui.table.Table( {
rowHeight : 30,
height : "100%",
// The below property is seemingly ignored... What did I do wrong?
visibleRowCountMode : sap.ui.table.VisibleRowCountMode.Auto
});
...but as you can see in this jsbin example http://jsbin.com/vazuz/1/edit it just shows the default 10 rows, and certainly doesn't "change the visibleRowCount property accordingly" :-(
Anyone has a solution?
Thanks in advance!
=====================
EDIT: Thanks to #matz3's answer below, I was ultimately able to solve this issue.
Setting the surrounding container DIV to 100%, this seems to be ignored. Setting it to a fixed height, however, worked just fine. But what I really wanted, if a user resized the window, the number of available rows needs to be adjusted accordingly. Setting it to a fixed height is therefor not an option...
However, the trick was in some extra CSS: not only the DIV needed to be set to 100% height, also both BODY and HTML (!!) needed to have a height set to 100%:
html, body {
height: 100%
}
div#uiArea {
height: 100%
}
Now, the table spans the full height of the available viewport, and resizing the window adjusts the table rather nicely. See the final working solution here: http://jsbin.com/bosusuya/3/edit
Matz3, thanks for your help!
CSS hacks is a dirty way. In my application I use to bind visibleRowCount to Array.length
For example, if you have model with this data:
[{firstName: 'John', lastName: 'Smith',
{firstName: 'David', lastName: 'Ericsson'}]
You can bind to Array property length like this:
var oTable = new sap.ui.table.Table({
visibleRowCount : '{/length}'
})
[...] automatically fills the height of the surrounding container [...]
Your surrounding container is the view, so you have to set the height of it also to a value (e.g. 100%)
this.setHeight("100%");
And your view will be set into the uiArea-div, so this one also needs a height (e.g. 500px)
<div id="uiArea" style="height:500px"></div>
With these changes it now works as expected
I'm with the same issue. I "resolve" that in this manner. This is not perfect, but it's better than UI5 resizing...
_resizeTableRow: function () {
var oTable = this.getView().byId("referenceTabId");
var sTop = $('#' + oTable.getId()).offset().top;
var sHeight = $(document).height();
//if there a row, you can take the row Height
//var iRowHeight = $(oTable.getAggregation("rows")[0].getDomRef()).height();
var iRowHeight = 40;
var iRows = Math.trunc((sHeight - sTop ) / iRowHeight);
oTable.setVisibleRowCount(iRows);
},
Other option is to put the Table in sap.ui.layout.Splitter:
I'm manually porting an extension I wrote in Chrome over to Firefox. I'm attaching a panel to a widget, and setting the content of that panel as an HTML file. How can I make the panel shrink and grow with the content? There's a lot of unsightly scroll bars and grey background right now.
var data = require("self").data;
var text_entry = require("panel").Panel({
width: 320,
height: 181,
contentURL: data.url("text-entry.html"),
contentScriptFile: data.url("get-text.js")
});
require("widget").Widget({
label: "Text entry",
id: "text-entry",
contentURL: "http://www.mozilla.org/favicon.ico",
panel: text_entry
});
Not setting the height property of the panel makes it quite tall.
You might want to check out this example that resizes the panel based on the document loaded. If you want to resize based on changes to the content size, at least on initial load:
https://builder.addons.mozilla.org/package/150225/latest/
( sorry for the delay in respinding, been afk travelling )