Support » Plugin: Tabs » Tab Description – Custom HTML – Rendering Issues

  • Resolved raneyron

    (@raneyron)


    Version 1.9.6
    WordPress 4.9.11

    We are using Tabs Responsive – Free version. Many of our tabs have custom HTML in the Tab Description. This is generally working for our purposes. Inside each Tab Description, there is a custom grid of images using CSS. The grid is responsive, and the column widths change depending on viewport.

    An example of a grid would be 9 images, which are surrounded by anchors, making every image clickable. When we insert HTML, sometimes there is an issue with the rendering of our grids. For some reason, the grid will randomly have “blank” or missing content. In other words, it will show some images, then nothing, then some more images, then nothing, etc. It is adding blank spaces instead of images. Like this:

    X X X
    X X X
    X
    X X X
    X

    We are using custom CSS to create our grids. The only workaround that I have found is to REARRANGE the images. By simply moving them around, it fixes the issue. When things are this buggy, I imagine there might be a conflict somewhere. Our custom CSS classes are .portfolio-row, and .portfolio-column. I do not have a live web example, because we are using authenticated staging to test this plugin.

    Any ideas on this? Have you ever heard of anyone else running into issues like this? This could be due to server caching issues. We’ve had those before. This could be an issue with viewing while authenticated as admin. I cannot view site without being logged in. I’m not sure if there is a plugin setting that could be causing this.

    Thanks

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Support preetam27

    (@preetam27)

    hi @raneyron ,

    can you please put it on server so i can get url..so i can go through issue nd reoslve it….

    Thanks.

    It is authenticated right now and we are not publishing until it works. I can offer some code.

    We are doing a simple custom grid with images wrapped in anchors:

    <div class="row">
        <div class="column">
            <a href=""><img src="" title="" alt="" /></a>
        </div>
        <div class="column">
            <a href=""><img src="" title="" alt="" /></a>
        </div>
        <div class="column">
            <a href=""><img src="" title="" alt="" /></a>
        </div>
    </div>

    We are using CSS to control the column widths, and media queries to provide responsiveness. We are using col. width: 33.33%, 50% or 100% for the divs. The images themselves are 100% width, with auto height, to fill the width of the container.

    Do you see anything inherently wrong with doing it this way? What makes this even more odd – I added a different image to one of the divs, and it caused this problem. All I did was insert a different src, and it “broke” it. It seems like there is a caching issue but I wonder if the plugin can’t handle all this customization inside the descriptions.

    Plugin Support preetam27

    (@preetam27)

    hi @raneyron ,

    i have test it with above code on local server..and till now all images are showing..for grid you can use this custom css

    .tab-pane .column{
    width: 33.33%;
    float: left;
    }

    Thanks.

    The actual HTML doesn’t have duplicate images. The tabs are really messed up because all of the tabs’ content is showing, on all of the tab selections.

    Just thought of one possibility.
    For various tabs, we are filtering content based on category. There are 21 possible images that might be shown, depending on the tab selection.

    If these are not in a consistent order, I wonder if that could cause problems with the filtering. For example, if I one tab for “All”, one tab for “Bars”, and another for “Restaurants”. If each tab has content that is in a different order than the other two, could this cause problems? I wouldn’t think it would matter, but maybe that’s why rearranging the images has been the only solution to this issue.

    Plugin Support preetam27

    (@preetam27)

    hi @raneyron ,

    if you put up different content in each tab then it should be shown on each tab differently..make sure if you are using different classes for each html..and if you do so in right manner then i have t test it with your theme and html you are using..

    Thanks.

    raneyron

    (@raneyron)

    This issue is resolved.

    We discovered that some old HTML was being mixed that had certain image <src> references that were causing issues with the rendering of the images. In other words, by changing certain images, we were able to resolve the issue completely. In addition, the images being reference were being forced to be larger by the browser. For whatever reason, it’s best to have images that are all the same size, and if anything, they should be diminished in size by the browser, not enlarged.

    Thanks for your help.

    Plugin Support preetam27

    (@preetam27)

    hi @raneyron,

    glad to know that your issue has been resolved…if you like our plugin please rate us..

    thanks.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Tab Description – Custom HTML – Rendering Issues’ is closed to new replies.