RobYost Posted June 18, 2017 Share Posted June 18, 2017 Some of style commands don't work for me. Am I doing something wrong or is there a problem //TUnimLabel WORKS s := ' document.getElementById("' + mUniRyLabel1.JSName + '_id").style.border = "3px solid red"; '; UniSession.AddJS(s); WORKS s := ' document.getElementById("' + mUniRyLabel1.JSName + '_id").style.color = "red"; '; UniSession.AddJS(s); DOESN"T WORK - But I can make it work by adding "Property Font" to a TUnimLabel descendant s := ' document.getElementById("' + mUniRyLabel1.JSName + '_id").style.fontfamily = "Cambria"; '; UniSession.AddJS(s); ---------------------------------------------------------------------------------------------------------------------------------------------- //TUnimEdit WORKS s := ' document.getElementById("' + edt1.JSName + '_id").style.border = "3px solid green"; '; UniSession.AddJS(s); DOESN"T WORK s := ' document.getElementById("' + edt1.JSName + '_id").style.fontsize = "10px"; '; UniSession.AddJS(s); DOESN"T WORK - Can NOT make it work by adding "Property Font" to a TUnimEdit descendant (which does work with TUnimLabel) s := ' document.getElementById("' + edt1.JSName + '_id").style.fontfamily = "Cambria"; '; UniSession.AddJS(s); DOESN"T WORK s := ' document.getElementById("' + edt1.JSName + '_id").style.color = "green"; '; UniSession.AddJS(s); Quote Link to comment Share on other sites More sharing options...
Sherzod Posted June 18, 2017 Share Posted June 18, 2017 Hi, At the moment you can not change some CSS properties I think,because they are managed by class styles. Please make a simple testcase, we will try to analyze. Best regards, Quote Link to comment Share on other sites More sharing options...
Sherzod Posted June 18, 2017 Share Posted June 18, 2017 For unimEdit you can use inputCls config Quote Link to comment Share on other sites More sharing options...
Sherzod Posted June 18, 2017 Share Posted June 18, 2017 for example: 1. UniServerModule -> CustomCSS: ._input { font-size: 10px; font-family: Cambria; color: green; } 2. UnimEdit -> ClientEvents -> ... function beforeInit(sender, config) { config.inputCls="_input"; } Quote Link to comment Share on other sites More sharing options...
Sherzod Posted June 18, 2017 Share Posted June 18, 2017 for Height, you can try this: 1. UniServerModule -> CustomCSS: ._x-field { min-height: auto; } 2. UnimEdit -> ClientEvents -> ... function beforeInit(sender, config) { config.cls = "_x-field"; } As a result: 1. UniServerModule -> CustomCSS: ._input { font-size: 10px; font-family: Cambria; color: green; } ._x-field { min-height: auto; } 2. UnimEdit -> ClientEvents -> ... function beforeInit(sender, config) { config.inputCls="_input"; config.cls = "_x-field"; } Try... Best regards, Quote Link to comment Share on other sites More sharing options...
RobYost Posted June 18, 2017 Author Share Posted June 18, 2017 Is it possible to add the clientevent code in my Delphi code? I would like to not have to put this information in every edit field, I would like to call a function that loops through all components. But thank you I will try your suggestions. I don't see how to attach so I am just putting in the source code. unit Mainm; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, uniGUIFont, Controls, Forms, uniGUITypes, uniGUIAbstractClasses, uniGUIClasses, uniGUImClasses, uniGUIRegClasses, uniGUIForm, uniGUImForm, uniGUImJSForm, uniEdit, unimEdit, uniGUIBaseClasses, uniLabel, unimLabel, unimPanel; type TmUniXLabel = class(TUnimLabel) published property Font; end; TmUniXEdit = class(TUnimEdit) published property Font; end; TMainmForm = class(TUnimForm) lbl1: TUnimLabel; edt1: TUnimEdit; pnl1: TUnimPanel; procedure UnimFormShow(Sender: TObject); procedure UnimFormCreate(Sender: TObject); private { Private declarations } public { Public declarations } xLabel: TmUniXLabel; xEdit : TmUniXEdit; end; function MainmForm: TMainmForm; implementation {$R *.dfm} uses uniGUIVars, MainModule, uniGUIApplication; function MainmForm: TMainmForm; begin Result := TMainmForm(UniMainModule.GetFormInstance(TMainmForm)); end; procedure TMainmForm.UnimFormCreate(Sender: TObject); begin xLabel := TmUniXLabel.Create(self); xLabel.Parent := pnl1; xLabel.Top := 0; xLabel.Left := 0; xLabel.Width := 100; xLabel.Caption := 'xLabel'; xLabel.Font.Size := 9; //works xLabel.Font.Style := [fsBold]; //works xLabel.Font.Color := clGreen; //works xLabel.Font.Name := 'Comic Sans MS'; //works xEdit := TmUniXEdit.Create(self); xEdit.Parent := pnl1; xEdit.Top := 50; xEdit.Left := 0; xEdit.Width := 100; xEdit.Text := 'xEdit'; xEdit.Font.Size := 9; // Not works xEdit.Font.Style := [fsBold]; // Not works xEdit.Font.Color := clGreen; // Not works xEdit.Font.Name := 'Comic Sans MS'; // Not works end; procedure TMainmForm.UnimFormShow(Sender: TObject); var s: String; begin // ========================================================================================== // TUnimLabel // ========================================================================================== s := ' document.getElementById("' + lbl1.JSName + '_id").style.border = "3px solid red"; '; //works UniSession.AddJS(s); s := ' document.getElementById("' + lbl1.JSName + '_id").style.fontsize = "8px"; '; //works UniSession.AddJS(s); s := ' document.getElementById("' + lbl1.JSName + '_id").style.color = "green"; '; //works UniSession.AddJS(s); s := ' document.getElementById("' + lbl1.JSName + '_id").style.fontfamily = "Cambria"; '; // Not works UniSession.AddJS(s); // ========================================================================================== // TUnimEdit // ========================================================================================== s := ' document.getElementById("' + edt1.JSName + '_id").style.border = "3px solid red"; '; //works UniSession.AddJS(s); s := ' document.getElementById("' + edt1.JSName + '_id").style.fontsize = "8px"; '; // Not works UniSession.AddJS(s); s := ' document.getElementById("' + edt1.JSName + '_id").style.fontfamily = "Cambria"; '; // Not works UniSession.AddJS(s); s := ' document.getElementById("' + edt1.JSName + '_id").style.color = "green"; '; // Not works UniSession.AddJS(s); end; initialization RegisterAppFormClass(TMainmForm); end. object MainmForm: TMainmForm Left = 0 Top = 0 ClientHeight = 480 ClientWidth = 320 Caption = 'MainmForm' OnShow = UnimFormShow TitleButtons = <> OnCreate = UnimFormCreate PixelsPerInch = 96 TextHeight = 13 ScrollPosition = 0 ScrollHeight = 47 PlatformData = {} object lbl1: TUnimLabel Left = 72 Top = 33 Width = 85 Height = 23 Hint = '' AutoSize = False Caption = 'lbl1' end object edt1: TUnimEdit Left = 72 Top = 77 Width = 154 Height = 47 Hint = '' Text = 'edt1' end object pnl1: TUnimPanel Left = 24 Top = 192 Width = 256 Height = 128 Hint = '' end end Quote Link to comment Share on other sites More sharing options...
Sherzod Posted June 19, 2017 Share Posted June 19, 2017 Hi, You can add the above CSS and for your created component add a few configurations: with TUnimEdit.Create(Self), JSInterface do begin Parent := Self; Left := 10; Top := 60; Name := '_UnimEdit1'; JSConfig('inputCls', ['_input']); JSConfig('cls', ['_x-field']); end; Quote Link to comment Share on other sites More sharing options...
RobYost Posted June 19, 2017 Author Share Posted June 19, 2017 Thank you, I got that working and have started a new control to use it. I will share it when I am done. Here is what I have so far: https://unigui.miraheze.org/wiki/Main_Page (it is not done) I am trying to add border-width and border-color. Is there any documentation that shows how to use JSConfig. When I look at https://www.w3schools.com to look at how to format JS I see that examples like: document.getElementById("myP").style.fontFamily = "Impact,Charcoal,sans-serif"; But in CustomCSS I need to use font-family. So is there somewhere where I can see what the expected input for a CSS? Not just for font-family. For example JSConfig('inputCls', [something]); this works for TUnimEdit but not for TUnimLabel. It makes sense label is not an input class, but what is it? It tried: JSConfig('text', [something]); but that didn't work, and I don;t know how to look it up ALSO. in JSConfig your example for the first parameter is 'inpoutCls' and 'cls' what is the difference and there seems to more options, where can I look up what I can use for the first parameter? What parameter goes with border-width and border-color? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted June 20, 2017 Share Posted June 20, 2017 Hi, http://docs.sencha.com/touch/2.3.1/#!/api/Ext.Label http://docs.sencha.com/touch/2.3.1/#!/api/Ext.field.Text Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.