I can't get a component to display as inline-block in Angular2Block-level elements within display: inline-blockHow do I remove the space between inline-block elements?how to make div width fits nested inline images within?What is the difference between display: inline and display: inline-block?CSS display: inline vs inline-blockHTML inline-block layoutCSS: Using text-align: center to centre a DIV using display: inline-blockStrange behavior on computed height and childrens margindiv with inline-block not resizingAngular2 component render to a div reference and not css selector
Why do I get two different answers for this counting problem?
NMaximize is not converging to a solution
A case of the sniffles
Client team has low performances and low technical skills: we always fix their work and now they stop collaborate with us. How to solve?
How old can references or sources in a thesis be?
What's that red-plus icon near a text?
Codimension of non-flat locus
Why "Having chlorophyll without photosynthesis is actually very dangerous" and "like living with a bomb"?
Important Resources for Dark Age Civilizations?
Why doesn't Newton's third law mean a person bounces back to where they started when they hit the ground?
Can you really stack all of this on an Opportunity Attack?
Intersection point of 2 lines defined by 2 points each
Are the number of citations and number of published articles the most important criteria for a tenure promotion?
LWC SFDX source push error TypeError: LWC1009: decl.moveTo is not a function
How can I prevent hyper evolved versions of regular creatures from wiping out their cousins?
Why doesn't H₄O²⁺ exist?
Revoked SSL certificate
How does quantile regression compare to logistic regression with the variable split at the quantile?
A newer friend of my brother's gave him a load of baseball cards that are supposedly extremely valuable. Is this a scam?
LaTeX: Why are digits allowed in environments, but forbidden in commands?
Horror movie about a virus at the prom; beginning and end are stylized as a cartoon
Does detail obscure or enhance action?
High voltage LED indicator 40-1000 VDC without additional power supply
Replacing matching entries in one column of a file by another column from a different file
I can't get a component to display as inline-block in Angular2
Block-level elements within display: inline-blockHow do I remove the space between inline-block elements?how to make div width fits nested inline images within?What is the difference between display: inline and display: inline-block?CSS display: inline vs inline-blockHTML inline-block layoutCSS: Using text-align: center to centre a DIV using display: inline-blockStrange behavior on computed height and childrens margindiv with inline-block not resizingAngular2 component render to a div reference and not css selector
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
In my Angular2 app, I have a parent component, which via an ngFor loop generates a number of instances of a child component - app-video-container - which is essentially a div with an iframe inside. I want these videos to display in a grid type layout. I am trying to use inline-block to accomplish this, as below, but it does not work, it just displays as a single column of videos. If I use float:left instead of inline-block, that displays the videos in a grid the way I want, but I need to able to use inline-block instead. What am I doing wrong? Why does float work but not inline-block? Here is the condensed/simplified version my code:
Parent component HTML:
<div *ngFor="let video of videos">
<app-video-container>[videoURL]=video.videoURL</app-video-container>
</div>
CSS for parent component
:host
background-color:black;
position:relative;
App-video-container component HTML:
<div class="videoContainer">
<iframe [src]="videoURL" allowfullscreen></iframe>
</div>
App-video-container component CSS
.videoContainer
width:20%;
height:100px;
margin-left:4%;
margin-bottom: 20px;
display:inline-block;
css
angular asked Mar 21 at 22:52
namkcuRnamkcuR
303
add a comment |
In my Angular2 app, I have a parent component, which via an ngFor loop generates a number of instances of a child component - app-video-container - which is essentially a div with an iframe inside. I want these videos to display in a grid type layout. I am trying to use inline-block to accomplish this, as below, but it does not work, it just displays as a single column of videos. If I use float:left instead of inline-block, that displays the videos in a grid the way I want, but I need to able to use inline-block instead. What am I doing wrong? Why does float work but not inline-block? Here is the condensed/simplified version my code:
Parent component HTML:
<div *ngFor="let video of videos">
<app-video-container>[videoURL]=video.videoURL</app-video-container>
</div>
CSS for parent component
:host
background-color:black;
position:relative;
App-video-container component HTML:
<div class="videoContainer">
<iframe [src]="videoURL" allowfullscreen></iframe>
</div>
App-video-container component CSS
.videoContainer
width:20%;
height:100px;
margin-left:4%;
margin-bottom: 20px;
display:inline-block;
css
angular asked Mar 21 at 22:52
namkcuRnamkcuR
303
Try usingdisplay: flexinstead.
– Benjamin
Mar 21 at 22:53
add a comment |
In my Angular2 app, I have a parent component, which via an ngFor loop generates a number of instances of a child component - app-video-container - which is essentially a div with an iframe inside. I want these videos to display in a grid type layout. I am trying to use inline-block to accomplish this, as below, but it does not work, it just displays as a single column of videos. If I use float:left instead of inline-block, that displays the videos in a grid the way I want, but I need to able to use inline-block instead. What am I doing wrong? Why does float work but not inline-block? Here is the condensed/simplified version my code:
Parent component HTML:
<div *ngFor="let video of videos">
<app-video-container>[videoURL]=video.videoURL</app-video-container>
</div>
CSS for parent component
:host
background-color:black;
position:relative;
App-video-container component HTML:
<div class="videoContainer">
<iframe [src]="videoURL" allowfullscreen></iframe>
</div>
App-video-container component CSS
.videoContainer
width:20%;
height:100px;
margin-left:4%;
margin-bottom: 20px;
display:inline-block;
css
angular asked Mar 21 at 22:52
namkcuRnamkcuR
303
In my Angular2 app, I have a parent component, which via an ngFor loop generates a number of instances of a child component - app-video-container - which is essentially a div with an iframe inside. I want these videos to display in a grid type layout. I am trying to use inline-block to accomplish this, as below, but it does not work, it just displays as a single column of videos. If I use float:left instead of inline-block, that displays the videos in a grid the way I want, but I need to able to use inline-block instead. What am I doing wrong? Why does float work but not inline-block? Here is the condensed/simplified version my code:
Parent component HTML:
<div *ngFor="let video of videos">
<app-video-container>[videoURL]=video.videoURL</app-video-container>
</div>
CSS for parent component
:host
background-color:black;
position:relative;
App-video-container component HTML:
<div class="videoContainer">
<iframe [src]="videoURL" allowfullscreen></iframe>
</div>
App-video-container component CSS
.videoContainer
width:20%;
height:100px;
margin-left:4%;
margin-bottom: 20px;
display:inline-block;
css
angular css
angular asked Mar 21 at 22:52
namkcuRnamkcuR
303
asked Mar 21 at 22:52
namkcuRnamkcuR
303
asked Mar 21 at 22:52
namkcuRnamkcuR
303
asked Mar 21 at 22:52
namkcuRnamkcuR
303
asked Mar 21 at 22:52
namkcuRnamkcuR
303
303
Try usingdisplay: flexinstead.
– Benjamin
Mar 21 at 22:53
add a comment |
Try usingdisplay: flexinstead.
– Benjamin
Mar 21 at 22:53
Try using
display: flex instead.– Benjamin
Mar 21 at 22:53
Try using
display: flex instead.– Benjamin
Mar 21 at 22:53
add a comment |
1 Answer
1
active
oldest
votes
inline-block is not working the way you are expecting it to because you have a div wrapped around each .videoContainer div.
Remove the videoContainer class from the inner div
<div>
<iframe [src]="videoURL" allowfullscreen></iframe>
</div>
and add it to the outer div
<div class="videoContainer" *ngFor="let video of videos">
<app-video-container>[videoURL]=video.videoURL</app-video-container>
</div>
answered Mar 21 at 22:57
abney317abney317
2,34731738
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%2f55290411%2fi-cant-get-a-component-to-display-as-inline-block-in-angular2%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
inline-block is not working the way you are expecting it to because you have a div wrapped around each .videoContainer div.
Remove the videoContainer class from the inner div
<div>
<iframe [src]="videoURL" allowfullscreen></iframe>
</div>
and add it to the outer div
<div class="videoContainer" *ngFor="let video of videos">
<app-video-container>[videoURL]=video.videoURL</app-video-container>
</div>
answered Mar 21 at 22:57
abney317abney317
2,34731738
add a comment |
inline-block is not working the way you are expecting it to because you have a div wrapped around each .videoContainer div.
Remove the videoContainer class from the inner div
<div>
<iframe [src]="videoURL" allowfullscreen></iframe>
</div>
and add it to the outer div
<div class="videoContainer" *ngFor="let video of videos">
<app-video-container>[videoURL]=video.videoURL</app-video-container>
</div>
answered Mar 21 at 22:57
abney317abney317
2,34731738
add a comment |
inline-block is not working the way you are expecting it to because you have a div wrapped around each .videoContainer div.
Remove the videoContainer class from the inner div
<div>
<iframe [src]="videoURL" allowfullscreen></iframe>
</div>
and add it to the outer div
<div class="videoContainer" *ngFor="let video of videos">
<app-video-container>[videoURL]=video.videoURL</app-video-container>
</div>
answered Mar 21 at 22:57
abney317abney317
2,34731738
inline-block is not working the way you are expecting it to because you have a div wrapped around each .videoContainer div.
Remove the videoContainer class from the inner div
<div>
<iframe [src]="videoURL" allowfullscreen></iframe>
</div>
and add it to the outer div
<div class="videoContainer" *ngFor="let video of videos">
<app-video-container>[videoURL]=video.videoURL</app-video-container>
</div>
answered Mar 21 at 22:57
abney317abney317
2,34731738
answered Mar 21 at 22:57
abney317abney317
2,34731738
answered Mar 21 at 22:57
abney317abney317
2,34731738
answered Mar 21 at 22:57
abney317abney317
2,34731738
2,34731738
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%2f55290411%2fi-cant-get-a-component-to-display-as-inline-block-in-angular2%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
Try using
display: flexinstead.– Benjamin
Mar 21 at 22:53