Menu icon Foundation

My Posts

  • 1
    Reply
  • Strange Offcanvas behaviour

    By Serkan Ertürk

    www.astrolove.me this is the only place i could make offcanvas work with "full height". Then i started a new site with foundation 5 and used the same structure. But this time offcanvas list height were only cleared by height of the content. Because the... (continued)

    Last Reply by Serkan Ertürk almost 6 years ago



My Comments

Serkan Ertürk commented on Lynda Spangler's post over 5 years

It's always the same problem the js code you have downloaded from foundation pack and what those samples uses on "cdn"s are different. Foundation is failing to provide "clean" js and css most of the time ( I have noticed even foundation.min.css and foundation.css or foundation.min.js and foundation.js may behave different) when you download generated code from their website...

Check the samples i provided with one of the codepen samples from :

http://codepen.io/adam-huffman/full/igDoI/

http:/www.akhanhukuk.com/eq.html (this one is with foundation.min.js at cloudflare)

http:/www.akhanhukuk.com/eq2.html (this one is with downloded foundation.js from foundation)

I mentioned this in a couple more posts but i guess no one is taking heed, and people try to find roundabouts on already broken code...

Serkan Ertürk commented on Serkan Ertürk's post almost 6 years

Ok i solved the issue with adding this :

body, html {height:100%;}

.off-canvas-wrap {height:100%; background:#DB7375;}
.inner-wrap{height:100%; background:#C7C602}

But i guess this code supposed to be in the foundation.css

Serkan Ertürk commented on Gerhard's post almost 6 years

Same thing here annoying...

Serkan Ertürk commented on Serkan Ertürk's post almost 6 years

Hi Feather,

I actually noticed that, but the title is present there but as you said styling is missing, i don't know what is wrong about it...

Serkan Ertürk commented on Razvan Peter Nemes's post almost 6 years

I have added what i have extracted from this site, only min width might have change in the media query part. I have appended it to the end of my foundation.css . Tabs are working now...

Serkan Ertürk commented on Razvan Peter Nemes's post almost 6 years

.tabs {
  *zoom: 1;
  margin-bottom: 0 !important; }
  .tabs:before, .tabs:after {
    content: " ";
    display: table; }
  .tabs:after {
    clear: both; }
  .tabs dd {
    position: relative;
    margin-bottom: 0 !important;
    top: 1px;
    float: left; }
    .tabs dd > a {
      display: block;
      background: #efefef;
      color: #222222;
      padding-top: 0.88889rem;
      padding-right: 1.77778rem;
      padding-bottom: 0.94444rem;
      padding-left: 1.77778rem;
      font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important;
      font-size: 0.88889rem; }
      .tabs dd > a:hover {
        background: #e2e2e2; }
    .tabs dd.active a {
      background: white; }
  .tabs.radius dd:first-child a {
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-topleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px; }
  .tabs.radius dd:last-child a {
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px; }
  .tabs.vertical dd {
    position: inherit;
    float: none;
    display: block;
    top: auto; }

.tabs-content {
  *zoom: 1;
  margin-bottom: 1.33333rem; }
  .tabs-content:before, .tabs-content:after {
    content: " ";
    display: table; }
  .tabs-content:after {
    clear: both; }
  .tabs-content > .content {
    display: none;
    float: left;
    padding: 0.83333rem 0; }
    .tabs-content > .content.active {
      display: block; }
    .tabs-content > .content.contained {
      padding: 0.83333rem; }
  .tabs-content.vertical {
    display: block; }
    .tabs-content.vertical > .content {
      padding: 0 0.83333rem; }

@media only screen and (min-width:40.063em) {
  .tabs.vertical {
    width: 20%;
    float: left;
    margin-bottom: 1.25rem; }
  .tabs-content.vertical {
    width: 80%;
    float: left;
    margin-left: -1px; } }

Serkan Ertürk commented on Razvan Peter Nemes's post almost 6 years

Same issue with me Razvan because tabs code are not included in foundation.css or foundation.min.css in custom (either the other) i will try to import them from this site manually...

Posts Followed

  • 12
    Replies
  • Foundation 5 Tabs

    By Razvan Peter Nemes

    tabs

    Tabs are not working properly. I seem to need to @import the tabs.js, but I already <script>-ed it in the html file and @import-ed it in the foundation.css. No further ideas. I'm using a custom css version of Foundation 5. Any help would be appreciated. Cheers!

    Last Reply by abdessamad idrissi about 5 years ago


Following

    No Content

Followers

My Posts


My Comments

You commented on Lynda Spangler's post over 5 years

It's always the same problem the js code you have downloaded from foundation pack and what those samples uses on "cdn"s are different. Foundation is failing to provide "clean" js and css most of the time ( I have noticed even foundation.min.css and foundation.css or foundation.min.js and foundation.js may behave different) when you download generated code from their website...

Check the samples i provided with one of the codepen samples from :

http://codepen.io/adam-huffman/full/igDoI/

http:/www.akhanhukuk.com/eq.html (this one is with foundation.min.js at cloudflare)

http:/www.akhanhukuk.com/eq2.html (this one is with downloded foundation.js from foundation)

I mentioned this in a couple more posts but i guess no one is taking heed, and people try to find roundabouts on already broken code...

You commented on Serkan Ertürk's post almost 6 years

Ok i solved the issue with adding this :

body, html {height:100%;}

.off-canvas-wrap {height:100%; background:#DB7375;}
.inner-wrap{height:100%; background:#C7C602}

But i guess this code supposed to be in the foundation.css

You commented on Gerhard's post almost 6 years

Same thing here annoying...

You commented on Serkan Ertürk's post almost 6 years

Hi Feather,

I actually noticed that, but the title is present there but as you said styling is missing, i don't know what is wrong about it...

You commented on Razvan Peter Nemes's post almost 6 years

I have added what i have extracted from this site, only min width might have change in the media query part. I have appended it to the end of my foundation.css . Tabs are working now...

You commented on Razvan Peter Nemes's post almost 6 years

.tabs {
  *zoom: 1;
  margin-bottom: 0 !important; }
  .tabs:before, .tabs:after {
    content: " ";
    display: table; }
  .tabs:after {
    clear: both; }
  .tabs dd {
    position: relative;
    margin-bottom: 0 !important;
    top: 1px;
    float: left; }
    .tabs dd > a {
      display: block;
      background: #efefef;
      color: #222222;
      padding-top: 0.88889rem;
      padding-right: 1.77778rem;
      padding-bottom: 0.94444rem;
      padding-left: 1.77778rem;
      font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important;
      font-size: 0.88889rem; }
      .tabs dd > a:hover {
        background: #e2e2e2; }
    .tabs dd.active a {
      background: white; }
  .tabs.radius dd:first-child a {
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-topleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px; }
  .tabs.radius dd:last-child a {
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px; }
  .tabs.vertical dd {
    position: inherit;
    float: none;
    display: block;
    top: auto; }

.tabs-content {
  *zoom: 1;
  margin-bottom: 1.33333rem; }
  .tabs-content:before, .tabs-content:after {
    content: " ";
    display: table; }
  .tabs-content:after {
    clear: both; }
  .tabs-content > .content {
    display: none;
    float: left;
    padding: 0.83333rem 0; }
    .tabs-content > .content.active {
      display: block; }
    .tabs-content > .content.contained {
      padding: 0.83333rem; }
  .tabs-content.vertical {
    display: block; }
    .tabs-content.vertical > .content {
      padding: 0 0.83333rem; }

@media only screen and (min-width:40.063em) {
  .tabs.vertical {
    width: 20%;
    float: left;
    margin-bottom: 1.25rem; }
  .tabs-content.vertical {
    width: 80%;
    float: left;
    margin-left: -1px; } }

You commented on Razvan Peter Nemes's post almost 6 years

Same issue with me Razvan because tabs code are not included in foundation.css or foundation.min.css in custom (either the other) i will try to import them from this site manually...

Posts Followed


Following

  • No Content

Followers

  • No Content