Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 2, 2015 at 5:34 pm #404606
    Eagles1227

    Hi Support,

    I’ve been working with the CSS for the “Tabs” Element and cannot figure out why it displays differently on mobile – even before the CSS changes (Thought I would dive right in and make the changes as I go. Still no luck!).

    The issue I am having is: when I am on mobile, only one tab displays above the content while the others dhow below UNTIL another tab is chosen. Meaning, the first tab is ALWAYS above the content but when I select another tab, then they all display ABOVE the content. The text color of the tab name itself also changes. I’ve tried adding the correct color via CSS but it does not seem to want to work! I’ve also disabled all plugins as well.

    The website is here:
    http://tjmpropertygroup.com/philadelphia-neighborhoods/washington-square

    Though this was also the case prior to the CSS changes, the CSS that I have changed is:
    .tab_content.active_tab_content,.js_active #top .active_tab {
    background-color : transparent!important;
    border-left: none;
    border-top: none;
    border-right: none;
    border-bottom: solid;
    border-width: 2px;
    border-color: #f95909;
    }

    .js_active .top_tab .tab{
    border-left: none;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-width: 0px;
    padding:12px 16px 14px 16px;
    width:auto;
    font-size: 15px;
    }

    .js_active .tab_content{
    padding: 10px 0 0 0;
    }

    .js_active .active_tab_content{
    display: block;
    visibility: visible;
    z-index: 3;
    position: relative;
    overflow:auto;
    border-style: solid;
    border-width: 0px;
    border-radius: 0px;
    left:0;
    width:auto;
    }

    Thanks!

    Also, I would LOVE if users could have the ability to sort tables. For example, in my table, users could have the ability to sort Townhouse from condos or even price, etc.

    March 3, 2015 at 9:32 am #405018
    Ismael

    Hey tylerjmorrison!

    Thank you for using Enfold.

    I checked the page but I don’t see any tab elements, only toggles with a single item. Can you please provide a screenshot?

    Regarding the table, unfortunately, that is not possible without custom modification on the theme. You may need to hire a freelance developer.

    Best regards,
    Ismael

    March 3, 2015 at 4:05 pm #405193
    Eagles1227

    Hi,

    The tabs are located here – January February, etc.
    Image and video hosting by TinyPic

    In regards to the sorting of a table, I understand that it would take more work than it’s worth to get it to perform the way a table should perform (In my opinion). I just went ahead and downloaded another table plugin.

    If only I can get these tabs working correctly!

    Thanks,
    Tyler

    March 3, 2015 at 4:59 pm #405241
    Eagles1227

    After looking at the issue some more, I notice that the tab moves below the element when I try to remove the boarder on mobile devices.

    Any idea how I can remove the boarder on mobile?

    March 4, 2015 at 9:08 am #405625
    Ismael

    Hey!

    Alright. I missed it because the border is missing. That is actually the default behavior of the tab element for mobile device. Add this to the Quick CSS field to disable the full width tab title container:

    @media only screen and (max-width: 767px) {
.responsive .tabcontainer .tab {
cursor: pointer;
margin: 0 -1px 0 0;
display: block;
float: left;
z-index: 2;
position: relative;
padding: 12px 16px;
padding-top: 12px;
padding-right: 16px;
padding-bottom: 12px;
padding-left: 16px;
top: 1px;
font-size: 11px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-style: solid;
border-width: 1px;
width: auto;
}

.responsive .top_tab .tab.fullsize-tab {
margin-bottom: 0px;
display: none;
}

.responsive .tabcontainer .tab_titles {
display: block;
}}

    You might encounter issues when you have more than 4 tabs.

    Cheers!
    Ismael

    March 4, 2015 at 8:22 pm #406022
    Eagles1227

    Seems to have fixed the tab above / below content issue. How do I go about removing the border on mobile? Everything I have tried is not working – I’ve cleared my cache and also tried in incognito.

    Thanks!

    March 6, 2015 at 7:16 am #406829
    Ismael

    Hi!

    Add this inside the css media query:

    .responsive .tabcontainer .tab, .responsive #top .alternate_color .tabcontainer, .responsive #top .alternate_color .active_tab_content {
border: none !important;
}

    Cheers!
    Ismael

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.