CODEWITHSUNDEEP
javascriptreactjsjsx
user12581183
user12581183

Reputation:

jsx problem displaying a phone number in one line

I have a simple problem, but I could not figure out the solution for it. I have this element

<tr className="list-group-item list-item row">
    <td className="col">Phone number :</td>
    <td className="col">{this.state.phone_number}{""}</td>
</tr>

I expect it to display one line row like this 

Phone number :        +1 773-381-0000

however it displays this

                      +1 
Phone number :        773-
                      381-
                      0000

Upvotes: 0

Views: 74

Answers (1)

Athanasios Kataras
Athanasios Kataras

Reputation: 26450

You can try the nowrap attribute to display properly.

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_nowrap

<tr className="list-group-item list-item row">
       <td className="col">Phone number :</td>
       <td  style="white-space: nowrap;" className="col">{this.state.phone_number}{""}</td>
</tr>

Your problem is that there is not enough space in the table and the text wraps.

The row and col bootstrap classes don't work well with tables. Check responsive table here https://mdbootstrap.com/docs/jquery/tables/responsive/

Upvotes: 1

Related Questions