I have an directive (my-header) to make the header area fix while page scrolling up. I want to remove the directive on a button click.
<div class="partialInner" id="fixedHeader" my-header>
<div class="col-md-12 col-xs-12 col-sm-12 paddingZero">
<ng-include src="'topNavi.html'"> </ng-include>
</div>
<div class="col-md-12 col-xs-12 col-sm-12 paddingZero">
<ng-include src="'middle.html'"> </ng-include>
</div>
</div>
Remove
when click on the myBtn I want to take the "my-header" attribute out of my code
Appreciate any anwser
Execute this code when your button is pressed
$document.getElementById("fixedHeader").removeAttribute("my-header");
You can use ng-show or ng-if.
<div class="partialInner" id="fixedHeader" my-header ng-if="isHeader" ng-init="isHeader = true">
<div class="col-md-12 col-xs-12 col-sm-12 paddingZero">
<ng-include src="'topNavi.html'"> </ng-include>
</div>
<div class="col-md-12 col-xs-12 col-sm-12 paddingZero">
<ng-include src="'middle.html'"> </ng-include>
</div>
</div>
And in your button click, you can make isHeader to false.
<button ng-click="isHeader = false"> Hide header </button>
Related
I am making an anuglar app and I make use of bootstrap 3 modal dialogs to display images. I'd like to limit the size of the images to to the size of the modal dialog without setting the width and height of the images since the images currently extend over the dialog. Here is what I mean:image
Below is my template code. I'm a novice at template designs so any tips and suggestions would also be much appreciated!
<div class="modal modal-backdrop" tabindex="-1" [ngStyle]="{display: floorPlanChooseDialogShow ? 'block' : 'none'}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
<h5>
Choose your floor plan.
</h5>
</div>
</div>
<div class="modal-body">
<form #f="ngForm">
<div class="container" style="width: 700px;" id="fpImages">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6" id="fpimg">
<img src="../../assets/img/Versailles 3D FP.jpg" alt="">
</div>
<div class="col-xl-6 col-lg-6 col-md-6" id="fpimg">
<img src="../../assets/img/Versailles 3D FP.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6" id="fpimg">
<img src="../../assets/img/Barcelona Combined.jpg" alt="">
</div>
<div class="col-xl-6 col-lg-6 col-md-6" id="fpimg">
<img src="../../assets/img/Bourdeaux.jpg" alt="">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="onToggleChooseFloorPlanDialog()">
Submit
</button> |
<button type="button" class="btn btn-warning" (click)="onToggleChooseFloorPlanDialog()">
Cancel
</button>
</div>
</div>
</div>
You can use the background-size property to make the image fit in the modal.
background-size: 100% 100%;
Here is a working Demo on Stackblitz.
Use the "img-fluid" class of the bootstrap
<img class="img-fluid m-0 p-0" src="exemplo.com">
https://getbootstrap.com/docs/4.0/components/modal/
https://getbootstrap.com/docs/4.0/content/images/
I got it to work. I just used 'img-responsive" class.
<div class="modal-body">
.....
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6"
id="fpimg"
data-toggle="tooltip"
data-placement="top"
title="Lourdes"
>
<img class="img-responsive" src="../../assets/img/Lourdes 1 3D fP.jpg"
name="lourdes"
(click)="selectedFloorPlan($event)"
>
</div>
.....
</div>
I am facing some issues while using ng2-drag-drop .
I want to freely drag and drop from one div to another div and then want to drag the dropped div freely in the droppable area.
Issue 1) Whenever i am dropping my draggable div in the corners of droppable area my divs shrink.
Issue 2) I want to drag the dropped items and for that i have applied draggable attribute to the dropped items. But it just make duplicate copies of the dropped items. Is there any way to control it so that I can drag the dropped item freely without making any duplicate copies?
<div class="container">
<div class="row">
<div class="col-xs-12">
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">Home ></a>
<a class="breadcrumb-item" href="#">Library ></a>
<a class="breadcrumb-item" href="#">Data ></a>
<span class="breadcrumb-item active">Bootstrap</span>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-9">
<div class="row drag-drop-area">
<div class="col-xs-12 col-sm-4 col-lg-3 bg-white left-sidebar">
<button class="btn room-obj-btn">Room Objects <span
class="glyphicon glyphicon-arrow-right pull-right"></span></button>
<div class="category">Type</div>
<div class="drag-drop">(Drag and drop to add item)</div>
<div class="row">
<div class="col-xs-6 col-sm-12 col-md-6 surgery-objects-block"
draggable [dragData]="'Item 1'">
<div class="surgery-elements">item 1</div>
</div>
</div>
</div>
<div class="droppable-area col-xs-12 col-sm-8 col-lg-9 drop-area"
droppable (onDrop)="onItemDrop($event,evt)" style="min-height: 883px">
<div class="abc" *ngFor="let item of droppedItems"
style="position: absolute" [style.top]="item.nativeEvent.layerY + 'px'"
[style.left]="item.nativeEvent.layerX +'px'"> <div class="surgery-
elements" draggable >Item 1</div></div>
</div>
</div>
</div>
</div>
</div>
Please find plunker demo below that i have created.
http://plnkr.co/edit/UtgrchNDpiq6CAssilyR?p=preview
Solution for Issue 2
complete-demo-component.html
Add dragData and dragScope properties to your draggable Div.
Add indexing *ngFor="let item of droppedItems; let i = index;"
Change in draggable div <div class="surgery-elements" draggable [dragScope]="'alreadyDropped'" [dragData]="i" >Item 1</div>
<div class="col-xs-12 col-sm-9">
<div class="row drag-drop-area">
<div class="col-xs-12 col-sm-4 col-lg-3 bg-white left-sidebar">
<button class="btn room-obj-btn">Room Objects <span class="glyphicon glyphicon-arrow-right pull-right"></span></button>
<div class="category">Type</div>
<div class="drag-drop">(Drag and drop to add item)</div>
<div class="row">
<div class="col-xs-6 col-sm-12 col-md-6 surgery-objects-block" draggable [dragScope]="'leftItem'" [dragData]="{'data':'Item 1', isFirstTimeDrop:'true'}">
<div class="surgery-elements">item 1</div>
</div>
</div>
</div>
<div class="droppable-area col-xs-12 col-sm-8 col-lg-9 drop-area" droppable [dropScope]="['leftItem', 'alreadyDropped']" (onDrop)="onItemDrop($event,evt)" style="min-height: 883px">
<div class="abc" *ngFor="let item of droppedItems; let i = index;" style="position: absolute" [style.top]="item.nativeEvent.layerY + 'px'" [style.left]="item.nativeEvent.layerX +'px'"> <div class="surgery-elements" draggable [dragScope]="'alreadyDropped'" [dragData]="i" >Item 1</div></div>
</div>
</div>
</div>
complete-demo-component.ts
onItemDrop(e: any,evt) {
// Get the dropped data here
alert(JSON.stringify(e));
if(e.dragData.isFirstTimeDrop != undefined) {
this.droppedItems.push(e);
} else {
this.droppedItems[e.dragData] = e;
}
}
Plnkr Link http://plnkr.co/edit/pMRjGfHncUDf8PtVQIoT?p=preview
I'm using Bootstrap Twitter and I've an issue there :
<body>
<div class="container col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2 main-progress-bar-container" style="margin-top: 50px;">
<div class="progress sm-progress-bar active">
<div class="progress-bar" id="main-progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="margin-bottom:30px;">
<!-- value here -->
</div>
</div>
</div>
<!-- Page content -->
<div class="container col-xs-12 col-sm-12 col-md-12 col-lg-12 main-container">
<!--Left Part (2/3)-->
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8" id="left-part">
<div class="part-content" id="left-part-content">
</div>
</div>
<!--Right Part (1/3)-->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" id="right-part">
<div class="part-content" id="right-part-content">
<div id="clock-container">
</div>
</div>
</div>
</div>
But when I update my code like this :
<!-- Page content -->
<div class="container col-xs-12 col-sm-12 col-md-12 col-lg-12 main-container">
<!--Left Part (2/3)-->
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8" id="left-part">
<div class="part-content" id="left-part-content">
</div>
</div>
<!--Right Part (1/3)-->
<div class="col-xs-0 col-sm-0 col-md-4 col-lg-4" id="right-part">
<div class="part-content" id="right-part-content">
<div id="clock-container">
</div>
</div>
</div>
</div>
or like this :
<!-- Page content -->
<div class="container col-xs-12 col-sm-12 col-md-12 col-lg-12 main-container">
<!--Left Part (2/3) TEST-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="left-part">
<div class="part-content" id="left-part-content">
</div>
</div>
<!--Right Part REMOVED -->
</div>
Nothing change.. And when I'm looking at my source code in my browser, the code is not updated. On the server, the code is updated. I've the same trouble in local.. then I don't understand. I've tried with another browser, to clear the cache, history, to change the path, etc. Nothing change. It has been updated only when I've removed the whole div main container, then I've nothing to displayed unless my progressbar (as expected).
That's stange. There's someone able to explain me what I've missed ? I'm pretty sure it's a begginer mistake. Thanks.
Edit : I'm starting to belive in ghosts
The classes you are deleting are related to the responsiveness of the site. If the screen size changes, or if the device changes, they would perform the update of the site to fit the screen.
You could also, post a picture of what you see, it can help us to understand what it looks like.
Another thing, you have no content inside your divs, so the website won't show anything if the css is empty or so.
As you have deleted the right part, the div is aligned in such a way. It's the Bootstrap feature
What I am telling is possibility. There might be something else also.
If your code is not being changed by all those efforts then only thing that can control your HTML code is Java Script. It can control your HTML DOM.
Any of your JavaScript function might be reconstructing or editing your HTML code.
Hope this helps.
I try to make design responsive to all web and devices. try to keep first link button all the way to the left(annoucing document stuff button) and other button to all the way right. it gets break for small device. try also wrapping anchor text but not working. please advice.is it possible to achieve it though bootstrap only? if not what custom style i need to make please advice. i can't use jquery.
plunker link
html
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
One way
<div class="panel panel-body col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding pull-left">
<a class="btn btn-default">Annoucing Notification document(anc)</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding pull-right">
<a class="btn btn-default">Remove stuff</a>
</div>
</div><br />
another issue when it has image <br/>
<div class="well col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 no-padding">
<a class="btn btn-default">Annoucing Notification document(anc)</a>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7 no-padding col-lg-push-3">
<a class="btn btn-default"><img id = "img_and" class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGvUXEzMLx4-3F37e89TwVwdRt7wE1F79nMiT_Z7sPOZdk6RzC" style = "width:15pt">Remove stuff</a>
</div>
</div>
</body>
</html>
css
anch{
word-wrap : break-word;
}
#img_and{
width:5pt;
height : 15pt;
vertical-align:top;
}
This is how i would like to make it:
Try adding class="text-right" to the remove button container, something like this:
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding pull-right text-right">
<a class="btn btn-default">Remove stuff</a>
</div>
And also use the break points of each class, when the two buttons are collapsing u could add a "col-xs-12" on the buttons containers so they start in a diferent line.
If you can add a simple draw of the layout you want it's going to be easier to help... difficult to visualize without a draw :/
UPDATE
For the icon inside the button, it's always a better practice to use a background image instead on an image on the html.
HERE YOU CAN SEE A LIVE EXAMPLE. You will have to use media queries for your responsive buttons.
Hope it helps.
I want my date picker to be in the middle of the page, eg. the line where I have: <div class="center-block text-center datepicker"></div>
Obviously center-block and text-center I tried already - but neither change anything. And with the offset it just makes it close to the centre without being perfectly centre aligned.
What do I need to do?
Thanks
<div class='row'>
<div class='col-sm-12'>
<div class='page-header page-header-with-icon mg-t'> <i class='fa-icon-calendar'></i>
<h2>Calendar</h2>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-block text-center datepicker"></div>
</div>
</div>
</div>
</div>
Try something like this:
<div class="col-sm-12">
<div class="datepicker"></div>
</div>
Then give the date picker something like:
.datepicker {
display:inline-block;
margin:0 auto;
}
I haven't tested this, but it would be where I would start.
style="text-align:center;" shall do the trick no? I tested and for me, the "CALENDAR" text is centered
<div class="col-sm-12">
<div class="page-header page-header-with-icon mg-t" style="text-align:center;">
<i class="fa-icon-calendar"></i>
<h2>Calendar</h2>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-block text-center datepicker"></div>
</div>
</div>
</div>
</div>
This is what should solve your problem. Add it somewhere in your custom stylesheet and change the width % to what suits your design.
.datepicker-inline {
width: 20%;
}