Menu icon Foundation

Developer | Italy

I develop in .net framework and Microsoft technology from 2001

My Posts











My Comments

Stefano Ravagni commented on Stefano Ravagni's post 2 months

Hello and thanks for your reply.... no, i have to create a new grid class because i need a solution with 2.5 columns + 9.5 columns....the 3 columns + 8 columns is not good for me so i would create new class...
...but i found some issue when view in small situation...were i put a small-12 columns...so it will be a 100% of the page but wannot run....

Stefano Ravagni commented on Stefano Ravagni's post 2 months

Thanks for your reply....
i solved my problem with this css code:
 
float: left;
height: 135px; /* Max height value /
position: relative;
width: 100%;
/*border-radius: 3px;
/
display: flex;
align-items: center;
justify-content: center;
...i tryed your code but don't solve my question....

Stefano Ravagni commented on Stefano Ravagni's post almost 2 years

I'm sorry...i solved this question....

i have a sub-class wich work like this:

.panel.articoli {
border-style: solid;
border-width: 1px;
border-color: #d8d8d8;
/margin-bottom: 1.25rem;/
padding: 0.50rem;
background: #f2f2f2;
color: #333333;

}

...and the problematic sub-class just attached:

.panel.articolitrasparent {
border-style: solid;
border-width: 0px;
border-color: #d0d0d0;
margin-bottom: 0rem;
padding: 0rem;
background: #ffffff;
color: black;
font-style: normal;
font-weight: normal;
font-size: 0.85rem;

}

Checking the difference i noted 3 lines which may cause the issue:

font-style: normal;
font-weight: normal;
font-size: 0.85rem;

Deleting this 3 lines, all run as i want...

Thanks for your time and sorry for my question but i thinked was many difficult issue ..finally it reveal a simple solution and a bad attention by myself...

Have a good day!

Stefano Ravagni commented on Stefano Ravagni's post almost 2 years

I'm using 5 version and i finish my work not so far....at this time i have not time to change everything updating to 6 version...

In my article, i have this situation:

Some title text
Article text.....

The text "ARTICLE TEXT" (for example) not appear as i expect from PANEL class... but the text is incapsulated in a PANEL.ARTICOLITRASPARENT class... so...why text appear different from other section where i use a simple PANEL class??

Stefano Ravagni commented on Stefano Ravagni's post almost 2 years

Hello Jacob And thanks for your answer.
Yes, i would a trasparente panel so i created new definition But font Face And size are not as in original panel as i want.

Stefano Ravagni commented on Stefano Ravagni's post almost 2 years

Hello guys,
i found a solution wich work perfectly for this problem wich happen when someone use tooltip on an ANCHOR tag ().

Foundation will not work correct on small device, because the tooltip block the link click.

I try this code, applyng in the section when you launch foundation with JS.

 <script>
  $(document).foundation();

  if($("html").hasClass("no-touch")) {
    $(document).foundationTooltips();
}
$(document).foundation('tooltip', 'off');

</script>

Before of this i call all JS needed: here the code

<script src="/js/vendor/jquery.js"></script>
  <script src="/js/foundation/foundation.js"></script>
   <script src="/js/foundation/foundation.tooltip.js"></script>
    <script src="/js/foundation/foundation.dropdown.js"></script>
<script src="/js/foundation/foundation.topbar.js"></script>

For complete code, i say is important to set the SPAN for the tooltip in this way:

<span data-tooltip aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip" title="your title">

... note the data-options="disable_for_touch:true" ....

In this way, medium and large device will see tooltip work on A HREF tag, but not in the small device, were is not needed...

I hope this answer will help someone.... 
Have a nice days with good code!

Stefano Ravagni commented on Stefano Ravagni's post almost 2 years

No-one have a solution ???

Stefano Ravagni commented on Stefano Ravagni's post about 2 years

Thanks for your reply...

in your Codepen sample, i understand the problem appear when we have too columns with too data... in this case, in small device visualization it cannot resize all contents, so it put a horizontal scrollbar ...
...but it depend about quantity of columns and data included... this not happen on a simple table with only 3 columns, for example...

...in my forum i have 7 columns and it cannot crop under a certain resolution...

The filamentgroup library appear wonderful...but in my case i have to change all tag with and put different class in miles of code lines....so is not good for me...

Stefano Ravagni commented on Stefano Ravagni's post about 2 years

Hello again...i think i understand what happen....

Most of pages works correctly envelop the Table code into a DIV as posted...

The code which not work are code of table were i have 7 or more columns ... so i think is not possible to restrict data most of so much and is why i obtain an horizontal scroller ....

Were i have data wich could be restricted it work correctly....were data are so big (in width terms) it cannot restrict....

I ask you....is my opinion correct ? there are limit about small device restriction of width ??

If yes this topic could be closed as solved....if not, please tell me how to work in next days...

Stefano Ravagni commented on Stefano Ravagni's post about 2 years

I could post, yes...but is an ASP classic page...want you all code ??

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Stefano Ravagni's post 2 months

Hello and thanks for your reply.... no, i have to create a new grid class because i need a solution with 2.5 columns + 9.5 columns....the 3 columns + 8 columns is not good for me so i would create new class...
...but i found some issue when view in small situation...were i put a small-12 columns...so it will be a 100% of the page but wannot run....

You commented on Stefano Ravagni's post 2 months

Thanks for your reply....
i solved my problem with this css code:
 
float: left;
height: 135px; /* Max height value /
position: relative;
width: 100%;
/*border-radius: 3px;
/
display: flex;
align-items: center;
justify-content: center;
...i tryed your code but don't solve my question....

You commented on Stefano Ravagni's post almost 2 years

I'm sorry...i solved this question....

i have a sub-class wich work like this:

.panel.articoli {
border-style: solid;
border-width: 1px;
border-color: #d8d8d8;
/margin-bottom: 1.25rem;/
padding: 0.50rem;
background: #f2f2f2;
color: #333333;

}

...and the problematic sub-class just attached:

.panel.articolitrasparent {
border-style: solid;
border-width: 0px;
border-color: #d0d0d0;
margin-bottom: 0rem;
padding: 0rem;
background: #ffffff;
color: black;
font-style: normal;
font-weight: normal;
font-size: 0.85rem;

}

Checking the difference i noted 3 lines which may cause the issue:

font-style: normal;
font-weight: normal;
font-size: 0.85rem;

Deleting this 3 lines, all run as i want...

Thanks for your time and sorry for my question but i thinked was many difficult issue ..finally it reveal a simple solution and a bad attention by myself...

Have a good day!

You commented on Stefano Ravagni's post almost 2 years

I'm using 5 version and i finish my work not so far....at this time i have not time to change everything updating to 6 version...

In my article, i have this situation:

Some title text
Article text.....

The text "ARTICLE TEXT" (for example) not appear as i expect from PANEL class... but the text is incapsulated in a PANEL.ARTICOLITRASPARENT class... so...why text appear different from other section where i use a simple PANEL class??

You commented on Stefano Ravagni's post almost 2 years

Hello Jacob And thanks for your answer.
Yes, i would a trasparente panel so i created new definition But font Face And size are not as in original panel as i want.

You commented on Stefano Ravagni's post almost 2 years

Hello guys,
i found a solution wich work perfectly for this problem wich happen when someone use tooltip on an ANCHOR tag ().

Foundation will not work correct on small device, because the tooltip block the link click.

I try this code, applyng in the section when you launch foundation with JS.

 <script>
  $(document).foundation();

  if($("html").hasClass("no-touch")) {
    $(document).foundationTooltips();
}
$(document).foundation('tooltip', 'off');

</script>

Before of this i call all JS needed: here the code

<script src="/js/vendor/jquery.js"></script>
  <script src="/js/foundation/foundation.js"></script>
   <script src="/js/foundation/foundation.tooltip.js"></script>
    <script src="/js/foundation/foundation.dropdown.js"></script>
<script src="/js/foundation/foundation.topbar.js"></script>

For complete code, i say is important to set the SPAN for the tooltip in this way:

<span data-tooltip aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip" title="your title">

... note the data-options="disable_for_touch:true" ....

In this way, medium and large device will see tooltip work on A HREF tag, but not in the small device, were is not needed...

I hope this answer will help someone.... 
Have a nice days with good code!

You commented on Stefano Ravagni's post almost 2 years

No-one have a solution ???

You commented on Stefano Ravagni's post about 2 years

Thanks for your reply...

in your Codepen sample, i understand the problem appear when we have too columns with too data... in this case, in small device visualization it cannot resize all contents, so it put a horizontal scrollbar ...
...but it depend about quantity of columns and data included... this not happen on a simple table with only 3 columns, for example...

...in my forum i have 7 columns and it cannot crop under a certain resolution...

The filamentgroup library appear wonderful...but in my case i have to change all tag with and put different class in miles of code lines....so is not good for me...

You commented on Stefano Ravagni's post about 2 years

Hello again...i think i understand what happen....

Most of pages works correctly envelop the Table code into a DIV as posted...

The code which not work are code of table were i have 7 or more columns ... so i think is not possible to restrict data most of so much and is why i obtain an horizontal scroller ....

Were i have data wich could be restricted it work correctly....were data are so big (in width terms) it cannot restrict....

I ask you....is my opinion correct ? there are limit about small device restriction of width ??

If yes this topic could be closed as solved....if not, please tell me how to work in next days...

You commented on Stefano Ravagni's post about 2 years

I could post, yes...but is an ASP classic page...want you all code ??

Posts Followed

No Content

Following

  • No Content

Followers