CSS for more than one column inside tab

  • Resolved alexandrofll

    (@alexandrofll)


    12 years, 1 month ago

    Hello, I have been trying to add a div inside the tab to have more than one column, but I haven’t been able to work it out.

    These is what I have done:
    //Html
    <?php echo do_shortcode(‘[tabby title=”my_tab”]’);?>
    <div class=”columns_container “>
    <div class=”prg_col_left”>
    //content
    </div>
    <div class=”prg_col_right”>
    //content
    </div>
    </div>

    //Css
    @media screen and (min-width: 769px) {
    . columns_container{
    position: relative;
    }
    .column_left{
    float:left;
    width:300px;
    }
    . column_right{
    float:right;
    width:400px;
    }
    }

    My problems start with display:block

    .responsive-tabs .responsive-tabs__panel–closed-accordion-only {
    display: block;//problem
    }

    I tried to change the display from block to table and it seems to work until you resize the screen and everything gets mess up. I am not saying there is something wrong with the plugin, it may be the way I am trying to work it out.
    Do you have any comments or suggestion that can point me in the right direction? Anything will be appreciated, thanks.

    https://wordpress.org/plugins/tabby-responsive-tabs/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author cubecolour

    (@numeeja)

    12 years, 1 month ago

    I’m not sure exactly what you’re trying to achieve as it isn’t clear without a link & some explanation, but the following works for me for having two columns within the tab content:

    Tabby shortcodes & content:

    [tabby title="First Tab"] Tabby ipsum dolor sit amet, kitty sunbathe dolor, feed me.
[tabby title="Second Tab"]Lay down in your way catnip stuck in a tree, sunbathe kittens.
[tabby title="Third Tab"]
<div class="insidetab-wrapper">
<div class="left">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>

<div class="right">Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</div>
</div>
[tabbyending]

    CSS rules(added to child theme etc):

    .insidetab-wrapper {
	overflow: auto;
}

.left {
	float: left;
	width: 48%;
}

.right {
	float: right;
	width: 48%;
}

    moklet

    (@moklet)

    12 years, 1 month ago

    This works except when there is an image in one of the columns. If you resize the content disappears in that tab

    Plugin Author cubecolour

    (@numeeja)

    12 years, 1 month ago

    Please provide a link to a page where this occurs.

    Is the image responsive? Set its width to be a percentage of the containing element and the height to auto.

    As the plugin provides responsive tabs, the theme and the content should be responsive as well for everything to work together.

    moklet

    (@moklet)

    12 years, 1 month ago

    Hi can’t provide a link yet, as it is hosted locally, but it looks like some conflict with the theme (which is responsive) I am using.

    moklet

    (@moklet)

    12 years, 1 month ago

    Sorted it out when applying the fix for

    http://wordpress.org/support/topic/images-run-over-tabcontent?replies=4

    Then it happened, when i removed that everything works

    Thread Starter alexandrofll

    (@alexandrofll)

    12 years, 1 month ago

    Thank you very much for the replay, it pointed me to int the right direction, but to avoid the scroll showing up I used the following:

    .insidetab-wrapper:after{
    content: ”;
    display: block;
    clear: both;
    }

    .left {
    float: left;
    width: 220px;
    }

    .right {
    float: left;
    width: 460px;

    }

    Poocharo

    (@poocharo)

    12 years, 1 month ago

    Hi there I have used the above code for multi column tabs and it worlds great. My problem is that any where I have used it WordPress is also adding extra opening and closing paragraph tags before and after “insidetab-wrapper”. Any idea on how to get rid of these?
    Thanks.

    Thread Starter alexandrofll

    (@alexandrofll)

    12 years, 1 month ago

    Hi, I don’t think that has to do with the plugin or the css, I have read a lot of time that wordpress does that automatically, I am not sure how to work it out…

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘CSS for more than one column inside tab’ is closed to new replies.