• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Title of two modules in one line

Scheduled Pinned Locked Moved Unsolved Troubleshooting
10 Posts 3 Posters 975 Views 3 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • C Offline
    codac
    last edited by Dec 12, 2022, 3:36 PM

    Hi guys,

    I’m using two modules (MMM-DWD-WarnWeather and the default Calendar Module).
    Somehow the titles of both modules are in one line, but the content is undeaneath each other.
    What can I do (CSS?) in order to get the title of the calendar Module underneath the content of the MMM-DWD-WarnWeather module?

    I’ve tried it with padding-bottom, but it just shifts the MMM-DWD-WarnWeather content further down, the title remains where it is.

    Any suggestions?Screenshot 2022-12-12 163342.jpg

    S 1 Reply Last reply Dec 12, 2022, 5:18 PM Reply Quote 0
    • S Away
      sdetweil @codac
      last edited by Dec 12, 2022, 5:18 PM

      @codac wherever are they located, position?

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      C 1 Reply Last reply Dec 12, 2022, 5:22 PM Reply Quote 0
      • C Offline
        codac @sdetweil
        last edited by Dec 12, 2022, 5:22 PM

        @sdetweil both are at top_right

        W 1 Reply Last reply Dec 12, 2022, 9:17 PM Reply Quote 0
        • W Offline
          wishmaster270 Module Developer @codac
          last edited by Dec 12, 2022, 9:17 PM

          @codac Hi, i think the problem is caused of the CSS settings of MMM-DWD-WarnWeather.
          I already forked the module and tried to change some things. Currently i do not have time to make a proper pull request to get the changes merged to the original module but i will do this in the future.

          If you want to give it a try you can use my fork and following settings in your custom.css:

          .MMM-DWD-WarnWeather .wrapper {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 320px;
            gap: 5px;
          }
          
          .MMM-DWD-WarnWeather .warning {
            width: 100%;
            display: flex;
            flex-direction: row;
            gap: 10px;
            margin-bottom: 0px;
          }
          
          .MMM-DWD-WarnWeather .status {
            margin-top: 0px;
          }
          
          .MMM-DWD-WarnWeather .description {
            padding-left: 0px;
            margin-left: 0px;
          }
          
          .MMM-DWD-WarnWeather .small-icon{
            float: unset;
            zoom: unset;
            -moz-transform: unset;
            -moz-transform-origin: unset;
            width: 46px;
            height: 46px;
            position: relative;
          }
          
          C 1 Reply Last reply Dec 13, 2022, 8:18 AM Reply Quote 0
          • C Offline
            codac @wishmaster270
            last edited by Dec 13, 2022, 8:18 AM

            @wishmaster270 said in Title of two modules in one line:

            .MMM-DWD-WarnWeather .wrapper {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 320px;
            gap: 5px;
            }

            .MMM-DWD-WarnWeather .warning {
            width: 100%;
            display: flex;
            flex-direction: row;
            gap: 10px;
            margin-bottom: 0px;
            }

            .MMM-DWD-WarnWeather .status {
            margin-top: 0px;
            }

            .MMM-DWD-WarnWeather .description {
            padding-left: 0px;
            margin-left: 0px;
            }

            .MMM-DWD-WarnWeather .small-icon{
            float: unset;
            zoom: unset;
            -moz-transform: unset;
            -moz-transform-origin: unset;
            width: 46px;
            height: 46px;
            position: relative;
            }

            Hi Tom, this totally worked out and fixed the issue.
            Do you have one more hint about shifting the text/icon more to the right?
            dwd_warn_weather.PNG

            W 1 Reply Last reply Dec 13, 2022, 8:30 AM Reply Quote 1
            • W Offline
              wishmaster270 Module Developer @codac
              last edited by Dec 13, 2022, 8:30 AM

              @codac Hi and perfect.
              You can try replacing

              align-items: flex-start;
              

              with

              align-items: flex-end;
              
              C 1 Reply Last reply Dec 13, 2022, 8:53 AM Reply Quote 0
              • C Offline
                codac @wishmaster270
                last edited by Dec 13, 2022, 8:53 AM

                @wishmaster270 I did change it the way you suggested, but it wont change anything unfortunately.

                W 1 Reply Last reply Dec 13, 2022, 6:22 PM Reply Quote 0
                • W Offline
                  wishmaster270 Module Developer @codac
                  last edited by Dec 13, 2022, 6:22 PM

                  @codac Hi,
                  i setup a quick dev environment to test the possibilities. You are right. Please keep the align-items option set to flex-start.

                  There are different ways to move the warnings to the right. Depending what you want it to be you can either set:

                  1: Reduce the module width

                  .MMM-DWD-WarnWeather .wrapper {
                    width: 280px;
                  }
                  

                  Which will look like
                  Screenshot 1
                  DWD-ReducedWidth.png

                  2: Only the description to the right

                  .MMM-DWD-WarnWeather .description {
                    width: 100%;
                    text-align: right;
                  }
                  

                  Which will look like
                  Screenshot 2
                  DWD-OnlyTextRight.png

                  3: Or you can move the warnings totally to the right

                  .MMM-DWD-WarnWeather .warning {
                    justify-content:flex-end; 
                  }
                  

                  Which looks like
                  Screenshot 3
                  DWD-ItemsRight.png

                  C 1 Reply Last reply Dec 19, 2022, 9:13 AM Reply Quote 0
                  • C Offline
                    codac @wishmaster270
                    last edited by Dec 19, 2022, 9:13 AM

                    @wishmaster270 I prefer the third version. I’ve tried a couple of combinations but none of them led to the requested result.
                    What am I missing?

                    From my understanding I would suggest this CSS code (which doesnt work this way):

                    .MMM-DWD-WarnWeather .wrapper {
                      display: flex;
                      flex-direction: column;
                      align-items: flex-start;
                      width: 320px;
                      gap: 5px;
                    }
                    
                    .MMM-DWD-WarnWeather .warning {
                      justify-content:flex-end; 
                    }
                    
                    .MMM-DWD-WarnWeather .status {
                      margin-top: 0px;
                    }
                    
                    .MMM-DWD-WarnWeather .description {
                      padding-left: 0px;
                      margin-left: 0px;
                    }
                    
                    .MMM-DWD-WarnWeather .small-icon{
                      float: unset;
                      zoom: unset;
                      -moz-transform: unset;
                      -moz-transform-origin: unset;
                      width: 46px;
                      height: 46px;
                      position: relative;
                    }
                    
                    W 1 Reply Last reply Dec 20, 2022, 5:27 PM Reply Quote 0
                    • W Offline
                      wishmaster270 Module Developer @codac
                      last edited by Dec 20, 2022, 5:27 PM

                      @codac

                      Hi,

                      sorry for my unprecise description. I meant adding the the justify-content: flex-end; additionally. The whole CSS settings need to look like the following:

                      .MMM-DWD-WarnWeather .wrapper {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        width: 320px;
                        gap: 5px;
                      }
                      
                      .MMM-DWD-WarnWeather .warning {
                        width: 100%;
                        display: flex;
                        flex-direction: row;
                        gap: 10px;
                        margin-bottom: 0px;
                        justify-content: flex-end;
                      }
                      
                      .MMM-DWD-WarnWeather .status {
                        width: 100%;
                        text-align: right;
                        margin-top: 0px;
                      }
                      
                      .MMM-DWD-WarnWeather .description {
                        padding-left: 0px;
                        margin-left: 0px;
                      }
                      
                      .MMM-DWD-WarnWeather .small-icon{
                        float: unset;
                        zoom: unset;
                        -moz-transform: unset;
                        -moz-transform-origin: unset;
                        width: 46px;
                        height: 46px;
                        position: relative;
                      }
                      
                      1 Reply Last reply Reply Quote 0
                      • 1 / 1
                      1 / 1
                      • First post
                        4/10
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy