Power Apps Exchange

Please login or click SIGN UP FOR FREE to create your PowerAppsUG account to join this user group.
 View Only

View My Drafts

Back to discussions
Expand all | Collapse all

How to make a responsive component with a search bar

  • 1.  How to make a responsive component with a search bar

    Posted Dec 07, 2022 01:18 PM
    I am trying to create a component with a search bar but I want it to be responsive, in addition to the search bar the component contains two images one for the logo and one for the user's profile picture, in addition to containing a label.
     
    The structure of the component is as follows:
    sebastianslz_0-1670367545298.png

    It is important to mention that the search bar is above an element made in HtmlText, which has the following code in its HtmlText property:

     
    "<div style='margin:10px;width:auto;height:60px;background-color:#000000;box-shadow:0 3px 10px 5px  #ccc; border-radius:25px'></div>"
    The output of the component is as follows:

    sebastianslz_1-1670369024922.png
    In the Screen section I have added a vertical container and a horizontal container, in the latter is where the component mentioned above has been added, additional in this Screen I have another vertical container called MainSectionContainer1.

    Its structure is as follows:

    sebastianslz_0-1670423328532.png
    From the Screen section I have selected the component and I have activated the Flexible Width property but even so I can not get it to be responsive, when I change the size of the window only a part of the search bar is visible and the profile picture and the label are not displayed, additional I have assigned a minimum width 200, I share the example of how it is currently visualized:

    sebastianslz_1-1670423359452.png

    I am looking for in making my application responsive is the search bar along with the logo and profile image are visible as follows:
    sebastianslz_3-1670423680988.png

    Is there someone who can guide me a little or tell me what configuration I should apply to see the responsive application?, I appreciate in advance.


    ------------------------------
    John Doe
    ------------------------------