I am using Angular Drywall to build my website. The default alignment of this is in the center. However, the template I want to render, requires to occupy 100% of the body width.
I used in css,
body{
width:100%;
margin-left:0;
padding-left: 0;
background-color: yellow;
}
This does render yellow to the entire viewing area. But the content in my template is still rendered to the center.
How do I override that ?
Thank you.
EDIT:
I do not have a lot of code. I have attached two picture of how it looks and how I want it to look.
<h1>Work Bench </h1>
<div class="col-lg-3 left">
<div class="input-group resize">
<input type="text" class="form-control" placeholder="Search Element"/>
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
</div>
Bootstrap solution:
Close the container or container-fluid div and reopen it after placing your content betweeen.
<div class="container">
<!-- navigation bar stuff -->
</div>
your elements here
<div class="container">
<!-- footer stuff -->
</div>
Bootply example
Related
I am tring to output <div> in middle of ng-repeat using $index== - however the Banner <div> is within the parent container so its not going accross the full width of the screen. I have tried using the class="container-fluid" on the Banner, but its making it even smaller. Is there any way to break out of the parent container at all (just for that one div, in the middle of the ng-repeat) to make the Banner full width?
This is how I would like it to look (for visual purposes only, need div's to be output using the ng-repeat): Plunker-1
And this is how it currently looks: Plunker-2
Here is the solution : https://plnkr.co/edit/pYO1G8M3jIDXHrRSE4YE?p=preview
You do not need container-fluid to achieve what you intend to.
<div class="col-md-12" id="Banner" ng-if="$index==8">
<div class="well well-sm text-center">
Banner
</div>
</div>
You're close, try this:
<div id="content">
<div class="container" ng-controller="MainController">
<h1>Hello Plunker!</h1>
<div ng-class="$index === 8 ? 'col-md-12' : 'col-md-3'" ng-repeat="item in Data">
<div class="container-fluid" id="Banner" ng-if="$index === 8">
<div class="well well-sm text-center">
Banner
</div>
</div>
<div class="well active" ng-if="$index !== 8">
<h3>{{item}}</h3>
</div>
</div>
</div>
</div>
how about one like this one?
What I've done was to make the .well absolute positioned, so you can "bypass" normal document flow, making the .banner as long as you like, thus adding extra width with percentage values (so you can have it a bit fluid on resizing).
.banner{
position: absolute;
width: 104%;
right: -2%;
}
So, you get your banner wider, more than 100% (which is the container's width). In order to get it in the middle subtract half of extra width (4% / 2 == 2%) from the right (or could add 2% from the left).
Problem is the responsiveness, as it breaks for some breakpoints. I would suggest go with a solution like SASS and CSS3 calc(), MDN, to tackle this one.
<div ng-repeat="item in Data">
<div class="col-md-12 well well-sm text-center"
id="Banner"
ng-if="$index==8">
Banner
</div>
<div class="col-md-3">
<div class="well active">
<h3>{{item}}</h3>
</div>
</div>
</div>
code work fine when it is single page but when i add in my angular app then code is not working,when user click on accordion header then it link to (#collapse id)
what is wrong with my code when i adding to my app.
http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">
</head>
<body>
<div class="container">
<h2>Accordion Example</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">login</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<form>
<input type="text">
<input type="password">
<input type="button" value="login">
</form>
</div>
</div>
</div>
</body>
</html>
If you want to use Bootstrap components like Accordion with AngularJS you'll need to use the specific bindings for them. They can be found (with some example code) at this GitHub project.
You'll need to swap the normal Bootstrap JavaScript file for the one above, and make sure you get the version with the templates included otherwise it won't work out of the box. The file with the templates included has tpls in the file name. There are plenty of examples of how to use this code, but feel free to ask if you have any more problems.
I have an angular + Ionic app in which I am using chartJS to show some data. Now charts are implemented on a slider.
Link1 Link2 and there are similar linked issues.
The solution that I came across. from many of the post is that I would have to destroy the existing chart and recreate in my window. Because whenever I change options via a drop drow the view blows up, all slides instead of coming next to each other laterally, Start showing up vertically and when I change the device mode. It actually re renders the page and I can view it normally.
I have tried it using ng-if also but it doesn't work. So how do I destroy a chart in my angular App and then recreate it
Some HTML code as to how am I doing it.
<div ng-if="metricArray">
<ion-slide-box on-slide-changed="slideHasChanged($index)" style="height:50%">
<ion-slide ng-repeat="metric in metricArray">
<div style="text-align:center; margin-top:10px; color:#eee;">
{{metric.startDate}} {{metric.endDate}}
</div>
<canvas id="myCanvas" tc-chartjs-bar chart-options="options" chart-data="metric.data" auto-legend></canvas>
<div class="row" style="margin-top:30px;">
<div style="width:33%; text-align:center">
<h6 style="color:#eee">MAX</h6>
<div class="circleBase type1 " style="padding:15px; margin-left: auto; margin-right: auto;">
<h6 style="color:#eee">{{metric.max}}</h6>
<p style="color:#eee">{{metricUnit}}</p>
</div>
</div>
<div style="width:33%; text-align:center">
<h6 style="color:#eee">MIN</h6>
<div class="circleBase type1 " style="padding:15px; margin-left: auto; margin-right: auto;">
<h6 style="color:#eee">{{metric.min}}</h6>
<p style="color:#eee">{{metricUnit}}</p>
</div>
</div>
<div style="width:33%; text-align:center">
<h6 style="color:#eee">AVG</h6>
<div class="circleBase type1 " style="padding:15px; margin-left: auto; margin-right: auto;">
<h6 style="color:#eee">{{metric.avg}}</h6>
<p style="color:#eee">{{metricUnit}}</p>
</div>
</div>
</div>
</ion-slide>
</ion-slide-box>
</div>
I have an issue with AMD layout at the smaller resolutions. At the small resolutions Widget1 doesn't fill entire div. I tried with the layout-fill atribute, but doesn't work.
Please take a look at the plunker.
<div layout="row" layout-md="column" layout-sm="column" layout-margin="">
<section class="widget md-whiteframe-z1 ng-isolate-scope md-cyan-theme" ng-class="{'widget-overlay-title': overlayTitle}" ng-attr-layout="{{widgetLayout}}" content-padding="" flex="66">
<div class="panel-heading">Widget1<span flex=""></span></div>
</section>
<section class="widget md-whiteframe-z1 ng-isolate-scope md-cyan-theme" ng-class="{'widget-overlay-title': overlayTitle}" ng-attr-layout="{{widgetLayout}}" content-padding="" flex="32">
<div class="panel-heading">Widget2<span flex=""></span></div>
</section>
</div>
I'm having a problem in Bootstrap 3 in using col-xs-* for mobile devices..
I'm using below code for mobile..
<div class="row">
<div class="col-xs-6"> div content 1 </div>
<div class="col-xs-6"> div content 2 </div>
<div class="col-xs-6"> div content 3 </div>
<div class="col-xs-6"> div content 4 </div>
<div class="col-xs-6"> div content 5 </div>
<div class="col-xs-6"> div content 6 </div>
</div>
here, div's are equally(50%) sharing in both Mobile Horizontal/Vertical views..
But I want to get 3 div blocks in mobile Horizontal view & 2 blocks in Vertical view..
for this I tried below code also. But no Use...
<div class="row">
<div class="col-xs-6 col-sm-4"> div content 1 </div>
<div class="col-xs-6 col-sm-4"> div content 2 </div>
<div class="col-xs-6 col-sm-4"> div content 3 </div>
<div class="col-xs-6 col-sm-4"> div content 4 </div>
<div class="col-xs-6 col-sm-4"> div content 5 </div>
<div class="col-xs-6 col-sm-4"> div content 6 </div>
</div>
please check below jpg's for ref:
Please help me in this..
You need to adjust the break point for the col-sm-x classes. In bootstraps CSS file, you will find a line like:
#media (min-width: 768px) {
.col-sm-1, .col-sm-2, ....
Change the 768px to wherever you want the break point where those classes to be overridden by the col-xs-x classes.