Open In App

React.js Blueprint Popover2 Style Sizing

Improve
Improve
Like Article
Like
Save
Share
Report

React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building complex data-dense interfaces for desktop applications.

ReactJs Blueprint Popover2 component makes the content associated with a target element appear floating on the screen. 

The ReactJs Blueprint Popover2 component has a max-width by default but not anything as max-height it defines the height of the popover on the basis of the content added. We can change the height of the popover by creating our own class in which we can define the max height and can also make it scrollable.

Syntax:

<Popover2 content={div className="GFG">...</div>}>
    ...
</Popover2>

// CSS Styles
.GFG {
    ...
}

Prerequisite:

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t then install create-react-app globally by using the command npm -g create-react-app or can install locally by npm i create-react-app.

npm create-react-app project

Step 2: After creating your project folder (i.e. project), move to it using the following command.

cd project

Step 3: Now install the dependency by using the following command:

npm install @blueprintjs/core
npm install @blueprintjs/popover2

Project Structure: It will look like this:

 

Example 1: We are importing the Popover2  Component from “@blueprintjs/popover2” and the Button Component from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”.

To the Popover2 Component in the content, we have created a div and added className custom. We have added the name of the countries starting with ‘A’ as the content.

App.js




import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
import "@blueprintjs/core/lib/css/blueprint.css";
  
function App() {
    return (
        <div className="App" style={{ margin: "10px" }}>
            <h3> React Blueprint Popover2 Style Sizing</h3>
            <div>
                <Popover2
                    content={
                        <div className="custom">
                            <h4>
                                List of Countries starting with{" "}
                                <span style={{ color: "green" }}>
                                    A
                                </span>:
                            </h4>
  
                            <ul>
                                <li value="Åland Islands">
                                 Åland Islands
                                </li>
                                <li value="Albania">
                                 Albania
                                </li>
                                <li value="Algeria">
                                 Algeria
                                </li>
                                <li value="American Samoa">
                                 American Samoa
                                </li>
                                <li value="Andorra">
                                 Andorra
                                </li>
                                <li value="Angola">
                                 Angola
                                </li>
                                <li value="Anguilla">
                                 Anguilla
                                </li>
                                <li value="Antarctica">
                                 Antarctica
                                </li>
                                <li value="Antigua and Barbuda">
                                 Antigua and Barbuda
                                </li>
                                <li value="Argentina">
                                 Argentina
                                </li>
                                <li value="Armenia">
                                 Armenia
                                </li>
                                <li value="Aruba">
                                 Aruba
                                </li>
                                <li value="Australia">
                                 Australia
                                </li>
                                <li value="Austria">
                                 Austria
                                </li>
                            </ul>
                        </div>
                    }
                    renderTarget={({ isOpen, ref, 
                     ...targetProps }) => (
                        <Button
                            {...targetProps}
                            elementRef={ref}
                            text="Click me"
                            style={{ marginTop: "40px" }}
                        />
                    )}
                />
            </div>
        </div>
    );
}
  
export default App;


Creating the className custom and adding margin-top,max-height, and overflow-y to it.

index.css




body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont,
        "Segoe UI", "Roboto", "Oxygen",
        "Ubuntu", "Cantarell", "Fira Sans"
        "Droid Sans", "Helvetica Neue",
        sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}
  
code {
    font-family: source-code-pro, Menlo, Monaco, 
        Consolas, "Courier New",
        monospace;
}
  
/* Custom class */
.custom {
    margin-top: 30px;
    max-height: 85px;
    overflow-y: auto;
}


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

 

Example 2: In this example, we are changing the content to the list of fruits and adding the className custom to the div.

App.js




import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
import "@blueprintjs/core/lib/css/blueprint.css";
  
function App() {
    return (
        <div className="App" style={{ margin: "10px" }}>
            <h3> React Blueprint Popover2 Style Sizing</h3>
  
            <div>
                <Popover2
                    content={
                        <div className="custom">
                            <h4>List of Fruits :</h4>
  
                            <ol>
                                <li value="Apple"
                                 Apple
                                </li>
                                <li value="Pear">
                                 Pear
                                </li>
                                <li value="Raspberry">
                                 Raspberry
                                </li>
                                <li value="Blackberry">
                                 Blackberry
                                </li>
                                <li value="Strawberry">
                                 Strawberry
                                </li>
                                <li value="Tomato">
                                 Tomato
                                </li>
                                <li value="Peach">
                                 Peach
                                </li>
                                <li value="Cherry"
                                 Cherry 
                                </li>
                            </ol>
                        </div>
                    }
                    renderTarget={({ isOpen, ref, 
                        ...targetProps }) => (
                        <Button
                            {...targetProps}
                            elementRef={ref}
                            text="Click me"
                            intent="primary"
                            style={{ marginTop: "40px" }}
                        />
                    )}
                />
            </div>
        </div>
    );
}
  
export default App;


Creating the className custom and adding max-width,margin-top,max-height, and overflow-y to it.

index.css




body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 
        "Segoe UI", "Roboto", "Oxygen",
        "Ubuntu", "Cantarell", "Fira Sans"
        "Droid Sans", "Helvetica Neue",
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
  
code {
    font-family: source-code-pro, Menlo, Monaco,
        Consolas, "Courier New", monospace;
}
  
/* Custom class */
.custom {
    max-width: 120px;
    margin-top: 30px;
    max-height: 95px;
    overflow-y: auto;
}


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

 

Reference: https://blueprintjs.com/docs/#popover2-package/popover2.sizing



Last Updated : 25 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads