ML
    • Recent
    • Categories
    • Tags
    • Popular
    • Users
    • Groups
    • Register
    • Login

    Center text inside a white box (Website question)

    Scheduled Pinned Locked Moved IT Discussion
    web design
    17 Posts 4 Posters 3.3k Views
    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.
    • stacksofplatesS
      stacksofplates @Sparkum
      last edited by stacksofplates

      @Sparkum said:

      Sorry faq should be live now:
      And it is a faq plugin. Will give more details when not on mobile
      Thanks

      Oh I see now. I only saw the 404 also. So you have the accordions set up, you just want the content to fill the accordion.

      It looks like the horizontal scrolling was from a bunch of non-breaking spaces (nbsp;). If you put in normally formatted text it looks ok. Just comment out the height of 121px and it should work.

      Edit: It looks like that height is hard coded in the html. If you add this to your css file it should work:

      .ui-accordion-content {
      height: auto !important;
      }

      web1.png

      1 Reply Last reply Reply Quote 1
      • W
        WingCreative
        last edited by

        Agreed that it's a combination of the inline styling and the non-breaking spaces used for the placeholder text. Oddly, the inline height was set to 120px when I checked it. Either way, setting "height: auto !important;" for the element will probably fix it as @johnhooks suggested.

        The question is how the inline styling got there to begin with... I am assuming this is probably due to some javascript in the accordion plugin? Is there any setting in the accordion plugin that is set to about 120, or any settings related to height? If the !important flag works then it might not be worth bothering with for now, but generally every !important flag in your stylesheet is a shortcut that doesn't really address whatever root issue you're wrestling with.

        stacksofplatesS 1 Reply Last reply Reply Quote 0
        • stacksofplatesS
          stacksofplates @WingCreative
          last edited by stacksofplates

          @WingCreative said:

          Agreed that it's a combination of the inline styling and the non-breaking spaces used for the placeholder text. Oddly, the inline height was set to 120px when I checked it. Either way, setting "height: auto !important;" for the element will probably fix it as @johnhooks suggested.

          The question is how the inline styling got there to begin with... I am assuming this is probably due to some javascript in the accordion plugin? Is there any setting in the accordion plugin that is set to about 120, or any settings related to height? If the !important flag works then it might not be worth bothering with for now, but generally every !important flag in your stylesheet is a shortcut that doesn't really address whatever root issue you're wrestling with.

          I just unchecked the 121px in developer tools, it did initially show that way for me also or are you saying that because it shows 121 in my screen?) If that's the case, maybe it's adjusting based on the resolution?. I used the !important just because it wouldn't override without it.

          For whatever reason, sometimes these plugins have hard coded sizes (and in px even) so it's fun to have to do your own styling on top of their styling.

          W 1 Reply Last reply Reply Quote 0
          • W
            WingCreative @stacksofplates
            last edited by

            @johnhooks said:

            @WingCreative said:

            Agreed that it's a combination of the inline styling and the non-breaking spaces used for the placeholder text. Oddly, the inline height was set to 120px when I checked it. Either way, setting "height: auto !important;" for the element will probably fix it as @johnhooks suggested.

            The question is how the inline styling got there to begin with... I am assuming this is probably due to some javascript in the accordion plugin? Is there any setting in the accordion plugin that is set to about 120, or any settings related to height? If the !important flag works then it might not be worth bothering with for now, but generally every !important flag in your stylesheet is a shortcut that doesn't really address whatever root issue you're wrestling with.

            I just unchecked the 121px in developer tools, it did initially show that way for me also. I used the !important just because it wouldn't override without it.

            For whatever reason, sometimes these plugins have hard coded sizes (and in px even) so it's fun to have to do your own styling on top of their styling.

            Same - I am hoping the inline styling is something that can be set in the plugin settings, but it's possible that it's just hard-coded in there. I thought it was odd that it was slightly different on my screen though, as if the inline style was being dynamically generated or something.

            I'll admit I have plenty of !important flags in my own stylesheets due to things like this, I mostly mention it as a potentially more elegant way to solve the issue if OP is interested in learning more about CSS.

            stacksofplatesS 1 Reply Last reply Reply Quote 1
            • stacksofplatesS
              stacksofplates @WingCreative
              last edited by stacksofplates

              @WingCreative said:

              @johnhooks said:

              @WingCreative said:

              Agreed that it's a combination of the inline styling and the non-breaking spaces used for the placeholder text. Oddly, the inline height was set to 120px when I checked it. Either way, setting "height: auto !important;" for the element will probably fix it as @johnhooks suggested.

              The question is how the inline styling got there to begin with... I am assuming this is probably due to some javascript in the accordion plugin? Is there any setting in the accordion plugin that is set to about 120, or any settings related to height? If the !important flag works then it might not be worth bothering with for now, but generally every !important flag in your stylesheet is a shortcut that doesn't really address whatever root issue you're wrestling with.

              I just unchecked the 121px in developer tools, it did initially show that way for me also. I used the !important just because it wouldn't override without it.

              For whatever reason, sometimes these plugins have hard coded sizes (and in px even) so it's fun to have to do your own styling on top of their styling.

              Same - I am hoping the inline styling is something that can be set in the plugin settings, but it's possible that it's just hard-coded in there. I thought it was odd that it was slightly different on my screen though, as if the inline style was being dynamically generated or something.

              I'll admit I have plenty of !important flags in my own stylesheets due to things like this, I mostly mention it as a potentially more elegant way to solve the issue if OP is interested in learning more about CSS.

              I edited the post but not in time :P. I wonder if it is dynamically changing based on resolution, but why a 1px difference? And why in px?

              W 1 Reply Last reply Reply Quote 0
              • W
                WingCreative @stacksofplates
                last edited by

                @johnhooks said:

                @WingCreative said:

                @johnhooks said:

                @WingCreative said:

                Agreed that it's a combination of the inline styling and the non-breaking spaces used for the placeholder text. Oddly, the inline height was set to 120px when I checked it. Either way, setting "height: auto !important;" for the element will probably fix it as @johnhooks suggested.

                The question is how the inline styling got there to begin with... I am assuming this is probably due to some javascript in the accordion plugin? Is there any setting in the accordion plugin that is set to about 120, or any settings related to height? If the !important flag works then it might not be worth bothering with for now, but generally every !important flag in your stylesheet is a shortcut that doesn't really address whatever root issue you're wrestling with.

                I just unchecked the 121px in developer tools, it did initially show that way for me also. I used the !important just because it wouldn't override without it.

                For whatever reason, sometimes these plugins have hard coded sizes (and in px even) so it's fun to have to do your own styling on top of their styling.

                Same - I am hoping the inline styling is something that can be set in the plugin settings, but it's possible that it's just hard-coded in there. I thought it was odd that it was slightly different on my screen though, as if the inline style was being dynamically generated or something.

                I'll admit I have plenty of !important flags in my own stylesheets due to things like this, I mostly mention it as a potentially more elegant way to solve the issue if OP is interested in learning more about CSS.

                I edited the post but not in time :P. I wonder if it is dynamically changing based on resolution, but why a 1px difference? And why in px?

                There's the mystery... without knowing which plugin is being used it's hard to know for sure.

                If @Sparkum were interested in digging deeper into this, he could try pasting some dummy paragraphs from a Lorem Ipsum generator into one of the blank boxes before setting the height flag. It might be built to dynamically set the height for each accordion item, but I don't understand why the plugin dev would do that versus a simple "height: 100%" setting.

                stacksofplatesS 1 Reply Last reply Reply Quote 1
                • stacksofplatesS
                  stacksofplates @WingCreative
                  last edited by

                  @WingCreative said:

                  @johnhooks said:

                  @WingCreative said:

                  @johnhooks said:

                  @WingCreative said:

                  Agreed that it's a combination of the inline styling and the non-breaking spaces used for the placeholder text. Oddly, the inline height was set to 120px when I checked it. Either way, setting "height: auto !important;" for the element will probably fix it as @johnhooks suggested.

                  The question is how the inline styling got there to begin with... I am assuming this is probably due to some javascript in the accordion plugin? Is there any setting in the accordion plugin that is set to about 120, or any settings related to height? If the !important flag works then it might not be worth bothering with for now, but generally every !important flag in your stylesheet is a shortcut that doesn't really address whatever root issue you're wrestling with.

                  I just unchecked the 121px in developer tools, it did initially show that way for me also. I used the !important just because it wouldn't override without it.

                  For whatever reason, sometimes these plugins have hard coded sizes (and in px even) so it's fun to have to do your own styling on top of their styling.

                  Same - I am hoping the inline styling is something that can be set in the plugin settings, but it's possible that it's just hard-coded in there. I thought it was odd that it was slightly different on my screen though, as if the inline style was being dynamically generated or something.

                  I'll admit I have plenty of !important flags in my own stylesheets due to things like this, I mostly mention it as a potentially more elegant way to solve the issue if OP is interested in learning more about CSS.

                  I edited the post but not in time :P. I wonder if it is dynamically changing based on resolution, but why a 1px difference? And why in px?

                  There's the mystery... without knowing which plugin is being used it's hard to know for sure.

                  If @Sparkum were interested in digging deeper into this, he could try pasting some dummy paragraphs from a Lorem Ipsum generator into one of the blank boxes before setting the height flag. It might be built to dynamically set the height for each accordion item, but I don't understand why the plugin dev would do that versus a simple "height: 100%" setting.

                  Ha I don't either. When I pasted the lorem ipsum content in, it didn't automatically resize, but that was through developer tools so it might do it correctly if you can refresh the page.

                  1 Reply Last reply Reply Quote 0
                  • S
                    Sparkum
                    last edited by

                    Hey guys.

                    Sorry for the delayed response playing with the kids before bed.

                    Thanks for all the advice! I'll give them all a try once the kiddos are asleep.

                    And to answer the question the plugin is "WP Awesome FAQ"

                    (Will add a link when on a comp)

                    1 Reply Last reply Reply Quote 0
                    • S
                      Sparkum
                      last edited by Sparkum

                      Hmm so finally got infront of a computer, started from the bottom and worked my way up through the solutions and the most annoying thing is the problem more so appears to be my "content content content..." eh? Copied 5 paragraphs for Lerem Ipsum; turned height to auto and bam everything was perfect.
                      It didnt even attempt to format to the right when I copied the paragraphs in....
                      So thats really strange and annoying cause I was already adjusting height: auto; before making the post =/

                      Thanks for all your help guys! And hey, if you've got any suggestions for the website I'd love to hear them.

                      P.S. what are these developer tools you all speak of? The only website tool I've used is Firebug so I'd love to know of something else.

                      Thanks

                      EDIT: Literally didnt even need to height: auto; just added the paragraphs and bam, worked how I wanted it. I literally didnt even have a problem! Just the content I added somehow screwed it all up???

                      stacksofplatesS 1 Reply Last reply Reply Quote 2
                      • stacksofplatesS
                        stacksofplates @Sparkum
                        last edited by stacksofplates

                        @Sparkum said:

                        Hmm so finally got infront of a computer, started from the bottom and worked my way up through the solutions and the most annoying thing is the problem more so appears to be my "content content content..." eh? Copied 5 paragraphs for Lerem Ipsum; turned height to auto and bam everything was perfect.
                        It didnt even attempt to format to the right when I copied the paragraphs in....
                        So thats really strange and annoying cause I was already adjusting height: auto; before making the post =/

                        Thanks for all your help guys! And hey, if you've got any suggestions for the website I'd love to hear them.

                        P.S. what are these developer tools you all speak of? The only website tool I've used is Firebug so I'd love to know of something else.

                        Thanks

                        EDIT: Literally didnt even need to height: auto; just added the paragraphs and bam, worked how I wanted it. I literally didnt even have a problem! Just the content I added somehow screwed it all up???

                        That's great!

                        Developer tools is like firebug but its on chrome, but its built in. Just hit F12. Firefox has tools built in also.

                        Sometimes the sites get funky from the nbsp;'s.

                        1 Reply Last reply Reply Quote 0
                        • 1 / 1
                        • First post
                          Last post