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
Related
I can't find a way to increase the label width of EditorGUILayout.Toggle. Here's my code, it doesn't do anything and Unity clips the text and cuts it short.
GUILayoutOption[] options = new GUILayoutOption[] {
GUILayout.Width(400.0f),
GUILayout.MinWidth(250.0f),
GUILayout.ExpandWidth(true)
};
MyBoolValue = EditorGUILayout.Toggle("My Long Description Text Here", MyBoolValue, options);
I did try wrapping the Toggle button with
EditorGUILayout.BeginHorizontal();
EditorGUILayout.EndHorizontal();
But it also didn't do anything. What can I do remove clipping from the text?
Set EditorGUIUtility.labelWidth before doing your Toggle, and then restore it to its original value so you don't mess up any subsequent controls.
float originalValue = EditorGUIUtility.labelWidth;
EditorGUIUtility.labelWidth = 400;
MyBoolValue = EditorGUILayout.Toggle("My Long Description Text Here", MyBoolValue);
EditorGUIUtility.labelWidth = originalValue;
I have a powershell 2.0 GUI which has a panel with a borderstyle of FixedSingle. The border renders black but I would like it to render it white but I am not seeing how to do that.
$dataPanel = New-Object Windows.Forms.TableLayoutPanel
$dataPanel.BorderStyle = "FixedSingle"
Thanks #gravity
Seems like an oversight that you can't change the border color! Either way I can do it then the following way:
$dataPanel = New-Object Windows.Forms.TableLayoutPanel
$dataPanel.BorderStyle = "None"
$dataPanel.add_paint({$whitePen = new-object System.Drawing.Pen([system.drawing.color]::white, 3)
$_.graphics.drawrectangle($whitePen,$this.clientrectangle)
})
I am working on a codename one application. I need to remove the border for Accordion component. (or) Is there anyway to change the Accordion's border color..
Can someone guide me...
The black border shown in the image
In your theme.res, just add a UIID with no border and set this UIID for accordeon.Otherwise , you can override accordeon UIID and set empty border like this :
And then uncheck derive and select border "empty"
To remove(hide) the border of an accordion from the code you can define it's border colour to be the same as the background colour and to be as narrow as possible.
Border border = Border.createCompoundBorder(Border.createLineBorder(1, 0xffffff), Border.createLineBorder(1, 0xffffff), Border.createLineBorder(1, 0xffffff), Border.createLineBorder(1, 0xffffff));
my_accordion = new Accordion(ifont_keyboard_right, ifont_keyboard_down);
my_accordion.getAllStyles().setBgColor(0xffffff);
my_accordion.getAllStyles().setBgTransparency(255);
my_accordion.getAllStyles().setPadding(0, 0, 0, 0);
my_accordion.getAllStyles().setMargin(0, 0, 0, 0);
my_accordion.getAllStyles().setBorder(border);
Does anyone know how to set the shape fill to transparent?
I tried the following code, but is not working.
$AppVisio = New-Object -ComObject Visio.Application
$AppVisio.Visible = $false
$docsObj = $AppVisio.Documents
$DocObj = $docsObj.Add("Basic Diagram.vst")
$pagsObj = $AppVisio.ActiveDocument.Pages
$pagObj = $pagsObj.Item(1)
$Shape = $AppVisio.ActiveWindow.Page.DrawRectangle(0.315, 0.397, 3.315, 8.015)
$Shape.FillStyle = "Transparent"
Thanks.
With Visio, most of the properties that effect appearance, size and position are stored in the ShapeSheet. So you need to find the right cell to address which, in this case, is FillForegndTrans. So your line should read:
$Shape.CellsU('FillForegndTrans').FormulaU = '50%'
If you're not familiar with the ShapeSheet, you might find this useful background:
http://visualsignals.typepad.co.uk/vislog/2007/10/just-for-starte.html
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: