how to make jqxlayout 100% width in angular2?

[softboy99Participant]

how to make jqxlayout 100% width in angular2?

[softboy99Participant]

any comment? i tried your demo, it can use 100% in normal js way, but in angular 2 it can only use numeric width and height .

[Ivo ZhulevParticipant]

Hi softboy99,

I’ve done the normal Fluid Size demo in Angular and all works fine.
What is the problem exactly?

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[softboy99Participant]

where is the demo? on the website there is only one demo “overview” for jqxLayout angular2 demo. I use your overview demo App.component.html:

<jqxLayout [width]=’800′ [height]=’600′ [layout]=’layout’>
…..

the width can only fixed width, if you use 100%, doesn’t get what you want.

[rjwijnenParticipant]

Did you try: [width]='”100%”‘ ?

[softboy99Participant]

yes, i tried, but failed.

[softboy99Participant]

@Ivo Zhulev， where is the angular Fluid Size demo？

[Ivo ZhulevParticipant]

Hi softboy99,

We are currently working on making all demos available on React and Angular. I’ve tested a fluid size demo on my own. I made a simple angular layout demo and put the width/height in percentages. It scaled fine. Do you set the width and height of the container element to 100%?
As in our all fluid size demos we have

  <style>
    body, html {
      width: 100%;
      height: 100%;
      overflow: hidden;
      padding: 3px;
      box-sizing: border-box;
      margin: 0;
    }
  </style>

in the main .html file.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[softboy99Participant]

Hi Ivo Zhulev,
Yes, i already use it in my main.html file. but it failed with:[width]=’100%’ [height]=’100%’. the following is the error log from the chrome console:
Unhandled Promise rejection: Template parse errors:
Parser Error: Unexpected end of expression: 100% at the end of the expression [100%] in ng:///AppModule/AppComponent.html@3:11
<jqxLayout [ERROR ->][width]=’100%’ [height]=’100%’ [layout]=’layout’>
<!–The panel content divs can have a flat struct”): ng:///AppModule/AppComponent.html@3:11
Parser Error: Unexpected end of expression: 100% at the end of the expression [100%] in ng:///AppModule/AppComponent.html@3:11
……

[softboy99Participant]

Hi,
in webstorm IDE, for AppComponent.html: <jqxLayout [width]=’100%’ [height]=’100%’ [layout]=’layout’>, the webstorm IDE imply the message: “expression expected” at the location of ‘100%’

[Ivo ZhulevParticipant]

HI softboy99,

If you want to pass a string like an Angular attribute you must have "' '".
So its normal to trow an error with '100%'. It must be"'100%'".

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts