[SOLVED] Text area bug or mistake from my side?

1

Hello,

In Framework 7 on Android I get a weird text area issue.
The textarea is not resizing but instead coming out of the screen(bigger than the screen and therefore showing as cut).

Am I doing something wrong please?

Here is my code:

                 <div class="row text-align-center no-gap">
                  <div class="col-5"></div>
                  <div class="col-90">
                        <div class="card">
                        <div class="card-content">
                          <div class="block-title">Your report</div>
                          <form class="list">
                          <div class="item-input-wrap">
<!--This is showing outside of the mobile screen-->  
                          <textarea name="report" class="resizable" placeholder="" required></textarea>
<!--This is showing outside of the mobile screen-->  
                          </div>
                          <br>
                          <div class="item-input-wrap">
                          <a href="#" type="button" class="button button-big button-raised button-outline color-green" id="send-report">Send Your Report</a>
                          </div>
                          </form>
                        </div>
                        </div>
                        </div>
                    <div class="col-5"></div>
                  </div>

Thank you.

2

Did you try to remove the list-class from your form?

3

Thanks,

No unfortunately, the textarea is still showing outside the col-90 colum with this code on Android(phonegap)

                 <div class="row text-align-center">
                  <div class="col-5"></div>
                  <div class="col-90">
                          <div class="block-title">Your report</div>
                          <form>
                          <div class="item-input-wrap">  
                          <textarea name="report" class="resizable" placeholder="" required></textarea>
                          </div>
                          <br>
                          <div class="item-input-wrap">
                          <a href="#" type="button" class="button button-big button-raised button-outline color-green" id="send-report">Send Your Report</a>
                          </div>
                          </form>
                      
                    
                        </div>
                    <div class="col-5"></div>
                  </div>
4

Can you please setup a minimal JSFiddle with this issue so i can see it?

5

You can start from forking this one https://jsfiddle.net/nolimits4web/o2ejupu1/

6

I just would like to inform you that the issue was from my side, I had an id to the text area which I thought was only being used by jquery but realized it was also linked to an old CSS code on the server and not my local computer… It took me ages to work it out because both my local and remote code did not match code wise due to a sync issue on my server and Laravel.

I am really loving Framework 7! Well done to the the creators!

1 Like