issues and questions about css styling

thrice801

I'm running into some confusion attempting to use css styling in my project, hoping someone could answer these questions:

I saw that relative/absolute position is supported according to docs, however when attempting to put a button within a panel, (was trying to use panel as a parent div, with my buttons and what not positioned absolutely within), it does not seem to work. So I am wondering, does that mean that it's only supported on a per component basis, so the children components aren't actually in the same dom structure? (ideally I'd like to control my layout with flexbox, but if the components are in their own little dom structure then obv that won't work)
Is there no way to style the "Root", with css?
Related to above because I couldn't figure it out, I attempted to wrap everything in a panel, but when I put my on screen keyboard floating tile within the panel, it disappears. Is this expected behavior or any ideas what's going on with that?

d.healey

@thrice801 Can you make some minimal snippets to demonstrate each of those things? I haven't played with the css too much because I usually run into some issue pretty quickly once I start, so I'm still using traditional laf. But if you post those snippets I can take a look and see if I can offer any guidance.

thrice801

@d-healey here is the on screen kb issue. I noticed it actually is showing up, but the parents styles seem to somehow be interfering and painting it black. Because if you comment out the parent's style being applied, it shows up correctly.

HiseSnippet 1387.3ocwWs0aaaCElxNJXQccnAX+.DzdwovM0NN2ZKFVabhWSatg41hBLLDPSQawFIRAI5jXLj+S6m1dXusGxNjTxRJ1soy.CyHWjN7b46b34loWKobep+4obVbLUhPV0OKQPnoohDjky6lDSQVeqc+IbYP2.LiiNbej0R1W1As2jXbZJ0GYYU+mUmXsxRH8m+7m1CGh4DZAID5CBFgdDKhIKnd1KeKKLrG1m9NVTIt27kGRD7thPwX.E0saghwjKvinmfUrUyF8ZbZ.x5w1OaXmms61svc72kPIjMGt0NauIt8lc1BSeVmg31D5NasAA.4xG3yjhj9RrjlBtvdB+I8CDWwMF3CrT1fPp5k1n9fkMj6IB8UtnhJpa.KzeZ3IEBVKUJXU2Dr9d6iY9rozKBZORefagDkCfV0pBu5UfW6OG7lCjrJAokLPZU69jDVrr3DEddf8gbIMYHFtmJCECunZMqay3jvw9zFdoxIgzyCngwzj0+Tp2ZuvwAtgRktWhSbOFbwyvbZn6O51U.JkKWG66qI0va5odMcaA+.x1WotWazFNNNbR2Pk4SaLk2lt+p25QvaOIVK5uARkq5TpxS.YkLZZuDQza5e5IUsyu6rhW.kMJP58b2sa0pI79ULeY.75tsZ4bSUG3TN3zTJ+sCp5A8BEXIiO5crPHHTvkwS1pkxWJnp.VCuLwUQdfMu2RmLPfS78lCqFD0Tgn4bZLNAzSWQTrfCOnTVgKpvelCzWDQ2arTJ3UAugVCuhyAUztk5WkzEjMlSRuVaitgLxEtGSUl3t7beP5yduVnH8E6.8iOQmU8j15K2o2tQ3KnvkJWNM6rg5BzDjFNlSjLvSE7SDR5o7Fq4.20N233d2iFNbtmoLShHLjlL2iU8gR9RB1fONZ.MoIj2DNlNkQnVqZA7xecEvDiWWhQA+PNSdZLM68ubGHTVXSU3mgPfUotr+6xJ6MAdDyW2Ie5MAR6AkaQid+g6ik3bcApsnNCnsO8RnEtokxJ16SSuPJh07lkO.CLLV9g4MbTIFZC+.6oIJnqQV1VJyMI+Acg.nzkcqa.ho1UQ4i0LTFLJebvJKe6s29dEMljFkSUqnVET1HmjJutfIPzevpVID+.YVWaChKWwmEwJpKuCx+KqogeSPwwNuZeVO5NkNUiH2mysxxc5zYXUpanHu5pq92JxkcRsJtUazYuYtubBsG5j6gNYpV4Z48E9+wSlcnFLNU3ONDKqNiUsIR1APcakAapFJ7TlbR4MU9WL3s0Wbv6WKDW09LljDLeLVaNXDJG+u.iYqq7P6CFNjRjkWtq2GWzcStGy+KhwphqiwxDlJS6jwQ8gaZBErNGReRUIcpB9r2akWu0G1RsUV86sYG1V8tU1gsyODEgIIhyIldgpEh9FME.Sb8xiq.Yqv6tsms+WDre14DRUUMifarnB1YQEbyEUvsVTA2dQEbmEUvcueAUqO+pwRQjorAgN9rCzyqrrNfigLPc1JhBym8gQllFcpLfZCUcyM+yX0GYSRSepd+iz0gGymCirn1OFlo6BeHPlbxycuJ.5T8BXFuSo8QUKXN.9JIiRDi49O2URwgFdptZyc4Kg5qXCglAQqZemcrmBoZ+gksihoT3KAQcKsikqAnIzQtZgOBOrzJfvPKnd8HAAGdjPbwq398nv93vtVJgxEPsXmVk8CnpU7pFW7x3t3OLdHiSKVLpxZdj7gBMcIFRqkgQS.M6TkMmAW4.JyhpOO8otuQv345x8JlLvUGERcwbeisckAznohDpTqQf9PSF9HHfjI95eBzUCOWuRV.hUohP55w.qxFkDqDOUfcQnR6yyQjabtAUjCxoW2CtiUM+9GwmkcGC

thrice801

@d-healey and here is example of positioning not working.

HiseSnippet 1423.3ocwWs0aaaCElxNJXVYcnAX+.DzdwsvIUNNIMMECqMNwqoM2vbaQAJFBnknsXiDofDcRLFx+j8iX+z1C6s8P1gjRVRwtMcFXXF4hzgmKemCO2L4ZAg4S7OOkQiiIBDxn9YIbORZJOAYX81IwDjw2Z1eBSDzM.SYnC2GYrj4kah1aRLNMk3iLLp+yxSLZrDR84O+o8vgXlGofDB8dN0ibDMhJJnd1KdCMLrG1m7VZTIt27EG5wYc4g7w.Jpa5hhwdWfGQNAKYqlI5U3z.jwiMe1vNOamscwc72wi34s4vsd51ahauYmsvjm0YHtsG4oasgG.xkOvmJ3I8EXAIEbg839S5GvuhoMv6oozAgD4KsQ8AKqI2iG5KcQIUT2.Zn+zvSJDrVpTvptNX88lGS8oSoWDzdn5.6BIJG.MpUEd0q.u1eN3MGHYTBRKogzpl88RnwhhSj3YEyCYBRxPLbOUFJZdQ0ZU2jx7BG6SZ5jJlDRNOfDFSRV+SoNO54VVvMTpv9Rbh8wfKdFlQBs+Q6tbPoLw5XeeEolNSO0oksK7CHaeo5dkVa333vIcCklOs4TdaY+Qm0if2VKVI5uBRkq5ThzS.YETRZuDdzq6e5IUsyuY0vIfPGEHb10daW2Vv6WQ8EAvq635ZcSUG3TF3zDB6MCp5A8B4XAkM5szPHHTvk1S1xU5KETk.qoSl3xHOvlyaHSFvwI9NygUMhZIQzbNMFm.5oKOJlyfGjJqvEk3OyA5yiH6MVH3rpfWSqoSw4fJZ6J+UJcAYs4DjqU1naH06B6iIRSbWdtOH8YuWKTj5hcf5w0TYUq0Vc4N81MBeAAtTYhoYmMkWf5fzvwLOAE7TN6DtfbJq4irf6Zqarru6QCGN2yjlIgGFRRl6wx9PIeIAaxFGMfjzBxaBGSlxHTqUs.d4utBXOsWWhQN6PFUbZLI68ubGHTVXSV3mgPfUgpr+6xJ60AdD0W0Ie5MAR4AkaQid2g6iE3bcApsnNCnsO4RnEttkRCy8IoWH3wJdyxGfAFZK+f7FNxDCkgWwbZhB5ZjgogzbSxePUH.JcY65ZfnqckT9PMMkAixGGzX4au812IoQEjnbpJE4VPYibRx75Bl.Q+AiZkP7Jhrt1ZDWthOKhUTWdGj+WFSC+5fhkYd09rdzcJcpFQtOmqwxc5zYXUpaHIu5pq92RxkcRkJtUYzYuYtubBkGZk6gVYpV5Z48E9+wSlcnFLNk6ONDKpNiUtIR1APcakAaxFJrTpXR4MU9WL308KN38qEhqZdFU3ELeLVaNXDJG+u.iYqq7.yCFNj3IJubWuOrn6lbOl+W3ikEWGiEITYl1Iii5C2zdDv5LH8IUlzIK3yd2MudqOrkpaV86sYG1V9tQ1gsyODEg8R3m6o6EJWH5aTT.LwTKO1.xVg2saOa+uHX+ry87pppYDbiEUvNKpfatnBt0hJ31KpfOcQEbm6WP45yubrfGoKaPniO6.07JCiCXXHCTkshHv7YeXjotQmLCn1PY2b8+zV8gldooOQs+Q55vi4ygQF+t4igY51vGOHSNYW6qBfNUOGlwaUZeT4BlCfuRxnD9Xl+t1BBN74VMh4PoKfscsSHxh6KyDr59N2U3DheEYwCR4gikFsALfcW6MbciuVpHDZFGYUy6rZ9TOo1eXXZIYJE9tSD6RqlYq8uDxHakvGgGVZyQXVGTleD2CGdDmewKY98HvZ7vJZRgxEPtOnRk8CHxMCqFNcx3t3OTVHkQJ1mpx1gd4yRZY6oI8nLLpuGxNUZyYvUNfxrn7ySdh8q4TVttruhJBrUQgTaLyWaaaQ.IZpHgR0pEnOzahMBBHYhu9m.c0zw1ojEfXEbEQVOFXUzrjXk3oBrKBUJedNhbi0MnhTWF45dvcrrm4+.BuchoA

d.healey

You should use const for this, because it won't change.

reg styleLaf = Content.createLocalLookAndFeel();

Can you make your snippets self-contained, without the external files? Although HISE does embed the external files in the snippet, I ran into an issue which caused HISE to crash and the autosave doesn't restore the external files, so I couldn't reload it. Having it self contained would avoid this.

Christoph Hart

Don't use CSS for positioning, the entire plugin UI is dominated by the absolute-pixel approach.

You can use these properties for positioning pseudo elements within a single UI element though.

thrice801

@d-healey ya but it got more messed up when I attempted to do inline css and not sure why (button styling does not apply), but still illustrates the on screen keyboard issue within panel. HiseSnippet 1304.3ocsWs9SabDDeOHGp3zTUj5e.qt9ESKPNi4YhpZBFngDdXUCQQJJJZ8ciwa4tcOc25jXEw+y8C8a8CzY26swARrTOAR2MO+MyNyri6FK8fjDYLwpw4ii.h02a2arPMryPFWPNZeh0Cr+vFj8FGwRR.ehk07+gli0hOfXd96eeOV.S3AkjHjWK4dvw7PtpjZ2m8JdPvgLe3bdXEo23YG4IEcjAxQHJl21kDw7thcIbJSK1b1jWvRFRr9E6cGzd2c1xk01eGOvyaiAat8VavZsQ6MYvtsGvZ4Aau45dHHW3.etRF2SwTPBFB6I8G2an7ihTG7ZdBue.n+nEoG54TxGJC70gnlJoyPdfe27zSBAsR2xj07oIqex9DtOufdYR6GMLnkZTMAZMWc3MeM305KAuo.IqJP5AoPZI6ddw7HUIGMddn8QBEDOfgmSUgRprj49UaaAltSvTOP6oFG.u.BhfX5maPwGtHfK.5fQBOEWJnrnnfwcBzlIoomLLRJ.gZEpWJI7kjj2impJj5xY1HP5wBnIZaeLa.82ncR4ulWLf4gi0rOVJu54B+CAHn4xO0nl9ovCqk.paIXtIqnf4ImtVoiLAfIv5MD.UyJ.bs+RxEMcbVthAd7iouDolGPzOxUColrSBkI7SS.T0PHrPkz3ynPOULWbIFhYpm4ApSEOfQehL.VKBEEgSoZeo3tD7lD+TT45FW2nAFTIJ5GXwzSvhwtLADTIWy78MjZ5Tv0YEpK9GZiJm6qU6DtP1Unu0YsvwqFhDVMxn86tMM5mo8wV3KikiD9Ogp.VvSoW67NzE43.iGr.EcjhCIGFKCeYuyNsNn9biEcFB7KGpbdBcKW2Uvu+H2WMD+bGW2FWilqRzdl.qkAP7p90C2CCjLEliNmG.McJkJMr2zUG3kT0.qoSl55FJTLmWAi6KYw9NSQzTDshFQSgaDKFsSm7iQswJCwR72SFB6MRovNqZXOkVSmR9nEZ4p+WebUPM0YJ3SFOzIf6cE8DvYJxbe.5KVBTZHy4ceyqqZZwVsUVQPchSTEDC94EAEUAgrq.7vWnJFN0TePmlLKF1HEmJUvYhlK2.qIvZb5jrFLXp7ztIVFD.wSks9Zn36RwlhQg8g3Uv5qfQPgf3n15yuW3qa9c13lJBJEGI3pyhfruu6KfHYoM8b+LDhhpLS8+gro9oGQDtu4h7hyLhIBpdoM4hi1moX41BMaY+HRae3C3M3o2nrn89PxUJYjQ1rJGbegTO+n76azkPFG+P6hRJxmHV1VZONN+ESCCZzEnymhkzdbMk2LWJk9WluMvhKbyM2bglFWAg4TMFxsjx54jzc.kBgp9yVyUAwOTkcocJhqNYHKiU1+NAx+GqhzeZRogc9TgaGQSzjUOiLQvQlL3Vbg1saOnN000jy2spZPZLQpMt8Iy8USXhvF4QXiLSqCs7IHeSQxEe0QxRKsz+dGQxs2oA2lR5OJfopuhkdQzLFXeas8ZzCTDIb03p07eC6c4dm6c80Bwkr6xUdCmNFmaJXDaG++.iYaq9H6CFL.7TU2s+v2LqqldOt+OkizMWmvvMTzUZmNJrGdR6An2EX4ShtnS2vm8sad+VOP36l0+dSFyV5usxX1JmIIj4EKMqwgyB06C+cFJHlDle6vhX0J9Ms0jy+HjPb87264U2T2Rw0mUEaOqJtwrp3lyphaMqJt8rp3N2uh5e8zyGojgosMDxIcOvbekk0ABFVAZpVI+GrioCAN

d.healey

@thrice801 said in issues and questions about css styling:

but still illustrates the on screen keyboard issue within panel

Yep, no idea why that happens

issues and questions about css styling

38

1.7k

11.8k

103.0k