jQuery.dotdotdot на макете сетки -> пустые места
Я разрабатываю сайт с использованием jQuery, Modernizr и некоторых плагинов (jQuery.dotdotdot, MixItUp). В качестве базы я выбрал эту работу из codyhouse. Итак, функциональность MixItUp (фильтрация) прекрасно работает, и у меня нет никаких проблем там.
Проблема возникает, когда я хочу заменить оригинал <img> по <div> и добавить контент. Текст может переполниться, поэтому я добавил плагин jQuery.dotdotdot, чтобы аккуратно обрезать этот текст. Таким образом, я добавил свой собственный код JavaScript:
$(document).ready(function() {
$('#MixItUp').find('> li.mix > div.grid-square').each(function() {
$(this).dotdotdot({
watch: $(this)
});
});
});
Это довольно просто, я думаю. Когда я запускаю меню, все поля правильно выровнены и аккуратны, но когда оно свернуто, те тексты, которые были обрезаны с помощью jQuery.dotdotdot, портят всю сетку. Как от них избавиться?
Я создал фрагмент ниже с некоторыми примерами данных:-)
window.onload = function() {
$(document).ready(function() {
$('#MixItUp').find('> li.mix > div.grid-square').each(function() {
$(this).dotdotdot({
watch: $(this)
});
});
});
}/* solution to the blank gaps problem */
.grid-square {
overflow: hidden;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Responsive farm</title>
<link rel="stylesheet" type="text/css" href="http://codyhouse.co/demo/content-filter/css/reset.css">
<link rel="stylesheet" type="text/css" href="http://codyhouse.co/demo/content-filter/css/style.css">
<script type='text/javascript' src="http://codyhouse.co/demo/content-filter/js/modernizr.js"></script>
</head>
<body>
<header class="cd-header">
<h1>Farm data</h1>
</header>
<main class="cd-main-content">
<div class="cd-tab-filter-wrapper">
<div class="cd-tab-filter">
<ul class="cd-filters">
<li class="filter"><a href="/session/logout/">LOGOUT</a>
</li>
</ul>
<!-- cd-filters -->
</div>
<!-- cd-tab-filter -->
</div>
<!-- cd-tab-filter-wrapper -->
<section class="cd-gallery">
<ul id="MixItUp">
<li style="display: inline-block" class="mix topic-C work_phase-B type-D NORA10_fino3.csv">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: NORA10_fino3.csv</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/NORA10_fino3.csv">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Time series over 2000-10 of wind and surface-wave parameters at the location of the FINO3 met mast. Values comprise three-hourly sampled wind speed and direction at 10, 100 and 150 m; significant wave height; and dominant wave period and
direction. Supplied by Metno from their NORA10 reanalysis - horizontal resolution 10 km.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-L work_phase-B type-D NRWF_bline_clin_layout.png">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: NRWF_bline_clin_layout.png</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Layouts, wakes & loads</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/NRWF_bline_clin_layout.png">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Plot of the location of installations in the curvilinear layout.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-L work_phase-B type-D NRWF_bline_clin_layout.txt">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: NRWF_bline_clin_layout.txt</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Layouts, wakes & loads</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/NRWF_bline_clin_layout.txt">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Location of installations in the curvilinear layout.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-L work_phase-B type-D NRWF_bline_rlin_layout.png">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: NRWF_bline_rlin_layout.png</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Layouts, wakes & loads</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/NRWF_bline_rlin_layout.png">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Plot of the location of installations in the rectilinear layout.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-L work_phase-B type-D NRWF_bline_rlin_layout.txt">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: NRWF_bline_rlin_layout.txt</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Layouts, wakes & loads</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/NRWF_bline_rlin_layout.txt">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Location of installations in the rectilinear layout.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-L work_phase-B type-P Pres_May15_RWF.pdf">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: Pres_May15_RWF.pdf</p>
<p>
<label class="att-name">Information type</label>: Reports, presentations & working papers</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Layouts, wakes & loads</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/Pres_May15_RWF.pdf">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Presentation on Uni Research's work on baseline specification of the RWF.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-C work_phase-B type-D vol_flux_10_deg_bin_wind_rose_fino3.jpg">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: vol_flux_10_deg_bin_wind_rose_fino3.jpg</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/vol_flux_10_deg_bin_wind_rose_fino3.jpg">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Wind-rose plot of data in vol_flux_10_deg_bin_wind_rose_fino3.txt.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-C work_phase-B type-D vol_flux_10_deg_bin_wind_rose_fino3.txt">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: vol_flux_10_deg_bin_wind_rose_fino3.txt</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/vol_flux_10_deg_bin_wind_rose_fino3.txt">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Joint histogram of magnitude and direction of volume flux of air through an isolated ideal WT, dimensions those of the DTU 10 MW reference WT, at the location of the FINO3 met mast. Sample counts at 10 s resolution over 2000-10 broken down
by flux magnitude, bin size 1 m s-1, and flux direction, bin size 10 degs. Derived using results from a downscaling of the ERA-Interim reanalysis of ECMWF with WRF, at 3 km horizontal resolution.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-C work_phase-B type-D vol_flux_15_deg_bin_wind_rose_fino3.png">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: vol_flux_15_deg_bin_wind_rose_fino3.png</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/vol_flux_15_deg_bin_wind_rose_fino3.png">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Wind-rose plot of data in vol_flux_15_deg_bin_wind_rose_fino3.txt.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-C work_phase-B type-D vol_flux_15_deg_bin_wind_rose_fino3.txt">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: vol_flux_15_deg_bin_wind_rose_fino3.txt</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/vol_flux_15_deg_bin_wind_rose_fino3.txt">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Joint histogram of magnitude and direction of volume flux of air through an isolated ideal WT, dimensions those of the DTU 10 MW reference WT, at the location of the FINO3 met mast. Sample counts at 10 s resolution over 2000-10 broken down
by flux magnitude, bin size 1 m s-1, and flux direction, bin size 15 degs. Derived using results from a downscaling of the ERA-Interim reanalysis of ECMWF with WRF, at 3 km horizontal resolution.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-C work_phase-B type-D vol_flux_tseries_fino3.csv">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: vol_flux_tseries_fino3.csv</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/vol_flux_tseries_fino3.csv">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Time series over 2000-10 of the estimated wind forcing of an isolated ideal WT, dimensions those of the DTU 10 MW reference WT, at the location of the FINO3 met mast. Values comprise hourly-sampled magnitude and direction of the volume flux
through the rotor. Derived using results from a downscaling of the ERA-Interim reanalysis of ECMWF with WRF, at 3 km horizontal resolution.</p>
</div>
</li>
<li class="gap"></li>
<li class="gap"></li>
<li class="gap"></li>
</ul>
<div class="cd-fail-message">No results found</div>
</section>
<!-- cd-gallery -->
<div class="cd-filter">
<form>
<div class="cd-filter-block">
<h4 class="is-open">Search</h4>
<div class="cd-filter-content">
<input placeholder="Try file name..." type="search">
</div>
<!-- cd-filter-content -->
</div>
<!-- cd-filter-block -->
<div class="cd-filter-block">
<h4>Information type</h4>
<ul class="cd-filter-content cd-filters list">
<li>
<input class="filter" data-filter="" name="typeRadioButton" id="type-ALL" checked="" type="radio">
<label class="radio-label" for="type-ALL">All</label>
</li>
<li>
<input class="filter" data-filter=".type-D" name="typeRadioButton" id="type-D" type="radio">
<label class="radio-label" for="type-D">Data files</label>
</li>
<li>
<input class="filter" data-filter=".type-P" name="typeRadioButton" id="type-P" type="radio">
<label class="radio-label" for="type-P">Reports, presentations & working papers</label>
</li>
<li>
<input class="filter" data-filter=".type-S" name="typeRadioButton" id="type-S" type="radio">
<label class="radio-label" for="type-S">Software</label>
</li>
</ul>
<!-- cd-filter-content -->
</div>
<!-- cd-filter-block -->
<div class="cd-filter-block">
<h4>Work phase</h4>
<ul class="cd-filter-content cd-filters list">
<li>
<input class="filter" data-filter="" name="phaseRadioButton" id="work_phase-ALL" checked="" type="radio">
<label class="radio-label" for="work_phase-ALL">All</label>
</li>
<li>
<input class="filter" data-filter=".work_phase-B" name="phaseRadioButton" id="work_phase-B" type="radio">
<label class="radio-label" for="work_phase-B">Baseline</label>
</li>
<li>
<input class="filter" data-filter=".work_phase-P" name="phaseRadioButton" id="work_phase-P" type="radio">
<label class="radio-label" for="work_phase-P">Post baseline</label>
</li>
</ul>
<!-- cd-filter-content -->
</div>
<!-- cd-filter-block -->
<div class="cd-filter-block">
<h4>Wind-farm topic</h4>
<ul class="cd-filter-content cd-filters list">
<li>
<input class="filter" data-filter="" name="topicRadioButton" id="topic-ALL" checked="" type="radio">
<label class="radio-label" for="topic-ALL">All</label>
</li>
<li>
<input class="filter" data-filter=".topic-C" name="topicRadioButton" id="topic-C" type="radio">
<label class="radio-label" for="topic-C">Site characterisation</label>
</li>
<li>
<input class="filter" data-filter=".topic-L" name="topicRadioButton" id="topic-L" type="radio">
<label class="radio-label" for="topic-L">Layouts, wakes & loads</label>
</li>
<li>
<input class="filter" data-filter=".topic-M" name="topicRadioButton" id="topic-M" type="radio">
<label class="radio-label" for="topic-M">Management, operations & costs</label>
</li>
</ul>
<!-- cd-filter-content -->
</div>
<!-- cd-filter-block -->
</form>
<a href="#0" class="cd-close">Close</a>
</div>
<!-- cd-filter -->
<a href="#0" class="cd-filter-trigger">Menu</a>
</main>
<script type='text/javascript' src="http://codyhouse.co/demo/content-filter/js/jquery-2.1.1.js"></script>
<script type='text/javascript' src="http://codyhouse.co/demo/content-filter/js/jquery.mixitup.min.js"></script>
<script type='text/javascript' src="http://codyhouse.co/demo/content-filter/js/main.js"></script>
</body>
</html>1 ответ
Решение
Был простой ответ на мою проблему, просто добавив
overflow: hidden;
в CSS-класс.grid-square. Я отредактировал вопрос выше, чтобы отразить это решение.