HTML/CSS problems table display -

-

i'm not able find way have 1 table 4 rows having same height (without using table tag). table included in div has table-cell display.

i created jsbin: https://jsbin.com/jejupogodi/edit?html,output

i want pink part take available height , each row inside should have 25% of height (whatever content length is).

i tidied code bit. used vh (vertical height) instead of percentage. can run code snippet here fiddle

    .container {        display: table;        width: 100%;        height: 100vh;        background: lightgreen;      }      .focus {        height: 500px;      }      .slidercontainer {        display: table-cell;        width: 40%;        height: 100%;        vertical-align: top;        background-color: white;      }      .slider {        margin: 0px;        padding: 0px;        list-style-type: none;        display: table;        height: 100%;        width: 100%;      }      .slider li {        display: table-row;        cursor: pointer;        height: 25vh;        background-color: pink;        overflow: hidden;      }      li .sliderimg{min-height:5vh; max-height:5vh;}      .sliderdetails {        border-bottom: 1px solid black;        padding-bottom: 5px;        min-height: 20vh;        max-height:20vh;          overflow-y: scroll;        overflow-x: hidden;      }
<body>    <div class="container">      <div class="focus">        <div>          <div class="focusdetails">            <div class="focustitle"></div>            <div class="focusdesc"></div>          </div>          <div class="previous" style="display:none;"><span></span>          </div>          <div class="next"><span></span>          </div>        </div>      </div>      <div class="slidercontainer">        <ul class="slider">          <li>            <div class="sliderimg"></div>            <div class="sliderdetails">                <p class="slidertitle">town hall meeting presentation - sunstar italiana</p>              <p class="sliderdesc">on tuesday, june 30 sunstar italiana employees took part town hall meeting presentation made general manager, marco bruscaini. through his</p>              </div>          </li>          <li>            <div class="sliderimg"></div>            <div class="sliderdetails">                <p class="slidertitle">top management visits hq in etoy</p>              <p class="sliderdesc">the welcome sunstar headquarter june meetings' attendees asia, japan, , done tour sunstar campus' 2 buildings, new , previous 1 welcome sunstar headquarter june meetings' attendees                asia, japan, , done tour sunstar campus' 2 buildings, new , previous one</p>              </div>          </li>          <li>            <div class="sliderimg"></div>            <div class="sliderdetails">              <p class="slidertitle">distributor meeting</p>              <p class="sliderdesc">for 3rd year have organized our distributor meeting taking place time in our new building in etoy, switzerland.this year, decided extend our invitation the</p>              </div>          </li>          <li>            <div class="sliderimg"></div>            <div class="sliderdetails">              <p class="slidertitle">distributor meeting</p>              <p class="sliderdesc">for 3rd year have organized our distributor meeting taking place time in our new building in etoy, switzerland.this year, decided extend our invitation the</p>              </div>          </li>        </ul>      </div>    </div>  </body>


Comments

Post a Comment

Popular posts from this blog

javascript - Karma not able to start PhantomJS on Windows - Error: spawn UNKNOWN -

-
i lost "unknown" error: karma.conf.js: frameworks: ['mocha', 'should'], plugins: ['karma-mocha', 'karma-should', 'karma-phantomjs-launcher'], ... browsers: ['phantomjs'], error: 23 07 2015 14:35:37.691:warn [karma]: no captured browser, open http://localhost:9876/ 23 07 2015 14:35:37.701:info [karma]: karma v0.13.3 server started @ http://localhost:9876/ 23 07 2015 14:35:37.707:info [launcher]: starting browser phantomjs 23 07 2015 14:35:37.738:error [karma]: { [error: spawn unknown] code: 'unknown', errno: 'unknown', syscall: 'spawn' } error: spawn unknown @ exports._errnoexception (util.js:749:11) @ childprocess.spawn (child_process.js:1093:11) @ exports.spawn (child_process.js:933:9) @ object._execcommand (c:\users\jinga4x\git\mdl-sample-project\node_modules\karma\lib\launchers\process.js:63:21) @ object._start (c:\users\jinga4x\git\md
Read more

c# - Display ASPX Popup control in RowDeleteing Event (ASPX Gridview) -

-
i have aspxgridview includes new , delete button. delete button includs gv_rowdeleting event. want show aspxpopupcontrol (id="pupconfirm"). want user have confirm password delete item. tried: protected void gv_rowdeleting(object sender, devexpress.web.data.aspxdatadeletingeventargs e) { pupconfirm.showonpageload = true; } but nothing happened. please me. !!! you can create template column javascript prompt confirmation. <itemtemplate> <asp:linkbutton id="btndelete" runat="server" text="delete" commandname="delete" onclientclick="javascript:if(!confirm('are sure want delete record?')){return false;}"> </asp:linkbutton> </itemtemplate>
Read more

Nuget pack csproj using nuspec -

-
i want create nuget package contains specified in nuspec file, still version csproj. in order use token have pack like: nuget pack myproj.csproj but when adds dependencies , creates unwanted folder in nuget package. nuspec file is: <?xml version="1.0" encoding="utf-8"?> <package xmlns="http://schemas.microsoft.com/packaging/2011/08/nuspec.xsd"> <metadata> <id>test</id> <version>$version$</version> <title>test</title> <authors>test</authors> <owners>test</owners> <requirelicenseacceptance>false</requirelicenseacceptance> <description>test</description> <summary>test</summary> <releasenotes>test</releasenotes> <copyright>test</copyright> </metadata> <files> <file src="bin\debug\*.dll" target="lib\net45" /> <file s
Read more