Is there a way to set the panel bar to a specific height (ie. 300px), and make that specific section scrollable if it's too long?
Assuming that you have your panelbar defined as a ul, something like:
<ul id="panelbar">
<li class="k-state-active">
<span class="k-link k-state-selected">My Teammates</span>
<div style="padding: 10px;">
<div class="teamMate">
<img src="../../content/web/panelbar/andrew.jpg" alt="Andrew Fuller">
<h2>Andrew Fuller</h2>
<p>Team Lead</p>
</div>
<div class="teamMate">
<img src="../../content/web/panelbar/nancy.jpg" alt="Nancy Leverling">
<h2>Nancy Leverling</h2>
<p>Sales Associate</p>
</div>
<div class="teamMate">
<img src="../../content/web/panelbar/robert.jpg" alt="Robert King">
<h2>Robert King</h2>
<p>Business System Analyst</p>
</div>
</div>
</li>
<li>
Projects
...
</li>
</ul>
You should define a CSS style as:
#panelbar {
height: 300px;
overflow-y: scroll;
}
See an example here: http://trykendoui.telerik.com/#OnaBai/ifus
The solution above scrolls the entire control. Here's how to scroll the panel's items.
Click here for the Dojo example
Related
I just found a lot of posts but none of them show a clear answer that works: how can I display 3 items in a row when user is desktop and stack them vertically when in mobile?
I see this is possible with no hacking for product grid (but products are shown two by row), probably I can use the something similar for the same result.
I have created this sample which is able to show 3 items when desktop and show 2 in a row and 1 in another. That's close to what I want:
<ul class="products-grid products-grid--max-4-col first last odd">
<li><img alt="" src="http://192.241.128.153/media/wysiwyg/index/pencil.jpg" />
<div class="product-info" style="min-height: 167px;">
<h2>Assine</h2>
</div>
</li>
<li><img alt="" src="http://192.241.128.153/media/wysiwyg/index/pencil.jpg" />
<div class="product-info" style="min-height: 167px;">
<h2>Vote</h2>
</div>
</li>
<li><img alt="" src="http://192.241.128.153/media/wysiwyg/index/pencil.jpg" />
<div class="product-info" style="min-height: 148px;">
<h2>Receba</h2>
</div>
</li>
</ul>
Thanks!
You can achieve this using a media query in your CSS such as..
#media only screen and (max-width: 770px) {
.products-grid li {
width: 100%;
}
}
Don't forget the product list version too.
I have few columns which was generated by dhtmlx's javascript. The column was generated on run time which means that if I tried to view the source code of the page using the Chrome's View Page Source, I won't be able to see the generated code. But I can see the generated code by right clicking on the element and select 'Inspect Element'. So here's a part of the generated code that I copy pasted from 'Inspect Element':
<div id="scheduler_here" class="dhx_cal_container dhx_scheduler_grid" style="width:100%;height:100%;">
<div class="dhx_cal_header" style="width: 1148px; height: 20px; left: -1px; top: 60px;">
<div class="dhx_grid_line">
<div style="width:169px;">Start Date</div>
<div style="width:169px;">Time</div>
<div style="width:169px;">Event</div>
<div style="width:169px;">Location</div>
<div style="width:169px;">Stakeholders</div>
<div style="width:169px;">Type</div>
</div>
</div>
<div class="dhx_cal_data" style="width: 1148px; height: 506px; left: 0px; top: 81px; overflow-y: auto;">
<div>
<div class="dhx_grid_v_border" style="left:184px" id="imincol0"></div>
<div class="dhx_grid_v_border" style="left:370px" id="imincol1"></div>
<div class="dhx_grid_v_border" style="left:556px" id="imincol2"></div>
<div class="dhx_grid_v_border" style="left:742px" id="imincol3"></div>
<div class="dhx_grid_v_border" style="left:928px" id="imincol4"></div>
</div>
<div class="dhx_grid_area"><table></table></div>
</div>
</div>
I'm trying to get the column width of imincol0, imincol1, imincol2 and so on which you can see at the last part of the code. I have tried few methods to get the width of the columns with these ids but to no avail. I'll always get null.
If you use jquery you could do this:
var x = $('#imincol0').width();
If you're using pure js you could try this:
var x = document.getElementById('imincol0').offsetWidth;
In our application, there is a situation where there is a grid on two pages. I want to get text of columns from the grids. But both grid's column text has little different HTML.
Page 1 grid HTML:
<div class="ngHeaderContainer" ng-style="headerStyle()" style="width: 598px; height: 30px;">
<div class="ngHeaderScroller" ng-style="headerScrollerStyle()" ng-header-row="" style="height: 30px;">
<div class="ngHeaderCell ng-scope col0 colt0" ng-class="col.colIndex()" ng-repeat="col in renderedColumns" ng-style="{ height: col.headerRowHeight }" style="height: 30px;">
<div class="ngVerticalBar ngVerticalBarVisible" ng-class="{ ngVerticalBarVisible: !$last }" ng-style="{height: col.headerRowHeight}" style="height: 30px;"> </div>
<div ng-header-cell="">
<div class="ngHeaderSortColumn " ng-class="{ 'ngSorted': !col.noSortVisible() }" ng-style="{'cursor': col.cursor}" style="cursor: pointer;" draggable="true">
<div class="ngHeaderText ng-binding colt0" ng-class="'colt' + col.index" ng-click="col.sort($event)">Request ID</div>
For this, I've written xpath //div[#class='ngHeaderContainer']//div[#ng-header-cell='']//div[contains(#class,'ngHeaderText')]
Page 2 grid HTML
<div class="ngHeaderContainer" ng-style="headerStyle()" style="width: 598px; height: 30px;">
<div class="ngHeaderScroller" ng-style="headerScrollerStyle()" ng-header-row="" style="height: 30px;">
<div class="ngHeaderCell ng-scope col0 colt0" ng-class="col.colIndex()" ng-repeat="col in renderedColumns" ng-style="{ height: col.headerRowHeight }" style="height: 30px;">
<div class="ngVerticalBar ngVerticalBarVisible" ng-class="{ ngVerticalBarVisible: !$last }" ng-style="{height: col.headerRowHeight}" style="height: 30px;"> </div>
<div ng-header-cell="">
<div class="ng-scope ng-binding" ng-click="onColumnClick( 3, 'select', $event)">
Request ID
<img class="" ng-click="onColumnClick( 3, 'delete', $event)" src="styles/images/common/delete.png" ng-show="true">
<img>
</div>
For this, I've written xpath //div[#class='ngHeaderContainer']//div[#ng-header-cell='']/div
For grid, I've written a class and in that class I've method which returns column names. Since, xpath till reach to column name is different for grid on two different pages, I won't be able to use same method.
Can someone please help me to get xpath which can be used to return column names of the grid of both the pages?
This xpath will do it hopefully. I ran into similiar issue. Took help from here. This should return you both elements
//*[contains(#class, 'ng-binding')]
<body>
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="navbar-inner" style="position: center;">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Cottages</li>
</ul><a class="navbar-brand" href="#"><img src="http://placehold.it/150x150"></a>
<ul class="nav navbar-nav">
<li>Attractions</li>
<li>Contact</li>
</ul>
</div>
</nav>
Here's my code. I'm trying to put the brand in between the "Cottages" and "Attractions" links and center everything horizontally while keeping the layout responsive. Plus, I want the brand to extend vertically outside the navbar (existing without changing the height of a navbar).
If there is a better way to do this (rather than the HTML I have now) please let me know! Thank you.
Edit: here's a JSFiddle with my current code. Although I must say that the code results differently in my browser...
Use a wrapper class:
#wrapper {
margin:0 auto;
width:500px;
}
Apply this like this.
<div id="wrapper">
<nav> </nav>
</div>
if you need to resize it on a specific size based on a view-port you may need to use css #media Queries to alter the css based on a specific width.
I'm trying to separate this ul to be two columns splitting after "Lotus Notes Administration (this is for my resume) Can someone help me with the CSS?
<section>
<h4>Technical Expertise</h4>
<div id="skills">
<ul>
<li>HMTL5</li>
<li>SQL</li>
<li>XHTML</li>
<li>Networking</li>
<li>End User Training</li>
<li>Inventory Management</li>
<li>SDLC</li>
<li>Active Directory Administration</li>
<li>Lotus Notes Administration</li>
<li>XML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>SEO</li>
<li>Technical Support</li>
<li>Procurement</li>
<li>Software Testing</li>
<li>Project Management Best Practices</li>
<li>GPO</li>
</ul>
</div>
</section>
You could do something:
<div class="Skills>
<div style="float: left; width: 50%;"><ul>List A</ul></div>
<div style="float: left; width: 50%;"><ul>List B</ul></div>
</div>