If you are using Material2, you can use Angular Flex Layout for responsiveness. It compliments Angular2 well and is lightweight. Basically Material2 + Flex-layout is equivalent to Bootsrap library. Here’s an example of how flex-layout can be used for grid system/responsiveness with Angular/Material2. Sample Code showing use of flex-layout API: <div fxShow.xs=”true” fxShow=”false” >Screen size … Read more
Bootstrap columns are flex items. You have to decide on one column which should shrink when the others have reached their min-width. For your example i chose the last one, “Due date” which normaly should be column-sm-7. I give it the non-fixed column size “col”, which will fill (flex-grow) the available space. In this example … Read more
You need use the data-target tag. Try to replace the href=”#myModal” attribute with data-target=”#myModal”. Besides, you have put a hide class, I guess it shouldn’t be there. Look at the examples here
Bootstrap is a CSS framework with a set of CSS styles for many common use cases and also a set of common elements that have more advanced functionality built with JavaScript. Polymer has nothing in common with Bootstrap (beside that it is for the web). Polymer is a framework that is based on some new … Read more
The question is old now. But if somebody looks here the trick in the current version is to use the nav-stack class, like so: <nav> <ul class=”nav nav-pills nav-stacked span2″> <li><a href=”#”>Home</a></li> <li><a href=”#”>About</a></li> <li><a href=”#”>Contact</a></li> </ul> </nav>
Boostrap 4 does not support Glyphicons anymore, you can use Font Awesome instead: npm install –save fortawesome/fontawesome-free and add the css File to your .angular-cli.json “apps”: [ { …. “styles”: [ “styles.css”, “../node_modules/bootstrap/dist/css/bootstrap.css”, “../node_modules/font-awesome/css/font-awesome.css” ], … } ] ], Replace CSS class with the Font Awesome classes: <i class=”navbar-toggler-icon fa fa-bars”> </i> recompile app: ng … Read more
There are a few different ways to solve it, but I think the best way is to put a hidden pseudo element ::before each section. This is a CSS only solution, no JS or jQuery… section:before { height: 54px; content: “”; display:block; } https://www.codeply.com/go/J7ryJWF5fr That will put the space needed to account for the fixed-top … Read more
What happens here is the buttons are displayed as an inline block and by default such elements have no white space or margin to begin with. You can use below method to avoid this. What I have done is added a class to the parent element of the buttons and inherit style to class “btn”. … Read more
I was battling with this issue as well. I was using a modal form and it rendered the map when it was hidden. When the tab is shown, you need to trigger this code: google.maps.event.trigger(map, ‘resize’); map.setZoom( map.getZoom() ); Hopefully it will work for you. If that doesn’t work, here is the link where I … Read more
Look at here : www.bootply.com/QTTDf3zRgV In this exemple, if the checkbox is checked, then the modal can’t be closed ( with js/jquery): $(‘#myModal’).on(‘hide.bs.modal’, function(e){ if( $(‘#block’).is(‘:checked’) ) { e.preventDefault(); e.stopImmediatePropagation(); return false; } });