If i separate Components some of them miss styling

Socialflasher · August 27, 2019, 10:14pm

HI,

i just started working on my up coming project UI kit , and prepared a pretty basic structure for the project, but i am having difficulties applying styles, every thing was working when it was only main.xml [only one component] as i moved to separate the components and there files some of the components stopped getting styling from CSS files, and some are getting without any problem. i am not sure whether it is my structure which is wrong or this is a legit problem.

to better explain i am attaching the sample-project files you can see here

thank you

intoxopox · August 28, 2019, 2:30am

This is what I’m seeing. Can you run through what I should be seeing vs this output?

Socialflasher · August 28, 2019, 10:27am

yes this is the exact same result i am getting:

the problem is, it is ignoring all the styling of main_screen.

and also i am not sure this is the right way to structure ? i want to separate the components to reuse them , the very next step is to create a custom button component with custom styling etc. but i am stuck with this , the only thing i am seeing is the buttons styling .

thanks

ianharrigan · August 29, 2019, 4:46am

What a happens if you uncomment these lines: https://github.com/SyedAsimAliSE/haxeui-styling-problem-sample/blob/master/src/com/valour/classes/ui/screens/MainScreen.hx#L42-L43

Socialflasher · August 29, 2019, 11:27am

hi, thank you for taking time, these are the exact lines i commented out and these lines were affecting the styles after enabling them i got the styles working, but now i am stuck with weird aligning problems.

    //After enabling these the main screen started getting styles :) 
    percentWidth = 100;
    percentHeight = 100;
    		
    //if i use instance generated from xml, it will be added way before main screen instance.
    //_screenHolder = screenHolder; 
    		
    //fix 
    _screenHolder = new VBox();
    this.addComponent(_screenHolder);
    _screenHolder.percentWidth = 100;
    _screenHolder.percentHeight = 100;

i am trying to wrap my head around xml designing as i am used to design UI in flash and then use swf libs. so i am thinking every box as a MovieClip. so far i don’t think these terminologies apply here

you can check the code here

and the current result is :

thanks