Balsamiq Community Discussion

iPad, Iphone, Smartphone Containers - Borders

I am designing some wireframes to be on an IPAD.
How to remove or hide the borders that appear all around the iPad / iPhone containers?
I only want to diplay the small bar displying thhe wifi, time and so on…

There isn’t a way to hide the chrome from the iPhone or iPad control, @simple45.

However, you can recreate the status bar using icons and a label. I’ve quickly wireframed a status bar that you can import by copying this code, going to File > Import > Wireframe JSON, and then pasting the code into the box.

{
"mockup": {
    "controls": {
        "control": [
            {
                "ID": "6",
                "typeID": "__group__",
                "zOrder": "0",
                "measuredW": "199",
                "measuredH": "21",
                "w": "199",
                "h": "21",
                "x": "50",
                "y": "254",
                "children": {
                    "controls": {
                        "control": [
                            {
                                "ID": "0",
                                "typeID": "Icon",
                                "zOrder": "0",
                                "measuredW": "16",
                                "measuredH": "16",
                                "x": "164",
                                "y": "0",
                                "properties": {
                                    "icon": {
                                        "ID": "wifi",
                                        "size": "xsmall"
                                    }
                                }
                            },
                            {
                                "ID": "1",
                                "typeID": "Icon",
                                "zOrder": "1",
                                "measuredW": "16",
                                "measuredH": "16",
                                "x": "183",
                                "y": "0",
                                "properties": {
                                    "icon": {
                                        "ID": "battery-full",
                                        "size": "xsmall"
                                    }
                                }
                            },
                            {
                                "ID": "2",
                                "typeID": "Icon",
                                "zOrder": "2",
                                "measuredW": "16",
                                "measuredH": "16",
                                "x": "144",
                                "y": "0",
                                "properties": {
                                    "icon": {
                                        "ID": "signal",
                                        "size": "xsmall"
                                    }
                                }
                            },
                            {
                                "ID": "3",
                                "typeID": "Label",
                                "zOrder": "3",
                                "measuredW": "31",
                                "measuredH": "21",
                                "x": "0",
                                "y": "0",
                                "properties": {
                                    "text": "9:32 "
                                }
                            }
                        ]
                    }
                }
            }
        ]
    },
    "attributes": {
        "name": "New Wireframe 1",
        "order": 1000000,
        "parentID": null
    },
    "resourceID": "25614E64-3565-44A0-85D0-6F4658F96BE8",
    "mockupH": "21",
    "mockupW": "199",
    "measuredW": "249",
    "measuredH": "275",
    "version": "1.0"
}

}

Let me know if that helps :slight_smile:

Edit: Make sure you copy that last } that fell outside the code box. For some reason, discourse always drops it.

Hello @simple45,

Unfortunately the iPhone and iPad controls in the UI Library are fixed - it’s not possible to customize them as such.

But you have a couple of other options to achieve the effect you are looking for.

  1. You could grab an image of the bar and add it to your project as an Image asset. Like this:

    The downside of this approach is that the image won’t resize well but, if you have one - or maybe just a few, standard sizes you need to use, it would be totally workable.

  2. You could create a bar that looks exactly the way you want it to from other controls (e.g. Rectangle, Icon, etc.). Once you have a bar you like, you can Group the controls and, optionally, convert them into a Symbol for convenient re-use.

    It’s a little more work up front but this is probably the better, more flexible approach.