• Register
    • Help

    striker  0 Items
    Currently Supporting
    • Home
    • News
    • Forum
    • Wiki
    • Support
      • Manage Subscriptions
      • FAQ
      • Support For
        • VaultWiki 4.x Series
        • VaultWiki.org Site
    • What's New?
    • Buy Now
    • Manual
    • 
    • Support
    • VaultWiki 4.x Series
    • Bug
    • Few CSS tweaks

    1. Welcome to VaultWiki.org, home of the wiki add-on for vBulletin and XenForo!

      VaultWiki allows your existing forum users to collaborate on creating and managing a site's content pages. VaultWiki is a fully-featured and fully-supported wiki solution for vBulletin and XenForo.

      The VaultWiki Team encourages you to join our community of forum administrators and check out VaultWiki for yourself.

    Issue: Few CSS tweaks

    • Issue Tools
      • View Changes
    1. issueid=3965 August 30, 2014 6:27 AM
      DragonSigh DragonSigh is offline
      Junior Member
      Few CSS tweaks

      Demo page: https://www.vaultwiki.org/demo/CSS-Test

      I've added a vertical image to this page and now in the article we got a lot of empty space.
      If you configure some CSS it will display nicer.

      Step 1. Every section has vw-floatcontainer class with clear: both; :after it. I don't understand the purpose of this class because it can be safely removed.

      https://dl.dropboxusercontent.com/u/...aks-step-1.png

      Step 2. Fix headers.

      Now we can add overflow: hidden; to vw-head class. The headers now displays correctly.

      https://dl.dropboxusercontent.com/u/...aks-step-2.png

      Step 3. Fix image in the middle of the text.

      Add clear: right; to the vw-img-right class.
      And clear: left; to the vw-img-left class.

      https://dl.dropboxusercontent.com/u/...aks-step-3.png

      Maybe it could be done even better.
    Issue Details
    Issue Number 3965
    Issue Type Bug
    Project VaultWiki 4.x Series
    Category Styling / CSS
    Status Fixed
    Priority 5 - Minor Bugs / Small Tweaks
    Affected Version 4.0.0 RC 2
    Fixed Version 4.0.0 RC 3
    Milestone VaultWiki 4.0 Gold
    Software DependencyAny
    License TypePaid
    Users able to reproduce bug 0
    Users unable to reproduce bug 0
    Attachments 0
    Assigned Users (none)
    Tags css, tweaks




    1. August 30, 2014 11:25 AM
      pegasus pegasus is offline
      VaultWiki Team
      #1. This is intentionally designed to do exactly what you see. If an image is placed under a specific heading, it should not bleed into the next heading. There are other reasons for this, as there are other kinds of floated content in VaultWiki. It also becomes an issue again with #3.

      If you really want a specific image to bleed into the next heading, then you have to break the isolation between the headings. You can do this really easily by wrapping a heading in a DIV tag. This will remove all controls from that heading as well, which prevents unexpected behaviors when the heading isn't isolated (such as editing text from a different section rather than the one you want to edit).

      #2. I find it really odd that overflow: hidden actually works that way. I would have expected the control icons to become hidden, since they are part of the overflow. I will keep this in mind if it's needed in the future, but with the described use case it's really not needed, since the sections are supposed to be float-containers anyway.

      #3. If you add clear: left and clear: right to those respective classes, then you cannot have multiple floated images side-by-side. The clear properties were intentionally left out to allow for this case. Also, from what I understand, changing it will break the GALLERY tag.

      Not only that, but we found over the years that it was more desirable to have an image be near the text that it illustrated, rather than let other images above it keep pushing it down.

      If you have a problem like this with overlapping images WITHIN a section and you do want the images on top of each other, try placing the images in a GALLERY tag and setting perrow="1". I've gone ahead and added an align attribute to the GALLERY tag for the next release so that you can float it without invoking a DIV tag around it.
      Reply Reply  
    2. August 30, 2014 12:08 PM
      pegasus pegasus is offline
      VaultWiki Team
      Marked as fixed in the next release. It is now possible to do what you want, but not by changing the default CSS. vw-head now has overflow: hidden and GALLERY now supports floating the whole GALLERY.

      See the CSS Test page you posted above.
      Reply Reply  
    + Reply

    Assigned Users
    Loading Please Wait
    Tags
    Loading Please Wait
    • Contact Us
    • License Agreement
    • Privacy
    • Terms
    • Top
    All times are GMT -4. The time now is 9:54 PM.
    This site uses cookies to help personalize content, to tailor your experience, and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Learn more… Accept Remind me later
  • striker
    Powered by vBulletin® Version 4.2.5 Beta 2
    Copyright © 2023 vBulletin Solutions Inc. All rights reserved.
    Search Engine Optimisation provided by DragonByte SEO (Pro) - vBulletin Mods & Addons Copyright © 2023 DragonByte Technologies Ltd.
    Copyright © 2008 - 2013 VaultWiki Team, Cracked Egg Studios, LLC.