I have a bootstrap column with a button for print which uses media attribute.
<div class="panel-footer">
<div class="row">
<div class="col-md-offset-5 col-md-2">
<button class="btn btn-primary btn-wordwrap" ng-click="$print()" media="print"><span class="glyphicon glyphicon-print"></span> Print</button>
</div>
</div>
</div>
The #media is defined in css as below.
#media print {
button {
display: none !important;
}
}
The $Print() is defined as below in angular controller.
$scope.$print = function () {
window.print();
};
It still prints the Print button in the print out. Any ideas what I am missing here? Thank you!
.hidden-print
See Bootstrap 3 Documentation on Responsive Utilities, Print
http://getbootstrap.com/css/#responsive-utilities-print
Related
I am making an angular component to make a bunch of qr codes and print them. I have a component just for the qr code and want to make it possible to delete a qr code from the list and undo-delete a previously deleted code. I Before adding the undo-delete functionality, everything was working well because I was just removing that particular component from the list. However, now I don't want to completely remove it, I just want to fade it out until print time. I am using ngClass on my div and the "deleted" class does work. Anything that has class noPrint just gets display:none, however when I try to use ngClass to dynamically give a code noPrint, it doesn't set display: none on that particular code.
My qr-code html: The issue is in the first div tag at the top. I have tried adding single quotes on the class names to see if that works as well.
<div
fxLayout="column"
class="qrobj"
[ngClass]="{
deleted: !this.shouldExist,
noPrint: !this.shouldExist
}"
>
<button *ngIf="this.shouldExist" class="noPrint" mat-icon-button>
<mat-icon
matTooltip="Delete this Person?"
matTooltipPosition="after"
color="warn"
(click)="sendDelete()"
>block</mat-icon
>
</button>
<button *ngIf="!this.shouldExist" class="noPrint" mat-icon-button>
<mat-icon
matTooltip="Undo Delete?"
matTooltipPosition="after"
color="primary"
(click)="undoDelete()"
>undo
</mat-icon>
</button>
<div fxLayout="row" class="text">
<p>{{ person.Name }}</p>
<p>{{ person.Name }}</p>
</div>
<div fxLayout="row" class="images">
<img [src]="this.qrlink" (error)="getDefaultUrl()" />
<img [src]="this.piclink" (error)="getDefaultUrl()" />
</div>
</div>
Here is the part of my css that matters:
.deleted {
opacity: 0.3;
}
#media print {
.noPrint {
display: none;
}
}
This is what it looks like
before I delete a Code
This is what it looks like
after I delete a Code:
This is what shows up in the print preview:
I'm using bootstrap 3. My idea is to expand/collapse some words between other words (transcriptions in dictionary) by clicking on one button.
Words and transcriptions between them all have class display: "inline-block". It's there a way to make strictly horizontal transition, and avoid this display:"block" part of it? Panel heading should be always in one line. (And avoid to write additional js)
<div class="panel-heading">
<div class="note">{{note}} </div>
<div class="word -arabic-text-big">{{word}}</div>
<div class="collapse transcription">[******]</div>
</div>
<button type="button" class="btn btn-info"
data-toggle="collapse" data-target=".transcription">
Transcipt
</button>
Sorry, the answer was too simple. But before i did something wrong...
.note, .word, .transcription {
display: inline-block;
}
.transcription.collapse.in {
display: inline-block;
}
.transcription.collapse {
display: none;
}
I'm trying to find a way to change the lnr-chevron-left to lnr-chevron-down when the user click in the chevron and expand the view.
This is the code that I have in the gsp and don't work:
<div class="col-xs-2 col-sm-1 text-right">
<div data-toggle="collapse" data-parent="#accordion" href="#collapse${i}" class="lnr lnr-chevron-left collapsed lnr-chevron-down">
UPDATED
This is last code that I'm trying....
<body>
<div class="col-xs-2 col-sm-1 text-right">
<div data-toggle="collapse" id="changeChevron" data-parent="#accordion" href="#collapse${i}" class="lnr lnr-chevron-left collapsed"></div>
</div>
<script type = "text/javascript">
var clicked=false;
$('#changeChevron').click(function(){
clicked=true;
});
if (clicked) {
$('#changeChevron').removeClass('lnr lnr-chevron-left').addClass('lnr lnr-chevron-down');
} else {
$('#changeChevron').removeClass('lnr lnr-chevron-down').addClass('lnr lnr-chevron-left');
}
</script>
</body>
Thanks in advance
Try something like this:
<div class="col-xs-2 col-sm-1 text-right">
<div data-toggle="collapse" id="myId" data-parent="#accordion" href="#collapse${i}" class="lnr lnr-chevron-left collapsed">
This is an example and it is all off the top off my head as in not tested but it will give you the idea
<g:javascript>
////$('.lnr-chevron-left').on('click', function() {
$('#myId').on('click', function() {
$(this).removeClass('lnr-chevron-left').addClass('lnr-chevron-down');
event.stopPropagation();
});
</g:javascript>
You will then need to change it back when the user no longer is clicking it it
So instead you could try something like:
<g:javascript>
var clicked=false;
$('#myId').click(function(){
clicked=true;
});
if (clicked) {
$('#myId').removeClass('lnr-chevron-left').addClass('lnr-chevron-down');
} else {
$('#myId').removeClass('lnr-chevron-down').addClass('lnr-chevron-left');
}
</g:javascript>
That clicked function may not work, a much neater way seems to be focus:
https://api.jquery.com/focus-selector/
Maybe I'm late but if you have a css you can override the css like this:
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e875";
float: right;
}
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Linearicons-Free';
content: "\e874";
float: right;
font-size:19px;
}
This is very straightforward: My angular view displays rows of printOrders generated via ng-repeat. If a print order has been printed, it applies the class 'panel-pink'
<div class="col-md-12" ng-repeat="printOrder in printOrders | filter: statuses">
<div class='panel mb20 panel-primary panel-hovered' ng-class="{'panel-pink' : {{printOrder.Printed}}}">
<div class="panel-body">
<div style="text-align: center; margin-top: 10px; margin-bottom: 10px;">
<div>{{printOrder.GcodePath}},{{printOrder.Flavor}},{{printOrder.Finishing}}</div>
</div>
<div>
<a class="btn btn-small btn-success btn-sm" ng-click="doPrintOrder(printOrder)">Print</a>
</div>
</div>
</div>
</div>
When it loads the page, it correclty applies the 'panel-pink' class for those that are printed, but when I change the printOrder status via ng-click it doesn't
When a users click on a "print" button the following code on the print order controller executes:
$scope.doPrintOrder = function (printOrder) {
PrintOrdersAPIService.printOrder(printOrder.Id, printOrder.UserId, printOrder.GcodePath).then(function (data) {
printOrder.Printed = true; //this line should change the model
});
}
Everything works ok, the only problem is that the ng-class dosen't get appied when the model changes (printOrder.Printed = true;)
What should I do in order to make the styling work dynamically?
Change your ng-class to this:
ng-class="{'panel-pink' : printOrder.Printed}"
You don't need the curly braces.
I'm just wondering what's the best way to format three buttons so that they show correctly on various screen sizes. So, this is what I've done so far and it looks good on 1200px width screen.
What I've done is I used the buttons and put them into span4 classes. Like so:
<div class="row-fluid">
<div class="span4">
<a class="header-btn" href="#">Testbutton 1</a>
</div>
<div class="span4">
<a class="header-btn" href="#">
Testbutton 2
</a>
</div>
<div class="span4">
<a class="header-btn" href="#">Testbutton 3</a>
</div>
</div>
However, when I shrink the screen size it looks bad and the buttons break up.
I would like to have the buttons displayed below one another once the screen size gets too small.
I could edit the span4 class from bootstrap but this could mess with the other layout... So should I just add a new class and make everything reponsive, or work with the bootstrap framework?
Please advise.
Thanks!
You seem to be using it right for v2, so maybe you might not be having bootstrap loading in correctly.
but I suggest upgrading to v3 or v4, you can learn more in the Docs. http://getbootstrap.com/css/#grid
All buttons will be inline horizontally with each other but as the screen gets smaller. the buttons will adjust and then go vertically with each other. depending on how you have it set up. But this makes it responsive.
You might want something like this, in the html:
! To see everything working the way it should, when you click the run snippet button. Click full page and then drag the side of the browser smaller and smaller, and you will see the buttons adjust. !
I hope this helps!
.div-container{
border: 1px solid black;
padding: 10px;
margin: 10px;
border-radius: 5px;
}
button{
margin-left: 45% !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class='div-container'>
<div class='row'>
<div class='col-sm-4'>
<button class='btn btn-primary'>CLICK</button>
</div>
<div class='col-sm-4'>
<button class='btn btn-primary'>CLICK</button>
</div>
<div class='col-sm-4'>
<button class='btn btn-primary'>CLICK</button>
</div>
</div>
</div>