How do I disregard bootstrap class on condition with angular?
Context: We are trying to build a layout builder app, and want to see how the grid looks on tablet/mobile/desktop views.
<div class="col-sm-3 col-lg-5 col-md-7 black"></div>
For example, if I have this kind of div, and the class kick in depending on the view size. So if I am on a desktop, what can I do to disregard lg class, and show sm class when I choose mobile or vice versa?
PS: I have searched around stackoverflow, and couldn't find the answer.
Edit: Common answers: Simple answer is yes, resize your browser, but I don't want the user to do it, I as a dev know about this, but a non technical person will not know about this, he/she would click on mobile/tablet Icon to view their page.
javascript css angular sass responsive-design
asked Nov 23 '18 at 18:10
AijazAijaz
10115
|
show 5 more comments
Context: We are trying to build a layout builder app, and want to see how the grid looks on tablet/mobile/desktop views.
<div class="col-sm-3 col-lg-5 col-md-7 black"></div>
For example, if I have this kind of div, and the class kick in depending on the view size. So if I am on a desktop, what can I do to disregard lg class, and show sm class when I choose mobile or vice versa?
PS: I have searched around stackoverflow, and couldn't find the answer.
Edit: Common answers: Simple answer is yes, resize your browser, but I don't want the user to do it, I as a dev know about this, but a non technical person will not know about this, he/she would click on mobile/tablet Icon to view their page.
javascript css angular sass responsive-design
asked Nov 23 '18 at 18:10
AijazAijaz
10115
You resize your browser?
– Andrei Gheorghiu
Nov 23 '18 at 18:18
No idea what you mean by "disregard" or what the specific problem is. The media queries should take care of window size. If you have a problem provide a Minimal, Complete, and Verifiable example that reproduces it
– charlietfl
Nov 23 '18 at 18:20
UsengClass. It will fulfill your needs
– Yousef khan
Nov 23 '18 at 18:23
He wants to view the page "as mobile" on a desktop. While Chrome does allow you to emulate a mobile device and request mobile website from desktop and viceversa, responsiveness in Bootstrap is implemented strictly on viewport size in pixels. So simply resizing your browser window will let you observe each case, depending on current browser width.
– Andrei Gheorghiu
Nov 23 '18 at 18:23
1
Why not just load the app in an iframe of that size?
– Kyle
Nov 23 '18 at 18:28
|
show 5 more comments
Context: We are trying to build a layout builder app, and want to see how the grid looks on tablet/mobile/desktop views.
<div class="col-sm-3 col-lg-5 col-md-7 black"></div>
For example, if I have this kind of div, and the class kick in depending on the view size. So if I am on a desktop, what can I do to disregard lg class, and show sm class when I choose mobile or vice versa?
PS: I have searched around stackoverflow, and couldn't find the answer.
Edit: Common answers: Simple answer is yes, resize your browser, but I don't want the user to do it, I as a dev know about this, but a non technical person will not know about this, he/she would click on mobile/tablet Icon to view their page.
javascript css angular sass responsive-design
asked Nov 23 '18 at 18:10
AijazAijaz
10115
Context: We are trying to build a layout builder app, and want to see how the grid looks on tablet/mobile/desktop views.
<div class="col-sm-3 col-lg-5 col-md-7 black"></div>
For example, if I have this kind of div, and the class kick in depending on the view size. So if I am on a desktop, what can I do to disregard lg class, and show sm class when I choose mobile or vice versa?
PS: I have searched around stackoverflow, and couldn't find the answer.
Edit: Common answers: Simple answer is yes, resize your browser, but I don't want the user to do it, I as a dev know about this, but a non technical person will not know about this, he/she would click on mobile/tablet Icon to view their page.
javascript css angular sass responsive-design
javascript css angular sass responsive-design
asked Nov 23 '18 at 18:10
AijazAijaz
10115
asked Nov 23 '18 at 18:10
AijazAijaz
10115
edited Nov 23 '18 at 18:27
Aijaz
asked Nov 23 '18 at 18:10
AijazAijaz
10115
asked Nov 23 '18 at 18:10
AijazAijaz
10115
asked Nov 23 '18 at 18:10
AijazAijaz
10115
10115
You resize your browser?
– Andrei Gheorghiu
Nov 23 '18 at 18:18
No idea what you mean by "disregard" or what the specific problem is. The media queries should take care of window size. If you have a problem provide a Minimal, Complete, and Verifiable example that reproduces it
– charlietfl
Nov 23 '18 at 18:20
UsengClass. It will fulfill your needs
– Yousef khan
Nov 23 '18 at 18:23
He wants to view the page "as mobile" on a desktop. While Chrome does allow you to emulate a mobile device and request mobile website from desktop and viceversa, responsiveness in Bootstrap is implemented strictly on viewport size in pixels. So simply resizing your browser window will let you observe each case, depending on current browser width.
– Andrei Gheorghiu
Nov 23 '18 at 18:23
1
Why not just load the app in an iframe of that size?
– Kyle
Nov 23 '18 at 18:28
|
show 5 more comments
You resize your browser?
– Andrei Gheorghiu
Nov 23 '18 at 18:18
No idea what you mean by "disregard" or what the specific problem is. The media queries should take care of window size. If you have a problem provide a Minimal, Complete, and Verifiable example that reproduces it
– charlietfl
Nov 23 '18 at 18:20
UsengClass. It will fulfill your needs
– Yousef khan
Nov 23 '18 at 18:23
He wants to view the page "as mobile" on a desktop. While Chrome does allow you to emulate a mobile device and request mobile website from desktop and viceversa, responsiveness in Bootstrap is implemented strictly on viewport size in pixels. So simply resizing your browser window will let you observe each case, depending on current browser width.
– Andrei Gheorghiu
Nov 23 '18 at 18:23
1
Why not just load the app in an iframe of that size?
– Kyle
Nov 23 '18 at 18:28
You resize your browser?
– Andrei Gheorghiu
Nov 23 '18 at 18:18
You resize your browser?
– Andrei Gheorghiu
Nov 23 '18 at 18:18
No idea what you mean by "disregard" or what the specific problem is. The media queries should take care of window size. If you have a problem provide a Minimal, Complete, and Verifiable example that reproduces it
– charlietfl
Nov 23 '18 at 18:20
No idea what you mean by "disregard" or what the specific problem is. The media queries should take care of window size. If you have a problem provide a Minimal, Complete, and Verifiable example that reproduces it
– charlietfl
Nov 23 '18 at 18:20
Use
ngClass. It will fulfill your needs– Yousef khan
Nov 23 '18 at 18:23
Use
ngClass. It will fulfill your needs– Yousef khan
Nov 23 '18 at 18:23
He wants to view the page "as mobile" on a desktop. While Chrome does allow you to emulate a mobile device and request mobile website from desktop and viceversa, responsiveness in Bootstrap is implemented strictly on viewport size in pixels. So simply resizing your browser window will let you observe each case, depending on current browser width.
– Andrei Gheorghiu
Nov 23 '18 at 18:23
He wants to view the page "as mobile" on a desktop. While Chrome does allow you to emulate a mobile device and request mobile website from desktop and viceversa, responsiveness in Bootstrap is implemented strictly on viewport size in pixels. So simply resizing your browser window will let you observe each case, depending on current browser width.
– Andrei Gheorghiu
Nov 23 '18 at 18:23
1
1
Why not just load the app in an iframe of that size?
– Kyle
Nov 23 '18 at 18:28
Why not just load the app in an iframe of that size?
– Kyle
Nov 23 '18 at 18:28
|
show 5 more comments
1 Answer
1
active
oldest
votes
try this
TS
export class AppComonent implements OnInit {
wWidth: number;
wHeight: number;
constructor(){ }
ngOnInit() {
const ele = document.querySelector('.lorem') as HTMLElement;
ele.addEventListener('click', (e: Event) => {
this.wWidth = (<HTMLElement>e.target).clientWidth;
this.wHeight = (<HTMLElement>e.target).clientHeight; // for ex purposes
});
}
}
use the native accessing selector in javascript to access to the element.
HTML
<div [ngClass]="{'col-sm-3': wWidth <= 575, 'col-md-7': (wWidth > 575) && (wWidth <= 992), 'col-lg-5': wWidth > 992 }"></div>
edit the expression as your needs that just the concept how to implement that.
answered Nov 23 '18 at 19:09
Amir FawzyAmir Fawzy
24118
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53451281%2fhow-do-i-disregard-bootstrap-class-on-condition-with-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
try this
TS
export class AppComonent implements OnInit {
wWidth: number;
wHeight: number;
constructor(){ }
ngOnInit() {
const ele = document.querySelector('.lorem') as HTMLElement;
ele.addEventListener('click', (e: Event) => {
this.wWidth = (<HTMLElement>e.target).clientWidth;
this.wHeight = (<HTMLElement>e.target).clientHeight; // for ex purposes
});
}
}
use the native accessing selector in javascript to access to the element.
HTML
<div [ngClass]="{'col-sm-3': wWidth <= 575, 'col-md-7': (wWidth > 575) && (wWidth <= 992), 'col-lg-5': wWidth > 992 }"></div>
edit the expression as your needs that just the concept how to implement that.
answered Nov 23 '18 at 19:09
Amir FawzyAmir Fawzy
24118
add a comment |
try this
TS
export class AppComonent implements OnInit {
wWidth: number;
wHeight: number;
constructor(){ }
ngOnInit() {
const ele = document.querySelector('.lorem') as HTMLElement;
ele.addEventListener('click', (e: Event) => {
this.wWidth = (<HTMLElement>e.target).clientWidth;
this.wHeight = (<HTMLElement>e.target).clientHeight; // for ex purposes
});
}
}
use the native accessing selector in javascript to access to the element.
HTML
<div [ngClass]="{'col-sm-3': wWidth <= 575, 'col-md-7': (wWidth > 575) && (wWidth <= 992), 'col-lg-5': wWidth > 992 }"></div>
edit the expression as your needs that just the concept how to implement that.
answered Nov 23 '18 at 19:09
Amir FawzyAmir Fawzy
24118
add a comment |
try this
TS
export class AppComonent implements OnInit {
wWidth: number;
wHeight: number;
constructor(){ }
ngOnInit() {
const ele = document.querySelector('.lorem') as HTMLElement;
ele.addEventListener('click', (e: Event) => {
this.wWidth = (<HTMLElement>e.target).clientWidth;
this.wHeight = (<HTMLElement>e.target).clientHeight; // for ex purposes
});
}
}
use the native accessing selector in javascript to access to the element.
HTML
<div [ngClass]="{'col-sm-3': wWidth <= 575, 'col-md-7': (wWidth > 575) && (wWidth <= 992), 'col-lg-5': wWidth > 992 }"></div>
edit the expression as your needs that just the concept how to implement that.
answered Nov 23 '18 at 19:09
Amir FawzyAmir Fawzy
24118
try this
TS
export class AppComonent implements OnInit {
wWidth: number;
wHeight: number;
constructor(){ }
ngOnInit() {
const ele = document.querySelector('.lorem') as HTMLElement;
ele.addEventListener('click', (e: Event) => {
this.wWidth = (<HTMLElement>e.target).clientWidth;
this.wHeight = (<HTMLElement>e.target).clientHeight; // for ex purposes
});
}
}
use the native accessing selector in javascript to access to the element.
HTML
<div [ngClass]="{'col-sm-3': wWidth <= 575, 'col-md-7': (wWidth > 575) && (wWidth <= 992), 'col-lg-5': wWidth > 992 }"></div>
edit the expression as your needs that just the concept how to implement that.
answered Nov 23 '18 at 19:09
Amir FawzyAmir Fawzy
24118
answered Nov 23 '18 at 19:09
Amir FawzyAmir Fawzy
24118
answered Nov 23 '18 at 19:09
Amir FawzyAmir Fawzy
24118
answered Nov 23 '18 at 19:09
Amir FawzyAmir Fawzy
24118
24118
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53451281%2fhow-do-i-disregard-bootstrap-class-on-condition-with-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You resize your browser?
– Andrei Gheorghiu
Nov 23 '18 at 18:18
No idea what you mean by "disregard" or what the specific problem is. The media queries should take care of window size. If you have a problem provide a Minimal, Complete, and Verifiable example that reproduces it
– charlietfl
Nov 23 '18 at 18:20
Use
ngClass. It will fulfill your needs– Yousef khan
Nov 23 '18 at 18:23
He wants to view the page "as mobile" on a desktop. While Chrome does allow you to emulate a mobile device and request mobile website from desktop and viceversa, responsiveness in Bootstrap is implemented strictly on viewport size in pixels. So simply resizing your browser window will let you observe each case, depending on current browser width.
– Andrei Gheorghiu
Nov 23 '18 at 18:23
1
Why not just load the app in an iframe of that size?
– Kyle
Nov 23 '18 at 18:28