Adapted the display with the size of the page

[Yenzago]

Describe the bug

I want to adapted the button with the size of the page but i can't find the wat to do it.

To Reproduce

id: serviceguard-ticket
type: PageHeaderMenu
properties:
  title: Serviceguard
  content:
    style:
      background: '#f5f5f5'
      padding: 0
layout:
  contentGutter: 16

blocks:
  - id: main_layout
    type: Box
    layout:  
      contentGutter: 6
    blocks:
      - id: header
        type: Box
        properties:
          layout:
            span: 24
            contentGutter: 6
          style: 
            color: '#f5f5f5'
            padding: 0

        blocks: 
          - id: first_button
            type: Button
            properties:
              hideTitle: true
              variant: "contained"
              type: "primary"
              size: "large"
              icon: "AiFillAppstore"
            layout: 
              flex: 0 1 auto
          - id: logo
            type: Img
            properties:
              src: "/logo-serviceguard.ico"
              width: "80px"
              height: "80px"
            layout: 
              flex: 0 1 auto
            style: 
              marginLeft: "10px"
          - id: selector_your_work
            type: Selector
            properties:
              label: 
                disabled: true
              placeholder: "Your work"
              bordered: false
              title: Your work
              type: "primary"
              size: "large"
            style:
              marginLeft: "10px"
            layout: 
              flex: 0 1 auto
          - id: selector_projects
            type: Selector
            properties:
              label: 
                disabled: true
              placeholder: "Projects"
              bordered: false
              title: Projects
              type: "primary"
              size: "large"
            style:
              marginLeft: "10px"
            layout: 
              flex: 0 1 auto
          - id: selector_filters
            type: Selector
            properties:
              label: 
                disabled: true
              placeholder: "Filters"
              bordered: false
              title: Filters
              type: "primary"
              size: "large"
            style:
              marginLeft: "10px"
            layout: 
              flex: 0 1 auto
          - id: selector_dashboards
            type: Selector
            properties:
              label: 
                disabled: true
              placeholder: "Dashboards"
              bordered: false
              title: Dashboards
              type: "primary"
              size: "large"
            style:
              marginLeft: "10px"
            layout: 
              flex: 0 1 auto
          - id: selector_teams
            type: Selector
            properties:
              label: 
                disabled: true
              placeholder: "Teams"
              bordered: false
              title: Teams
              type: "primary"
              size: "large"
            style:
              marginLeft: "10px"
            layout: 
              flex: 0 1 auto
          - id: button_assets
            type: Button
            properties:
              color: "#FCCCC1"
              title: "Assets"
              variant: "contained"
              type: "primary"
              size: "large"
            style:
              marginLeft: "10px"
            layout: 
              flex: 0 1 auto
          - id: selector_app
            type: Selector
            properties:
              label: 
                disabled: true
              placeholder: "App"
              bordered: false
              title: App
              type: "primary"
              size: "large"
            style:
              marginLeft: "10px"
            layout: 
              flex: 0 1 auto
          - id: button_create_ticket
            type: Button
            properties:
              title: "Create"
              variant: "contained"
              type: "primary"
              size: "large"
            style:
              marginLeft: "10px"
            layout: 
              flex: 0 1 auto
          - id: search_input
            type: TextInput
            layout:
              flex: 0 1 auto
            style:
              marginLeft: "450px"
            properties:
              label: 
                disabled: true
              placeholder: "Search"
              bordered: false
              title: Search
              type: "primary"
              size: "large"
              suffixIcon: "AiOutlineSearch"
          - id: button_notification
            type: Button
            properties:
              hideTitle: true
              variant: "contained"
              type: "primary"
              size: "large"
              icon: "AiOutlineBell"
              shape: circle
            style:
              marginLeft: "10px"
            layout: 
              flex: 0 1 auto
          - id: button_help
            type: Button
            properties:
              hideTitle: true
              variant: "contained"
              type: "primary"
              size: "large"
              icon: "AiOutlineQuestionCircle"
              shape: circle
            style:
              marginLeft: "10px"
            layout: 
              flex: 0 1 auto
          - id: button_parameters
            type: Button
            properties:
              hideTitle: true
              variant: "contained"
              type: "primary"
              size: "large"
              icon: "AiOutlineSetting"
              shape: circle
            style:
              marginLeft: "10px"
            layout: 
              flex: 0 1 auto
          - id: avatar_profile
            type: Avatar
            properties:
              color: "#f56a00"
              content: EY
              size: "large"
            style:
              marginLeft: "10px"
            layout: 
              flex: 0 1 auto




      - id: left_column
        type: Box
        properties:
        style:
          placement: "left"
        layout:
          
          span: 3
          contentGutter: 6
        blocks:
          - id: block_id
            type: MobileMenu
            properties:
              selectedKeys: []
              links:
                - id: all_tickets_open
                  type: MenuLink
                  pageId: tickets
                  properties:
                    title: All open tickets
                - id: all_open_best_effort
                  type: MenuLink
                  pageId: tickets
                  properties:
                    title: All open best effort tickets
                - id: all_my_tickets
                  type: MenuLink
                  pageId: tickets
                  properties:
                    title: All my tickets
                - id: all_tickets
                  type: MenuLink
                  pageId: tickets
                  properties:
                    title: All tickets
                - id: all_tickets_Crowdstrike
                  type: MenuLink
                  pageId: tickets
                  properties:
                    title: All tickets (Crowdstrike)
                - id: all_tickets_Trendmicro
                  type: MenuLink
                  pageId: tickets
                  properties:
                    title: All tickets (Trendmicro)
                - id: all_tickets_Cybereason
                  type: MenuLink
                  pageId: tickets
                  properties:
                    title: All tickets (Cybereason)
                - id: all_tickets_Cortex
                  type: MenuLink
                  pageId: tickets
                  properties:
                    title: All tickets (Cortex)
                - id: all_tickets_Resolved
                  type: MenuLink
                  pageId: tickets
                  properties:
                    title: All tickets (Resolved)
                - id: autres
                  type: MenuGroup
                  pageId: tickets
                  properties:
                    title: Autres
                    icon: AiOutlineLayout
                  links: 
                    - id: all_canceled_tickets
                      type: MenuLink
                      pageId: tickets
                      properties:
                        title: All canceled tickets
                    - id: tickets_by_customer
                      type: MenuLink
                      pageId: tickets
                      properties:
                        title: Tickets by customer
                    - id: intelcia_tickets_open
                      type: MenuLink
                      pageId: tickets
                      properties:
                        title: Tickets Intelcia open
                    - id: five9s
                      type: MenuLink
                      pageId: tickets
                      properties:
                        title: five9s
                    - id: all_sfr_tickets
                      type: MenuLink
                      pageId: tickets
                      properties:
                        title: All SFR tickets
                - id: manage_queue
                  type: MenuLink
                  pageId: tickets
                  properties:
                    icon : AiFillSetting
                    title: manage the queue 
                - id: give_opinion
                  type: MenuLink
                  pageId: tickets
                  properties:
                    icon : AiFillStar
                    title: give your opinion
              toggleMenuButton:
                icon: AiFillCaretRight


      - id: middle_column
        type: Box
        properties:
         style:
            maxHeight: "800px"
            overflowY: auto
            overflowX : hidden
        layout:
          span: 14
          contentGutter: 6
        blocks:
          - id: button_box_top 
            type: Box
            layout:
              display: "flex"
              justifyContent: "flex-end"
            blocks:
              - id: back_button
                type: Button
                properties:
                  title: Back
                  variant: "contained"
                  color: "primary"
                  size: "large"
                  icon: "AiOutlineArrowLeft"
                layout:
                  flex: 0 1 auto
                style:
                    marginBottom: "10px"
              - id: button_type_ticket
                type: Button
                properties:
                  hideTitle: true
                  title: Type de ticket
                  variant: "contained"
                  color: "primary"
                  size: "large"
                  icon: "AiOutlinePlus"
                style:
                    marginLeft: "10px"
                layout:
                  flex: 0 1 auto 
              - id: issue_link
                type: Button
                properties:
                  title: "HOR-999"
                  variant: "contained"
                  color: "primary"
                  size: "large"
                  onClick:
                    type: Url
                    parameters:
                      newTab: true
                      url: "https://google.com"
                style:
                    marginLeft: "10px"
                layout:
                  flex: 0 1 auto        
          - _ref: pages/serviceguard/components/description.yaml

      - id: right_column
        type: Box
        properties:
          style:
            maxHeight: "800px"
            overflowY: "auto"
            overflowX: "hidden"
        layout:
          display: "flex"
          span: 7
          contentGutter: 16
        blocks:
          - id: buttons_container
            type: Box
            layout:

            properties:
              style:
                width: "100%" 
            blocks:
              - id: button1
                type: Button
                properties:
                  hideTitle: true
                  icon: "HiSpeakerphone"
                layout:
                  flex: 0 1 auto
                  
              - id: button2
                type: Button
                properties:
                  hideTitle: true
                  icon: "FaRegEye"
                layout:
                  flex: 0 1 auto
                  
              - id: button3
                type: Button
                properties:
                  hideTitle: true
                  icon: "FaRegThumbsUp"
                layout:
                  flex: 0 1 auto
                  
              - id: button4
                type: Button
                properties:
                  hideTitle: true
                  icon: "AiOutlineSearch"
                layout:
                  flex: 0 1 auto
                
          - id: status_selector_container
            type: Box
            layout:
              display: "flex"
              justifyContent: "flex-start"
            blocks:
              - id: Status
                type: Selector
                layout:
                  span: 12
                properties:
                  label: 
                    disabled: true
                  options:
                    - value: "option1"
                      label: "Closed"
                    - value: "option2"
                      label: "Canceled"
                    - value: "option3"
                      label: "In progress"
                    - value: "option4"
                      label: "Pending"
              - id: Action
                type: Selector
                layout:
                  span: 12
                properties:
                  label:
                    disabled: true
                  options:
                    - value: "a"
                      label: "Option A"
                    - value: "b"
                      label: "Option B"
          - _ref: pages/serviceguard/components/panels.yaml

      this is my code 

Screenshots

i want like this :

I have this :

Lowdefy Version

lowdefy@4.0.0-alpha.37

Thank you

[Yenzago]

Hello still got the issue. Can someone have the response of the issue please ?

[Yenzago]

blocks:
- id: header
type: Box
properties:
layout:
span: 24
contentGutter: 6
style:
color: '#f5f5f5'
padding: 0

    blocks: 
     - _ref: pages/serviceguard/components/header.yaml

[Yenzago]

i have to _media in the header.yaml or in the block id: header

[Gervwyk]

Something like this: (have not tested, so might need some editing etc)

- id: page_1
   type: Box
   blocks:
     - id: header
       type: Box
       style:
          height: 90
       blocks:
          - id: logo
             type: Img
             layout:
               flex: 0 1 auto
             properties:
                 src: /logo-light-theme.png
                 height: 60
          - id: menu
             type: Menu
             layout:
                flex: 1 0 auto
             properties:
                mode: horizontal
                theme: light
                links:
                  _if:
                    test:
                      _lt:
                        - _media: width
                        - 768
                    then:
                      _menu: mobile
                    else: 
                      _menu: default
  - id: content
     type: Box
     blocks:
       ...
                  

See:
https://docs.lowdefy.com/menus
https://docs.lowdefy.com/_media
https://docs.lowdefy.com/Menu

[Yenzago]

okay thank you

[Yenzago]

oh i don't think we talk about the same things

[Yenzago]

I have 2 screens, one screen (bigger screen) which display like this :

and the other screen (smaller one) which display like this :

i want that the button is adapted according of the size of the screen

[Yenzago]

Still got this

i try this :

• id: search_input
  type: TextInput
  visible:
  _gt:
  - _media: width
  - 768
  layout:
  flex: 0 1 auto
  style:
  marginLeft: "450px"
  properties:
  label:
  disabled: true
  placeholder: "Search"
  bordered: false
  title: Search
  type: "primary"
  size: "large"
  suffixIcon: "AiOutlineSearch"
  • id: button_notification
    type: Button
    visible:
    _gt:
    - _media: width
    - 768
    properties:
    hideTitle: true
    variant: "contained"
    type: "primary"
    size: "large"
    icon: "AiOutlineBell"
    shape: circle
    style:
    marginLeft: "10px"
    layout:
    flex: 0 1 auto

[Yenzago]

Maybe how to put a condition to say that the 4 round button and the search text input start on the complete right side ?

[Gervwyk]

Using layout.flex in a way to build up the row and one growing container. The issue is that if the minimum content width of the elements are more than that of the container the flex will wrap.

So something like this:

- id: header
  type: Box
  blocks:
    - id: item_one_left
      type: Box
      layout: 
        flex: 0 1 auto
    - id: item_two_left
      type: Box
      layout: 
        flex: 0 1 auto
    - id: item_three_grow
      type: Box
      layout: 
        flex: 1 0 auto
    - id: item_four_right
      type: Box
      layout: 
        flex: 0 1 auto
    - id: item_five_right
      type: Box
      layout: 
        flex: 0 1 auto

Notice how item_three_grow will push the items to the right.

To solve the flex wrap problem, one option is to hide certain elements on mobile.

[Yenzago]

ok thanks i will try and let you know

[Yenzago]

It works thank you for the tips