I have html code on my site:
<div id="main" class="col-md-9 col-xs-12"></div>
<div id="right" class="col-md-3 col-xs-12"></div>
It's possible to hide 'right' column if empty in 'md' size ? And resize 'main' to col-md-12
thx
I found a similar question : Bootstrap 3 - hide empty grid column
Normally you'd use PHP (or your particular server-side language) logic to apply the appropriate Bootstrap classes depending on whether there's content in the column or not. This probably shouldn't be done with CSS.
(You could also use JavaScript/jQuery)
You can test if the tag is empty with Javascript and then hide the element.
function myfunc(){
var rightDiv = document.getElementById("right").value;
if(rightDiv == ""){
rightDiv.style.visibility="hidden";
}
}
window.onload=myfunc;
Related
I have the following:
<div id="main" class="col-lg-7 col-md-6 col-sm-12 col-md-push-3 col-lg-push-3">
<div id="inner">
</div>
</div>
How would I take the classes from #main and add them to #inner. These classes change from page to page but they need to match. So I guess I will need addClass to be a variable?
The reason I am trying to achieve this is #inner becomes fixed and therefore looses the inheritance.
You have to get those classes on the load of the page. So, you have to add such script,
$(document).ready(function(){
var mainClasses = $("#main").attr("class");
$("#inner").addClass(mainClasses);
});
If you need to remove the classes from #main and add it to #inner, just add the line below .addClass();
$("#main").removeClass(mainClasses);
firstly you have to get the element by Id and store it in any variable.
var li = document.getElementById('main');
then add that variable classes into another div id:
$('#inner').addClass(li.className);
I am new to angularjs and I want create one Page in which I want to add 2 ui-grid with one button called "other-grid" first time it must Load 1st grid and when we click again then 1st grid must replace with 2nd grid But some Problems are there I want to use ng-show and ng-hide it works for first grid but not loading 2nd grid Properly Why So and Any Solution Please..
You are probably better off using ng-if when dealing with ui-grid.
As for ng-show, it does weird things when rendering ui-grids (refer to: https://github.com/angular-ui/ui-grid/issues/4559)
Here is plunker of 2 grids with a toogle button:
http://plnkr.co/edit/IGF6X7SqtFdFSk8jiory?p=preview
<button ng-click="toggleuigrid()">toggle grid</button>
<div class="row">
<div class="span4" ng-if="show">
<div id="grid1" ui-grid="gridOptions1" class="grid" ></div>
</div>
<div class="span4" ng-if="!show">
<div id="grid2" ui-grid="gridOptions2" class="grid" ></div>
</div>
</div>
Make sure you give the 'other' hidden grid proper height and width so that the framework knows the grid dimensions
You can try using ng-if, ng-show, ng-hide and make the other grid visible when you click on the button - 'other grid'
Here is the official UI grid tutorial which does something similar to what you want
In my code i have a bunch of items rendered by ng-repeat.
These items use the bootstrap class col-md-3
and i'd like to add a feature which allows the user to see a large detail panel by clicking on one of these items.
However i'd like to accomplish it by having only one detail panel in my DOM and moving it around.
The html is like this:
<div ng-repeat="thing in thingsCtrl.things">
<thing-widget class="col-md-3"></thing-widget>
</div>
<thing-detail ng-show="thingsCtrl.showDetail" class="col-md-12"> </thing-detail>
any chance to accomplish?
Thanks in advance.
You could try moving the thing-detail inside the ng-repeat and use $index to add it or not.
<div ng-repeat="thing in thingsCtrl.things">
<thing-widget class="col-md-3"></thing-widget>
<thing-detail ng-if="$index === nth" ng-show="thingsCtrl.showDetail" class="col-md-12"> </thing-detail>
</div>
Perhaps I'm just having a bad day.
MVC views seem to be displaying _Layout.cshtml even when I do not specify layout. Is it defaulted somewhere?
The page in question is my KeywordAdmin.cshtml partial view which looks like this (this is the file in its entirety):
<div class="form-horizontal">
<div class="row">
<div class="col-md-3">
Test column 1
</div>
<div class="col-md-4">
Test column 2
</div>
<div class="col-md-5">
Test column 3
</div>
</div>
</div>
When I navigate to localhost/Keyword/KeywordAdmin I see this with the header and footer defined in _Layout.cshtml. If I wanted it to use that layout, I would have specified it.
The layout system is in place for helping you keep things uniform. Based on your statement, it seems you'd prefer not leverage it, which you can do too.
Look in _ViewStart.cshtml within the Views folder.
If KeywordAdmin.cshtml is within a subfolder, you may have another _ViewStart.cshtml in that folder which would take precedence.
If you set Layout = ""; you'll go without the layout. If KeywordAdmin.cshtml is just an oddball item and it shouldn't use your normal layout, it would be recommended to add to the top of KeywordAdmin.cshtml:
#{
Layout = "";
}
If you're wanting to leverage MVC in a way that meets your previous expectations, I'd recommend setting at the top of _ViewStart.cshtml:
#{
Layout = ""; // most likely "~/Views/Shared/_Layout.cshtml" right now
}
and then on any pages where you do wish to leverage the layout, adding:
#{
Layout = "~Views/Path.../LayoutName.cshtml";
}
I'm trying to make responsible grid with thumbnails using bootstrap and knockout. Currently i have the next html:
<div class="row">
<!-- ko if: toys().length == 0 -->
<div>No toys in category</div>
<!-- /ko -->
<!-- ko foreach: toys-->
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 previewGridItem">
<a class="thumbnail" data-bind="attr: { href: '#!/toy/' + id }">
<img data-bind="attr: {src: images[0] ? images[0] : '/Content/img/NoImage.jpg' }" />
<span data-bind="text: name"></span>
</a>
</div>
<!-- /ko -->
</div>
Sometimes i'm getting correct grid. But in most cases (ofcourse depending on size of images and length of item's names) i've got something like this:
.
How to properly align items? The most simple answer is to set height of images to constant, but then the proportions of images are ruined. More over, i want images resizing including height. Text are limited by 2 lines per image.
Live demo: JSFiddle
I suggest you to take a look at Gridalicious plugin - it's created exactly for this type of situations. It's also pretty fast, and can be easly adjusted for your needs with built in configurable parameters as well as simply editing uncompressed version of plugin accordingly to your needs.
http://suprb.com/apps/gridalicious/
For now, i solved problem using jQuery plugin mentioned in comment by Artanis. I've also have to use plugin imagesLoaded because i have ajax call which loading images. In result i've written next code:
window.imagesLoaded(".previewGridItem", function(instance) {
$(".previewGridItem").matchHeight();
});
I do not think that it's the best solution, because now i have 40kb (12Kb minimized) libraries only to align images. But for now i can't find a solution only with css.