Visual Builder

Get Involved. Join the Conversation.

Topic

    Rob Raftery
    How to hide an input text component?
    Topic posted September 13, 2019 by Rob RafteryRed Ribbon: 250+ Points 
    20 Views, 1 Comment
    Title:
    How to hide an input text component?
    Content:

    My apologies if this sounds like a really stupid question, but how can you hide a label and/or input text component?  Below is simple code for my page.  as you can see, I'm simply using the "hidden" attribute on the label, input text and button.  The only one that is working is the button.

    I know I can probably use oj-bind-if to do the same thing.  However, components shift around if the bind value is false.  Ideally, what I would like to happen is simply hide the component from its exact position in the page and leave the rest of the page layour intact.

    So my questions:

    1. Is "hidden" supposed to work on label and/or text input components?
    2. Is there a way to hide a component and leave the rest of the page layout intact?

    \<div class="oj-flex">
        <oj-label id="oj-label--1691438836-2" for="oj-input-text--1691438836-2" class="oj-flex-item oj-sm-12 oj-md-2" hidden="true">Web Order ID</oj-label>
        <oj-input-text id="oj-input-text--1691438836-2" class="oj-flex-item oj-sm-12 oj-md-1" value="{{ $variables.WebOrderID }}" hidden="true"></oj-input-text>
    </div>
    <div class="oj-flex">
        <oj-label id="oj-label--1691438836-3" for="oj-input-text--1691438836-3" class="oj-flex-item oj-sm-12 oj-md-2">Order ID</oj-label>
        <oj-input-text id="oj-input-text--1691438836-3" class="oj-flex-item oj-sm-12 oj-md-1" value="{{ $variables.OrderID }}"></oj-input-text>
    </div>
    <div class="oj-flex">
        <div class="oj-flex-item oj-sm-12 oj-md-1">
            <oj-button id="oj-button--1691438836-1" on-oj-action="[[$listeners.ojButton16914388361OjAction]]" hidden="true">Submit</oj-button>
        </div>
    </div>

    Comment