I want my columns to display in 3 columns per row on medium and larger screen sizes (col-md-4), 2 columns per row on smaller screen sizes, and 1 column per row on extra small (col-sm-6), but when I view my app on my tablet, I get floating columns in the 2 column rows. I know its possible to use a clearfix class with ng-if to tell it to make a column every so many rows, but if I use:
<div class='clearfix' ng-if='$index % 2 == 0'>
it will make my columns create a new row every 2 columns, even on larger screens, which isn't what I want. Is it possible to make ng-if only add the clearfix after 2 columns strictly on the col-sm class, and not on the col-md class?
Yes you can do it by listing to window resize event, Based on the screen inner width you can attach or detach the div.clearfix to the dom using ng-if.
EX:
Controller:
maintain a variable to represents the window width $scope.windowWidth
app.controller('MainCtrl', function($scope, $window, $timeout) {
$scope.windowWidth = $window.innerWidth;
$window.onresize = function(event) {
$timeout(function() {
$scope.windowWidth = $window.innerWidth;
});
};
});
View:
Attach the div IF windowWidth <= 768 ELSE Remove the div from the DOM.
<div class="tab-only clearfix" ng-if="windowWidth <= 768">
This will show only on min-width : 768px
</div>
here is a DEMO
Please search for if there is any css fixes for this.
Related
I'm using ui-grid and the first column have to be pinned on the left. When the user hovers on one row, I want to highlight the entire row, which is the logical thing to do.
The problem is that ui-grid creates two distinct elements, one for the pinned column and the other on for the "regular" ones. So I don't know how to highlight the entire row at once, and solutions with CSS don't work.
.ui-grid-row:hover .ui-grid-cell {
background-color: red;
}
Plunker here: http://plnkr.co/edit/HPxrc68JNMqyp4G9xLFA?p=preview.
Do you know how to do that ? Ideally just with ui-grid settings and CSS.
Thanks!
I solved it!
I used a row template that grabs the row id, defines ng-mouseover and ng-mouseout functions that fills the background for all the cells in the row. For whatever reason I had to wrap the entire template in a div, simply adding something to the class of the template broke the entire table.
Content of the rowTemplate:
<div class="row-uid-{{row.uid}}">
<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
ng-mouseover="grid.appScope.onRowHover(row.uid);"
ng-mouseout="grid.appScope.onRowOut(row.uid);"
ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
class="ui-grid-cell"
ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader}"
role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}"
ui-grid-cell>
</div>
</div>
Added functions in the controller:
$scope.onRowHover = function (rowUid) {
_.each(angular.element('.row-uid-' + rowUid + ' .ui-grid-cell-contents'), function (row) {
angular.element(row).css('background-color', 'red');
});
};
$scope.onRowOut = function (rowUid) {
_.each(angular.element('.row-uid-' + rowUid + ' .ui-grid-cell-contents'), function (row) {
angular.element(row).css('background-color', 'white');
});
};
In twitter bootstrap (and/or css), how can we ensure a table is displayed in its full form (with fixed dimensions), no matter whether or not its row are populated with data or not ?
I'm not sure to completely understand the question. But if you want to check if your table is fully displayed, I will use JavaScript/jQuery.
You could just check if the table has the size that you put in the CSS but I don't think that what you mean with your question:
if($(".table").height()==??) {
//DO WHAT YOU WANT
}
If your data are put on one line in the table, you can then check the number of row and multiply by the size of one row: https://jsfiddle.net/ugppwzsc/1/
But if your row have various size, you will have to calculate the size of every row and check if it's what you want:
var cal = 0;
$( "tr" ).each(function() {
cal += $(this).height();
});
if($("table").height()==cal) {
//DO WHAT YOU WANT
}
I have a view which should be responsive.My model has two properties leftPosition and topPosition.Now I want if the width of my outer div is less than 714 the topPosition and leftPosition are set to 0 else they will have the values which they receve from model.But how to check that outer div width in mvc razor syntax.I have tried to use javascript and set mvc razor variable but I found that its not possible to do such thing as asp.net is server-side and javascript is client side.
mvc partial view
#foreach (var item in Model)
{
if (Request.Browser.ScreenPixelsWidth < 1000)
{
{item.TopPosition = 0;}
{item.LeftPosition = 0;}
}
Html.RenderPartial(#item.TileName, #item);
}
Instead of this Request.Browser.ScreenPixelsWidth I want to use something like ("#desktopTilesContiner").Width,which I can use in my if condition.In my image I have different tiles - Labs,Pathology,Procedures,Medications.These are set according to their top and left position but on mobile device I just want they come in one column ignoring their top and left position.Something like the image two.
Your Request.Browser.ScreenPixelsWidth < 1000 can be taken care of with css media queries, like so:
#media all and (max-width: 1000px) { *content here* }
I would also recommend to not use position: absolute ( thus negating the need for the whole top / left positioning ) and let the DOM elements flow naturally.
I recently switched from Bootstrap to Foundation, just for the top-navigation bar. I'd like to set the menu items to always adjust accordingly and fill the bar at all times.
A bootstrap example is available here: http://getbootstrap.com/2.3.2/examples/justified-nav.html
In this example, no matter how many items exist in the menu, they always adjust their width accordingly so that the nav bar is always filled.
How do I achieve such thing in Foundation?
You can use jQuery to count the number of li and set the width of each li to the appropriate %.
So 8 list items each one would be 12.5%;
JQuery
(function( $ ){
$.fn.autowidth = function() {
return this.each(function() {
$('li', this).css({'width' : (100 / $('li', this).length) + '%'})
});
};
})( jQuery );
$(document).ready(function(){
$('nav > ul').autowidth();
});
CODEPEN DEMO.
Add & Remove list items to see it work.
HI,
In flex, I have a datagrid with 22 columns. I initially display all the columns. The width of each column right is uniform.
Now when i change the visiblity of a few columns, the width of each column varies. How do i maintain a uniform column width for each column whether or not there are any invisible columns?...
Also how do i get the count of number of visible columns. the ColumnCount property returns total number of columns and not the number of visible ones.
The columns are an array, so you can append code to whatever function makes them invisible and loop through that array setting each ones width. You will just need to keep tabs on your Datagrids width, and the number of visible columns, which you can also do with a loop. Here's some untested code that should put you close to your goal:
function makeAColInvisible():void{
//code you use to set col invisible
var visColCount:number = 0;
for each (var item:DataGridColumn in myDataGrid.columns){
if(item.visible == true){
visColCount++;
}
}
for each (var item2:DataGridColumn in myDataGrid.columns){
item2.width = myDataGrid.width / visColCount;
}
}