webforms - asp.net listview with two rows in grouptemplate -


first question on s.o.

i have search result page in asp.net , have problems - have (for each "box") image of book cover , title of book

knowing images aren't same height, want able vertically align them bottom. searched hard on web , found solution using display table/table-row/table-cell.

everything works fine, using listview's grouptemplate (as row) , itemtemplate (as cell) if want display images - - want images vertically aligned bottom , book's title below (with link "learn more" below title).

knowing couldn't put book title in same cell image (because sometime title take 2 lines, break design again...), think need row (like in code below). tought putting 2 rows in grouptemplate work listview doesn't seem give me hability call 2 different itemtemplates (one image , 1 text placed in row, below image).

any appreciated , if have other alternatives, i'm opened suggestions. bear in mind need datapager listview- think - way go.

here's css

#grid{ background: lightgreen; border-spacing: 10px; display: table; } #grid .row{display: table-row;} #grid .result{ display: table-cell; vertical-align: bottom; }

here's search result listview draft (image good, crappy "test" text)

<asp:listview id="lvsearchresults" runat="server" onpagepropertieschanged="datapager_prerender" onpagepropertieschanging="datapager_prerendering" groupitemcount="5" > <layouttemplate> <div id="grid"> <asp:placeholder id="groupplaceholder" runat="server" /> </div> </layouttemplate> <grouptemplate> <div class="row"> <asp:placeholder id="itemplaceholder" runat="server" /> </div> <div class="row"> <asp:placeholder id="itemplaceholder1" runat="server" /> </div> </grouptemplate> <itemtemplate> <div class="result"> <p><a href='<%# container.dataitem.uri %>'><img src='<%# container.dataitem.lesimages.petite %>' alt="" /></a></p> </div> </itemtemplate> <itemtemplate> <div class="result"> <p><a href='<%# container.dataitem.uri %>'>test</a></p> </div> </itemtemplate> </asp:listview>

thanks lot, - eric

somehow i've been able wanted:

by giving fixed height remaining content (title , link), images continues vertically aligned. in particular case, no need create second row in grouptemplate.

fixed height title because can take (but not more) 2 lines or 1 line. since link below title same every itemtemplate itteration, no need specify height block.

thanks majob answer, somehow didn't work me.

here new , improved code... ;)

 <grouptemplate> <div class="row"> <asp:placeholder id="itemplaceholder" runat="server" /> </div> </grouptemplate> <itemtemplate> <div class="result"> <a href='<%# container.dataitem.uri %>'><img src='<%# container.dataitem.lesimages.petite %>' alt="" /></a> <div style="height: 40px;margin-top: 10px;"><asp:literal id="littitre" runat="server" text='<%# trunkstringrelay(container.dataitem.titre, 40) %>' /></div> <a href='<%# container.dataitem.uri %>'>en savoir plus &raquo;</a> </div> </itemtemplate>

Comments

Post a Comment

Popular posts from this blog

javascript - backbone.js Collection.add() doesn't `construct` (`initialize`) an object -

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script> <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script> </head> <body> <button id="cmd_create_event" name="cmd_create_event" type="button">create new `event`</button> <script type="text/javascript"> var eventmodel = backbone.model.extend({ initialize : function() { console.log("`event` initialized. id: " + this.cid); this.bind("change:status", function() { console.log(this.get("status") + " value `status`"); }); this.bind("error", function(model, e...
Read more

php - Get uncommon values from two or more arrays -

is there function in php give array of uncommon values 2 or more arrays? for example: $array1 = array( "green", "red", "blue"); $array2 = array( "green", "yellow", "red"); .... $result = function_needed($array1, $array2,...); print_r($result); should give output: array("blue", "yellow", ...); use array_diff , array_merge : $result = array_merge(array_diff($array1, $array2), array_diff($array2, $array1)); here's demo. for multiple arrays, combine callback , array_reduce : function unique(&$a, $b) { return $a ? array_merge(array_diff($a, $b), array_diff($b, $a)) : $b; } $arrays = array( array('green', 'red', 'blue'), array('green', 'yellow', 'red') ); $result = array_reduce($arrays, 'unique'); and here's demo of that.
Read more

Adding duplicate array rows in Php -

i create function in php adds rows of array shared column value. so input. $test = array( array("c", 5, 6), array("c", 2, 3), array("test", 5, 6) ); and output. $testduplicatefree = array( array("c", 7, 9), array("test", 5, 6) ) ); i'm thinking function combine_duplicates($array,$col){ ... ... return $duplicatefreearray; } where $col duplicate free array. so, in case, combine_duplicates($test,0); would me desired output. this. <?php function combine_duplicates($array,$col) { $index = array(); foreach ($array $row) { $key = $row[$col]; if (!isset($index[$key])) { $index[$key] = $row; } else { ($i = 0; $i < count($row); ++$i) { if ($i != $col) { $index[$key][$i] += $row[$i]; } } } } return array_values($index); } $array = array( array("c", 5, 6), array("c", 2, 3), array("test", 5, 6) ); print_r(combine_duplicates($array, 0)); try here: http://codepad.org/mdhesqhi
Read more