none
Modifying the 'CSS' file in "react-search-refiners" webpart RRS feed

Answers

  • Hi Rajesh,

    Please follow the steps below.

    1.Create a folder "Styles" in the path "react-search-refiners\spfx\src\webparts\searchBox\components".

    2.Create a custom.css file with the style below in this new folder.

    .ms-TextField-fieldGroup{
    	height: 40px !important;
    }

    3.Open the file "SearchBoxContainer.tsx" and add the code below and save it.

    require('../Styles/custom.css');

    4.Run gulp serve again.

    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.

    Wednesday, October 2, 2019 2:02 AM
    Moderator

All replies

  • Hi Rajesh,

    the file that your updating is generated during the build process. when you run gulp serve command the first thing that the SharePoint Framework will do is to transpile your source files from the src folder into intermediate files and at the end everything will be put inside lib folder. The content of the lib folder will not be the part of final bundle.

    The file SearchBoxWebPart.module.css is the part of lib folder and your not making change in the right place that is inside SearchBoxWebPart.module.scss. update the scss file inside the source folder as per below screenshot and run gulp serve again.

    after gulp serve go inside the lib folder and check the content of file SearchBoxWebPart.module.css-


    K Mohit

    Monday, September 30, 2019 10:03 PM
  • Hi Rajesh,

    Please make sure you modify the SearchBoxWebPart.module.scss file in the path "react-search-refiners\spfx\src\webparts\searchBox\components". I suggest you use Visual Studio Code tool to modify it, and save it after modify. 

    And run the "gulp serve" command.

    In browser, please "Ctrl+F5" to refresh the page, and then check if it works.

    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.

    Tuesday, October 1, 2019 2:38 AM
    Moderator
  • Hi Mohit i applied the above change its working as shown in the below image.

    Its applying only like that i need the white color to be applied on full search  box.

    How can we achieve this?

    My SearchBoxWebPart.module.scss code:

    .searchBox {
    position: relative;
    background-color: white;
    .errorMessage {
    margin-bottom: 10px;
    }
    *::-ms-clear {
    display: none;
    }
    .suggestionItem {
    padding: 10px;
    }
    .searchFieldGroup {
    display: flex;
    position: relative;
    background-color: white !important;
    .searchTextField {
    width: 100%;
    height:40px;
    background-color: white;
    }
    .searchBtn {
    position: absolute;
    right: 0;
    }
    .clearBtn {
    position: absolute;
    right: 32px;
    }
    }
    .suggestionPanel {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    z-index: 1;
    background-color: #ffffff;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    }
    .selected {
    color: #ffffff;
    background-color: '[theme:themeDarker, default:#0078d7]';
    }
    }
    .parentStackingCtx {
    position: relative;
    z-index: 1;
    }

    Tuesday, October 1, 2019 9:39 AM
  • Hi Dennsi i applied the above change its working as shown in the below image.

    Its applying only like that i need the white color to be applied on full search  box.

    How can we achieve this?

    My SearchBoxWebPart.module.scss code:

    .searchBox {
    position: relative;
    background-color: white;
    .errorMessage {
    margin-bottom: 10px;
    }
    *::-ms-clear {
    display: none;
    }
    .suggestionItem {
    padding: 10px;
    }
    .searchFieldGroup {
    display: flex;
    position: relative;
    background-color: white !important;
    .searchTextField {
    width: 100%;
    height:40px;
    background-color: white;
    }
    .searchBtn {
    position: absolute;
    right: 0;
    }
    .clearBtn {
    position: absolute;
    right: 32px;
    }
    }
    .suggestionPanel {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    z-index: 1;
    background-color: #ffffff;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    }
    .selected {
    color: #ffffff;
    background-color: '[theme:themeDarker, default:#0078d7]';
    }
    }
    .parentStackingCtx {
    position: relative;
    z-index: 1;
    }

    Tuesday, October 1, 2019 9:40 AM
  • Hi Rajesh,

    By default, the background color of the search box is white.

    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.

    • Proposed as answer by KumarMohiT Tuesday, October 1, 2019 12:07 PM
    • Unproposed as answer by KumarMohiT Tuesday, October 1, 2019 12:07 PM
    • Proposed as answer by KumarMohiT Tuesday, October 1, 2019 12:07 PM
    Tuesday, October 1, 2019 9:53 AM
    Moderator
  • How to increase the height?

    Tuesday, October 1, 2019 9:55 AM
  • How to increase the height?

    Tuesday, October 1, 2019 9:56 AM
  • Hi Rajesh,

    Please follow the steps below.

    1.Create a folder "Styles" in the path "react-search-refiners\spfx\src\webparts\searchBox\components".

    2.Create a custom.css file with the style below in this new folder.

    .ms-TextField-fieldGroup{
    	height: 40px !important;
    }

    3.Open the file "SearchBoxContainer.tsx" and add the code below and save it.

    require('../Styles/custom.css');

    4.Run gulp serve again.

    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.

    Wednesday, October 2, 2019 2:02 AM
    Moderator
  • Thank Dennis its working fine.

    How can we achieve auto population of the search in this react webpart.

    React Webpart:

    I need the above search looks like below:

    Thursday, October 3, 2019 9:34 AM
  • Hi Rajesh,

    Thanks for marking my reply as answer. I’m pleased to know that the information is helpful to you. If you have new question, please post it in a new thread, it would make others easier to focus on one question in one single thread and it will benefit other community members who stuck with the same question.

    Here I will provide a brief summary of this post for your information.

    Issue Symptom:

    Changing the height using CSS of the search box in "react-search-refiners" webpart not working.

    Solution:

    Create a custom CSS with style below.

    .ms-TextField-fieldGroup{
    	height: 40px !important;
    }
    


    And reference the css file using code below in SearchBoxContainer.tsx file.

    require('../Styles/custom.css');

    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.

    Friday, October 4, 2019 1:13 AM
    Moderator