Responsive widget on a responsive page

I have created a widget which provides preset buttons as a replacement for a slider element like this:

I am currently configuring my layout so that it can be used on a mobile phone. By setting width in column options the widget will get 100% of width when shown on a mobile phone. no problem so far.
Now I want to confige the widget itself so that the first column will get 100% of space and the rest of 4 buttons in sum also 100%.
Which styles or classes information do I need to provide? s.th. like class: col-xs-6?
I am not an CSS expert but willing to learn. I just need some starting information.

Probably a no-brainer for you guys esp.@RGroll and @DrRSatzteil :wink:

I am not completely sure what you want to achieve: by first column you mean the icon and the label? And the buttons are all in the second column? What do you mean by 100% width for both columns? If you want to have your column side by side they should have max width of 100% in total. Maybe you can post your widget code here and try to describe a bit more precise what you want your widget to look like at the end (or maybe give us a little sketch)?

thanks for your reply.
the widget consists of 5 columns (1st column is an oh-label-card, each of the 4 button is in its own column).
In the end it should look like this:
image
Basically a kind of “line-break” after the first column

Hey @Oliver2

is there a reason why you want to use columns here, instead of splitting up the informations in 2 rows?

I would also recommend to use rows instead of columns. Inn general you should then use something like:

class:

  • col-100
  • medium-50

Meaning: use 100% width in general, on screens with resolution 768px and above use 50% width. You can play around a bit to find what widths suit your needs best. See also here for framework7 documentation: Grid / Layout Grid | Framework7 Documentation

ok. My problem - I thought that was clear.
On a tablet it is one row (because of sufficient screen width).
When displaying on a mobile phone it needs to be two rows.

I think that Flexbox is a better approach for your requirement. It’s tricky but definitely worth getting to know this for custom widget design IMHO.

I have not set any of the properties for growing and shrinking the actual buttons. If you want to add that you set the properties in the right column, in the above web page. Also the min-width and max-width on the actual button controls help stop things looking ugly.

Responsive layout: Small / Medium / Large screen size (really parent container):

For my own needs I have added a separate ON/OFF f7-segmented button as my Lightwave RF switches support turning on at the last set dimming level. These are ‘one way’ devices, so a toggle switch and a slider are no use (due to the lack of feedback from these devices).

You can obviously adapt the design to match your existing. The trick really is getting your head around the items that go into each block and which flex properties you need where. The display: inline-flex is also worth remembering :stuck_out_tongue_winking_eye:

Hope this helps. Andy

uid: lwave_multibutton
tags: []
props:
  parameters:
    - description: Title for the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Label for the buttons
      label: Label
      name: butLabel
      required: false
      type: TEXT      
    - context: item
      description: An item to control
      label: Contact Item
      name: itemContact
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: itemDimmer
      required: false
      type: TEXT
timestamp: Feb 21, 2021, 12:04:55 AM
component: f7-card
config:
  title: =props.title
slots:
  default:
    - component: f7-block
      config:
        style:
          display: flex
          flex-flow: row wrap
          justify-content: space-between
          align-items: centre
      slots:
        default:
          - component: f7-block
            config:
              style:
                display: inline-flex
                padding-left: 0px
                margin-right: 10px
                margin-bottom: 10px
            slots:
              default:
                - component: f7-icon
                  config:
                    material: lightbulb
                    style:
                      padding: 0px
                      margin: 0px
                - component: Label
                  config:
                    text: =props.butLabel
          - component: f7-block
            config:
              style:
                display: flex
                flex-flow: row wrap
                padding: 0px
            slots:
              default:
                - component: f7-segmented
                  config:
                    style:
                      margin-right: 10px
                  slots:
                    default:
                      - component: oh-button
                        config:
                          text: Off
                          round: true
                          outline: true
                          action: command
                          actionItem: =props.itemContact
                          actionCommand: OFF
                          style:
                            min-width: 70px
                      - component: oh-button
                        config:
                          text: On
                          round: true
                          fill: true
                          action: command
                          actionItem: =props.itemContact
                          actionCommand: ON
                          style:
                            min-width: 70px
                - component: f7-segmented
                  config:
                    style:
                      margin-top: 10px
                      margin-bottom: 10px
                  slots:
                    default:
                      - component: oh-button
                        config:
                          text: 25%
                          round: true
                          outline: true
                          action: command
                          actionItem: =props.itemDimmer
                          actionCommand: 25
                          style:
                            min-width: 70px
                      - component: oh-button
                        config:
                          text: 50%
                          round: true
                          outline: true
                          action: command
                          actionItem: =props.itemDimmer
                          actionCommand: 50
                          style:
                            min-width: 70px
                      - component: oh-button
                        config:
                          text: 75%
                          round: true
                          outline: true
                          action: command
                          actionItem: =props.itemDimmer
                          actionCommand: 75
                          style:
                            min-width: 70px
                      - component: oh-button
                        config:
                          text: 100%
                          round: true
                          outline: true
                          action: command
                          actionItem: =props.itemDimmer
                          actionCommand: 100
                          style:
                            min-width: 70px
2 Likes

Hi,

I’ve also had a look at this and it’s actually not quite straightforward.

While what @DrRSatzteil suggested is the right idea, I can’t quite follow “use rows instead of columns”. Using columns is IMHO correct and the classes suggested would apply to each of your column.
But note: Using those classes actually doesn’t work properly as the result will collide with what framework7-vue generates (it adds an extra col class which makes things break). I think the correct way would be like this:

component: f7-card
slots:
  default:
    - component: f7-row
      slots:
        default:
          - component: f7-col
            config:
              width: 100
              medium: 50
            slots:
              default:
                - component: Label
                  config:
                    text: Column1
          - component: f7-col
            config:
              width: 100
              medium: 50
            slots:
              default:
                - component: Label
                  config:
                    text: Column2

This results in two elements that are shown in one row on screens > 768px. On smaller screens it breaks down to two rows.
With documentation being available here.

So, in you case something like:

width  100 25 25 25 25
medium  40 15 15 15 15

on your 5 columns might get your desired result.

Please note that you have to be careful because that makes your widget react responsive to certain window widths instead of the available width your widget is used in (mostly cards). While this might work just fine in your case, the flexbox design from AndyMB is a more general solution, as it breaks elements down dependent on the available card size.

1 Like

many thanks Hubsi. Will try that soon.