none
Increase the width of 'TextField' control in react JS SPFX webpart RRS feed

  • Question

  • I am using the 'TextField' control in react JS SPFX webpart.

    import { TextField } from 'office-ui-fabric-react/lib/TextField';

    Code:

    <div >
    <TextField id="txtPurpose" className={styles.desc1} multiline autoAdjustHeight defaultValue={item.Purpose} />
    </div>

    In site the webpart looks line below:

    I just want to increase the width how can we achieve that?

    Friday, October 18, 2019 10:58 AM

Answers

  • Hi Rajesh,

    Please go to .module.scss file, and find the class desc1, then modify the "width" to what you want.

    Example:

    .desc1{
        @include ms-font-l;
        @include ms-fontColor-white;
        width: 600px;
    }

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, October 21, 2019 1:59 AM
    Moderator

All replies

  • Hi

    Edit the css (styles.desc1), add a width property and set a value for it.


    Justin Liu Office Apps & Services MVP, MCSE
    Senior Software Engineer
    Learn Microsoft 365 from Microsoft DOCs now!
    Please Vote and Mark as Answer if it helps you.

    Monday, October 21, 2019 1:14 AM
  • Hi Rajesh,

    Please go to .module.scss file, and find the class desc1, then modify the "width" to what you want.

    Example:

    .desc1{
        @include ms-font-l;
        @include ms-fontColor-white;
        width: 600px;
    }

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, October 21, 2019 1:59 AM
    Moderator
  • Thanks for your immediate reply.

    In the same way if i want to change the below things how can i do it?

    padding: 20px ;
    margin: 20px ;
    font-family: "Segoe UI Web (West European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
    font-size: 17px !important;
    padding-bottom : 10px ;

    Monday, October 21, 2019 5:11 AM
  • Hi Rajesh,

    What do you mean about "I want to change the below things"?

    Please provide more information for further research.

    If my reply above helps you, please mark the reply as answer, it will make others who stuck with the similar issue easier to search for valid solutions in this forum.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, October 21, 2019 6:39 AM
    Moderator
  • I want to change the font-size and margin of the 'Text Field'

    But if add the in the below CSS its not reflecting.

    .desc1{
    @include ms-font-l;
    @include ms-fontColor-white;
    width: 600px;
    font-size: 17px !important;
    }

     How can in crease the font-size?

    Monday, October 21, 2019 6:43 AM
  • Hi Rajesh,

    Please refer to the solution from here:

    https://social.msdn.microsoft.com/Forums/en-US/9a2fee33-9918-47ad-b56f-182d0687c0f9/modifying-the-css-file-in-quotreactsearchrefinersquot-webpart?forum=sharepointdevelopment

    And modify the custom.css file with css below.

    #txtPurpose{     
        font-size: 17px !important;
    }

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, October 21, 2019 7:54 AM
    Moderator