Visual Builder

Get Involved. Join the Conversation.

Topic

    Guy Lior
    List view with search fieldAnswered
    Topic posted October 28, 2019 by Guy LiorBronze Medal: 1,250+ Points 
    18 Views, 2 Comments
    Title:
    List view with search field
    Summary:
    List view with search field
    Content:

    On mobile app, try to add input text field above a list view for filtering the list data.

    how to make the input field stuck and not scroll with the list ?

    Best Comment

    Shay Shmeltzer

    Try using the summary page template that we offer in the page creation wizard.

    The code generated is:

    <oj-ext-mobile-page-template id="page-template" page-title="Page Title">
      
      <div class="oj-flex-item oj-flex oj-sm-flex-direction-column oj-sm-flex-wrap-nowrap" style="height: 100%;">
        <div class="oj-flex-item oj-sm-flex-initial oj-flex oj-sm-flex-direction-column oj-sm-flex-wrap-nowrap" style="max-height: 25vh;">
          <div class="oj-panel oj-flex-items-pad oj-sm-flex-1">
            <div class="oj-flex">
              <!-- vb placeholder:dt.artifact-platform.create.placeholder.summary -->
            </div>
          </div>
        </div>
        <div class="oj-flex-item oj-sm-flex-1 oj-flex oj-sm-flex-direction-column oj-sm-flex-wrap-nowrap" style="overflow-y: auto; -webkit-overflow-scrolling: touch;-webkit-transform: translateZ(0);">
          <!-- vb placeholder:dt.artifact-platform.create.placeholder.content -->
        </div>
      </div>
    </oj-ext-mobile-page-template>

     

    Comment

     

    • Shay Shmeltzer

      Try using the summary page template that we offer in the page creation wizard.

      The code generated is:

      <oj-ext-mobile-page-template id="page-template" page-title="Page Title">
        
        <div class="oj-flex-item oj-flex oj-sm-flex-direction-column oj-sm-flex-wrap-nowrap" style="height: 100%;">
          <div class="oj-flex-item oj-sm-flex-initial oj-flex oj-sm-flex-direction-column oj-sm-flex-wrap-nowrap" style="max-height: 25vh;">
            <div class="oj-panel oj-flex-items-pad oj-sm-flex-1">
              <div class="oj-flex">
                <!-- vb placeholder:dt.artifact-platform.create.placeholder.summary -->
              </div>
            </div>
          </div>
          <div class="oj-flex-item oj-sm-flex-1 oj-flex oj-sm-flex-direction-column oj-sm-flex-wrap-nowrap" style="overflow-y: auto; -webkit-overflow-scrolling: touch;-webkit-transform: translateZ(0);">
            <!-- vb placeholder:dt.artifact-platform.create.placeholder.content -->
          </div>
        </div>
      </oj-ext-mobile-page-template>