How to run this project on the editor and get rid of text

[walker1234Participant]

I’m trying to run the following example-Integeration with other widgets (https://www.jqwidgets.com/react/react-tabs/index.htm#https://www.jqwidgets.com/react/react-tabs/react-tabs-integrationwithotherwidgets.htm) in the following editor and it just shows the HTML part, why is it like this?

My question:

I want to get rid of the following text:

The S&P 500 index finished 2011 less than a point away from where it ended 2010 -- 0.04 points down to be exact. That's the smallest annual change in history. At its peak in April, the S&P had climbed more than 8%. But by October, at the lowest levels of the year, it was down more than 12%. The Nasdaq, meanwhile, lost 1.8% for the year.

And whenever I delete it, the grid shrinks to two columns which I don’t want. How to fix this issue?

[MartinParticipant]

Hello walker1234,

Could you clarify what the issue is?
I have tested to remove the text below the grid from the demo and the grid is still displayed fine.
I would suggest you to take a look at the styles that you are have set, e.g. width and height.

Best Regards,
Martin

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

[walker1234Participant]

Hello Martin,

I tried removing the text and it shows like this:

Whereas, if I don’t remove it, it looks better like shown below:

Since, I don’t need that text part, is it possible to completely get rid of it?

In my code (for some reason I get an error(ReferenceError: “getWidth is not defined”) when I use the getWidth property in the following section and hence I’m using width:{90%}. :

<JqxTabs
        ref={this.myTabs}
        // @ts-ignore
        //width={getWidth("tabs")}
        width={"90%"}

If possible, could you make this editor work here as I tried it to show my issues but the code isn’t rendering there properly:

https://stackblitz.com/edit/react-ts-ddgvet

[MartinParticipant]

Hello walker1234,

I have tested your code and when the <div> container with the text is removed, the grid is still displayed properly.

From the screenshot I could see that the width of the tabs is reduced, so I would suggest you to check again, what width have you set.
getWidth is a method that is defined in demos.js file, so if you haven’t imported it you can set the width in percentages, e.g width={"90%"}.

Best Regards,
Martin

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

[Author]

Posts