cancel
Showing results for 
Search instead for 
Did you mean: 

How to make TextArea occupy whole space

0 Kudos

Dear UI5 experts,

I'm creating a web page and encountered some difficulty. The page has one panel that contains three FlexBoxes. Each of FlexBox #1 and #2 occupies 10% of height, and FlexBox #3 occupies the remaining 80%. In FlexBox #3 I put a TextArea and I want it to occupy the whole FlexBox space. I set width="100%" and it works on width. However, setting height="100%" does not lead to what's expected. The TextArea is still small. I can set height to a specific number such "300px" and it can enlarge the TextArea, but this is not the ideal way.

Could you please let me know what should be the correct property settings?

Below is the code:

{code}

   <Panel height="100%">

    <FlexBox height="10%" alignItems="Center" justifyContent="Center">

     <items>

      <Button id="start" text="Start" width="100%" press="startTransmit">

       <layoutData>

        <FlexItemData growFactor="1" />

       </layoutData>

      </Button>

      <Button id="stop" text="Stop" width="100%" press="stopTransmit">

       <layoutData>

        <FlexItemData growFactor="1" />

       </layoutData>

      </Button>

      <Button id="close" text="Close" width="100%" press="close">

       <layoutData>

        <FlexItemData growFactor="1" />

       </layoutData>

      </Button>

     </items>

    </FlexBox>

    <FlexBox id="transmitOptionBox" height="10%" alignItems="Center">

     <items>

      <ComboBox id="systemConnections">

       <items>

        <core:Item text="Network Connection" />

       </items>

      </ComboBox>

      <CheckBox id="useOfflineConnection" text="Use Off-line connection (Xmit required)" />

     </items>

    </FlexBox>

    <FlexBox height="80%">

     <items>

      <TextArea id="transmitStatus" width="100%" height="100%">

       <layoutData>

        <FlexItemData growFactor="1" />

       </layoutData>

      </TextArea>

     </items>

    </FlexBox>

   </Panel>  

{code}

And here is the screenshot of what I got so far:

Thanks a lot!

Jay

Accepted Solutions (1)

Accepted Solutions (1)

RameshShrestha
Contributor
0 Kudos

Hi Jay,

You can get the parent height and set it to the textarea.

var txtArea = this.getView().byId("textarea");

  var parentId =txtArea.getParent().getId();

  var heightParent = $("#"+parentId +"-cont").css("height");

  // console.log("Height :" +parentId);

  txtArea.setHeight(heightParent);

Here my Textarea is inside the page so i got the height of page content and set same height to textarea and it works.

0 Kudos

Hi Ramesh,

Your answer is very inspiring. I was not thinking of using JavaScript to adjust since I thought we should be able to achieve the objective by setting properties in view.xml. It turns out that we have to use JavaScript to achieve it.

Furthermore, your code may not server the purpose:

    

     var heightParent = $("#"+parentId +"-cont").css("height");

     txtArea.setHeight(heightParent);

because of two reasons:

(1) We want to get the real height number. By css("height") we may not get that.

(2) We need to set real height number for html element, but txtArea is a UI5 object.

My working solution is as follows:

       var transmitStatus = this.getView().byId("transmitStatus"); 

       var transmitStatusId = transmitStatus.getId();

       var parentId =transmitStatus.getParent().getId();

       var parentHeight = $("#" + parentId).height();

       // Note that transmitStatusId has a complex form like "sap.agentry.screens.Transmit--          transmitOptions",

       // and $("#" + transmitStatusId) will not work for selecting the correct element

       var transmitStatusElement = $("[id='" + transmitStatusId + "']");

       transmitStatusElement.height(parentHeight);

Thanks a lot for your help!

Jay

RameshShrestha
Contributor
0 Kudos

Thanks Jay for response. I just made it work for sample text area. It surely wont work everywhere. Mainly basic idea was to get parents containers height and set it to textarea dynamically. And glad to share knowledge.

Answers (2)

Answers (2)

maciola
Explorer
0 Kudos

Sadly, this behaviour is still present in the 1.68.0

Is there really any chance to configure Textarea without buildig surronding elements or calculating parents height?

Former Member
0 Kudos

Hi Jay,

I don't know the answer. What I know is that by default the number of rows = 2. Hence, textArea show up 2 rows. If you add few more rows then it will increase the height. May be you can try to play around with rows as an alternative.

Thanks and Regards,

Abhijeet

0 Kudos

Hi Abhijeet,

Thanks for your response. Unfortunately playing with rows does not bring what I was looking for. But I've got a solution now, .

Jay