In Zurb Foundation 5.5.3 how do I reduce margin/padding between
and the 'shorten" JS plugin

Question

I'm using Zurb Foundation 5.5.3 with CSS (and do not wish to use SASS). I'm running Windows 7. I'm using Jquery Shorten to display a list of languages https://github.com/viralpatel/jquery.shorten

I am trying to reduce the space between the last li with "Azerbaijani transcription and translation" and the following "more". I unsuccessfully tried to target to reduce the margin and padding top or bottom....

See screenshot:

My html code and css are as follows

.reducetop {
  padding-top: 1.75rem;
  margin-top: 1.75rem;

}

.reducebottom {
  padding-bottom: 5.75rem;
  margin-bottom: 5.75rem;
}

.reducetop ul {
  padding-top: 1.75rem;
  margin-top: 1.75rem;

}

.reducebottom ul {
  padding-bottom: 5.75rem;
  margin-bottom: 5.75rem;
}


ul.reducetop {
  padding-top: 1.75rem;
  margin-top: 1.75rem;

}

ul.reducebottom {
  padding-bottom: 5.75rem;
  margin-bottom: 5.75rem;
}

.reducetop ul li {
  padding-top: -1.75rem;
  margin-top: -1.75rem;

}

.reducebottom ul li {
  padding-bottom: -5.75rem;
  margin-bottom: -5.75rem;
}

li.reducemargin{
margin: 0px;
}

ul.reducemargin { 
  margin:-20px;
}

.reducemargin ul { 
  margin:-20px;
}

.reducemargin ul li { 
  margin:-20px;
}

ul.noindent {
    margin-left: 5px;
    margin-right: 0px;
    padding-left: 10px;
    padding-right: 0px;
}

.imagelist li{
            Padding:0;
            margin:0;
}

      <div class="row"> 
         <div class="small-12 medium-12 columns">
          <h4>more languages</h4> 

          <p>over the years we've worked on audio and video transcription projects involving many other languages including:</p>

            <div class="medium-4 columns">
            <div class="reducetop reducemargin imagelist">
            <ul class="noindent imagelist">
              <li>Albanian transcription and translation</li>
              <li>Amharic transcription and translation</li>
              <li>Arakanese transcription and translation</li>
              <li>Armenian transcription and translation</li>
              <li class="reducemargin noindent imagelist">Azerbaijani transcription and translation</li>           
            </ul>
            </div>
            <div class="reducetop reducemargin">
          <ul class="comment-small reducemargin noindent imagelist">
              <li>Aymara transcription and translation</li>
              <li>Belarusan transcription and translation</li>
              <li>Bengali transcription and translation</li>
              <li>Bhilali transcription and translation</li>
              <li>Burmese transcription and translation</li>
              <li>Cambodian transcription and translation</li>
              <li>Caqchiquel transcription and translation</li>
              <li>Chechen transcription and translation</li>
              <li>Creole transcription and translation</li>
              <li>Dari transcription and translation</li>
              <li>Dinka transcription and translation</li>
              <li>Faroese transcription and translation</li>
              <li>Farsi transcription and translation</li>
              <li>Flemish transcription and translation</li>
              <li>Fujianese transcription and translation</li>
              <li>Fulani transcription and translation</li>
              <li>Georgian transcription and translation</li>
              <li>Uzbek transcription and translation</li>
              <li>Greenlandic transcription and translation</li>
              <li>Guarani transcription and translation</li>
              <li>Gujerati transcription and translation</li>
              <li>Hassaniya transcription and translation</li>
              <li>Fujianese transcription and translation</li>
              <li>Icelandic transcription and translation</li>
              <li>Inuktitut transcription and translation</li>
           </ul> 
           </div>

         </div> 

          <div class="medium-4 columns comment">
          <ul>
              <li>Albanian transcription and translation</li>
              <li>Amharic transcription and translation</li>
              <li>Arakanese transcription and translation</li>
              <li>Armenian transcription and translation</li>
              <li>Azerbaijani transcription and translation</li>
              <li>Aymara transcription and translation</li>
              <li>Belarusan transcription and translation</li>
              <li>Bengali transcription and translation</li>
              <li>Bhilali transcription and translation</li>
              <li>Burmese transcription and translation</li>
              <li>Cambodian transcription and translation</li>
              <li>Caqchiquel transcription and translation</li>
              <li>Chechen transcription and translation</li>
              <li>Creole transcription and translation</li>
              <li>Dari transcription and translation</li>
              <li>Dinka transcription and translation</li>
              <li>Faroese transcription and translation</li>
              <li>Farsi transcription and translation</li>
              <li>Flemish transcription and translation</li>
              <li>Fujianese transcription and translation</li>
              <li>Fulani transcription and translation</li>
              <li>Georgian transcription and translation</li>
              <li>Uzbek transcription and translation</li>
              <li>Greenlandic transcription and translation</li>
              <li>Guarani transcription and translation</li>
              <li>Gujerati transcription and translation</li>
              <li>Hassaniya transcription and translation</li>
              <li>Fujianese transcription and translation</li>
              <li>Icelandic transcription and translation</li>
              <li>Inuktitut transcription and translation</li>
           </ul> 

         </div> 
          </div>

          </div>

:

This is the shorten plugin script I have in my html.

<script language="javascript">

$(document).ready(function() {

$(".comment").shorten();

$(".comment-small").shorten({
  showChars: 10,
  moreText: 'more',
  lessText: 'less',
  ellipsesText: '...',
});

$(".comment-list").shorten({
  showChars: 10,
  moreText: 'more',
  lessText: 'less',
  ellipsesText: '...',
});

$(".comment-test").shorten({showChars: 30});

});

Any help would be much appreciated!

score 1 · Accepted Answer · answered Jan 22 '17 at 21:37

You have a number of bits of code that are redundant in your question above (I'm guessing attached to elsewhere in your site)

e.g.

ul.reducetop {
  padding-top: 1.75rem;
  margin-top: 1.75rem;

}

Where the class reducetop is applied to a div (in your shown code) and some of the jQuery references elements that don't exist in the HTML (e.g. $(".comment-test").shorten({showChars: 30}); etc.

So to help me answer your question I have trimmed the CSS, JS and HTML not related to your problem with the gap in a particular column.

HTML

<div class="row">
  <div class="small-12 medium-12 columns">
    <h4>more languages</h4>
    <p>over the years we've worked on audio and video transcription projects involving many other languages including:</p>
    <div class="medium-6 columns end">
      <div class="">
        <ul class="noindent imagelist">
          <li>Albanian transcription and translation</li>
          <li>Amharic transcription and translation</li>
          <li>Arakanese transcription and translation</li>
          <li>Armenian transcription and translation</li>
          <li class="">Azerbaijani transcription and translation</li>
        </ul>
        <ul class="comment-small noindent imagelist">
          <li>Aymara transcription and translation</li>
          <li>Belarusan transcription and translation</li>
          <li>Bengali transcription and translation</li>
          <li>Bhilali transcription and translation</li>
          <li>Burmese transcription and translation</li>
          <li>Cambodian transcription and translation</li>
          <li>Caqchiquel transcription and translation</li>
          <li>Chechen transcription and translation</li>
          <li>Creole transcription and translation</li>
          <li>Dari transcription and translation</li>
          <li>Dinka transcription and translation</li>
          <li>Faroese transcription and translation</li>
          <li>Farsi transcription and translation</li>
          <li>Flemish transcription and translation</li>
          <li>Fujianese transcription and translation</li>
          <li>Fulani transcription and translation</li>
          <li>Georgian transcription and translation</li>
          <li>Uzbek transcription and translation</li>
          <li>Greenlandic transcription and translation</li>
          <li>Guarani transcription and translation</li>
          <li>Gujerati transcription and translation</li>
          <li>Hassaniya transcription and translation</li>
          <li>Fujianese transcription and translation</li>
          <li>Icelandic transcription and translation</li>
          <li>Inuktitut transcription and translation</li>
        </ul>
      </div>
    </div>
  </div>
</div>

(Just one column, some classes removed and one class applied to relevant uls)

JavaScript / jQuery

$(document).ready(function() {
  $(".comment-small").shorten({
    showChars: 10,
    moreText: 'more',
    lessText: 'less',
    ellipsesText: '...',
  });
}).foundation();

(Same, but with the Foundation initialisation call at the end and cut to only the one list to be "shortened")

CSS

ul.noindent {
  margin-left: 5px;
  margin-right: 0px;
  padding-left: 10px;
  padding-right: 0px;
}

.imagelist {
  padding: 0;
  margin: 0;
}
.shortcontent,
.morelink {
  float: left;
}

So basically: If you remove all the css related to padding or margins applied to elements which are parents and children of the lists, then pick a class for your ul elements that will govern the spacing (I've reused your imagelist class for the example) you can set the margin and padding to 0 (or whatever you require).

Then to reduce the (perceived) gap further (it is already 0) you can stack the ellipsis and "more" span on the same line using the classes that jQuery.Shortening adds to created elements:

.shortcontent,
.morelink {
  float: left;
}

You could also pad the .shortcontent (ellipsis) to create a horizontal gap between the elements if required.

Here's a working example: https://jsfiddle.net/tymothytym/0dvf2gzk/

Thanks so much but I can't get it to work with my js files which seem different than what you pasted. I forked your fiiddle and updated using my original js file per https://jsfiddle.net/setbon/ky6tneat/ and to show you the other custom.js file see https://jsfiddle.net/setbon/7dsaucqj/ — Julie S., Jan 22 '17 at 22:30
The pasted code is from the Shorten minified JS file on Github. Your fork works for me though? — tymothytym, Jan 22 '17 at 23:34
sorry I had not updated please see the jquery.shorten.js which does not work in the fiddle in: https://jsfiddle.net/setbon/ky6tneat/1/ — Julie S., Jan 23 '17 at 00:02
You are loading the plugin, but not actually using it. If you put the "call" to the plugin after the plugin code `$(document).ready(function() { $(".comment-small").shorten({ showChars: 10, moreText: 'more', lessText: 'less', ellipsesText: '...', }); }).foundation();` (as above) It will work as expected. — tymothytym, Jan 23 '17 at 15:04
Tx it works perfectly in the fiddle https://jsfiddle.net/setbon/ky6tneat/5/. However not in the live site: I believe narrowed down the issue to "margin-bottom" which is not picking up the css class from the
https://www.dropbox.com/s/cojm8wi3k86sfqo/Screenshot%202017-01-23%2012.07.53.png?dl=0 - been trying for over an hour and can't pin point what I'm doing wrong... - the url is http://iprobesolutions.com/transcription-services/ if helpful — Julie S., Jan 23 '17 at 17:12
Just had a peek and it looks like you've solved it by zeroing the margins on `ul.no-indent` :-) — tymothytym, Jan 23 '17 at 19:41
the fiddle is working but the website is not... ul.noindent is not being affecting anything...would you mind taking a look at the site url from my previous message ? — Julie S., Jan 23 '17 at 21:34
I think I am misunderstanding what you are aiming to achieve. I have visited your link and the site seems identical to the fiddle in form and function: https://i.imgsafe.org/72b5f4b056.png — tymothytym, Jan 24 '17 at 10:27
Could you look using Chrome ? There it shows with too much space: https://www.dropbox.com/s/cojm8wi3k86sfqo/Screenshot%202017-01-23%2012.07.53.png?dl=0. I now checked in IE 11 and there it does indeed look fine. — Julie S., Jan 24 '17 at 14:24
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/133904/discussion-between-tymothytym-and-julie-s). — tymothytym, Jan 24 '17 at 15:02

score 0 · Answer 2 · edited May 23 '17 at 12:33

0

As @tymothytym clarified in chat part of the issue I was having was due to the Chrome cache bug - per his suggestion I followed the directions from Chrome WON'T clear cache... ctrl + F5 doesn't seem to work either

edited May 23 '17 at 12:33

Community

1
1

answered Jan 25 '17 at 01:32

Julie S.

127
3
18

In Zurb Foundation 5.5.3 how do I reduce margin/padding between and the 'shorten" JS plugin

2 Answers2

In Zurb Foundation 5.5.3 how do I reduce margin/padding between
and the 'shorten" JS plugin