It is kind of tricky situation I am in now.
I have two templates that need to be displayed based on ng-switch like:
<div class="summary-card" ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch ="cardData.uniqueCardsDataFlag">
<div ng-switch-when=true>
<div style="background-color: #ccc !important;">
11111 my custom div
</div>
</div>
<div ng-switch-default>
<div class="card">
<div class="card-title" style="text-align: left;" id="{{cardData.label}}">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
</div>
</div>
</div>
So, the first div when ng-switch is set to true needs to be aligned side by side with the others that get generated by ng-repeat.
something like a css-grid.
The problem is <div class="summary-card" that sets the items to display flex. I cannot modify or change it but I only need this style for the divs generated by ng-repeat.
But now it gets applied to all the divs, like:
div.summary-card {
display: inline-block;
margin: 5px 10px 15px 0px;
display: flex;
}
How can I fix the same?
you should follow dom structure like this
<div class="summary-card">
<div>
<div style="background-color: #ccc !important;">
11111 my custom div
</div>
</div>
<div class="cool-grid">
<div class="card">
<div class="card-title" style="text-align: left;">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
<div class="card">
<div class="card-title" style="text-align: left;">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
<div class="card">
<div class="card-title" style="text-align: left;">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
<div class="card">
<div class="card-title" style="text-align: left;">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
</div>
</div>
and your css should be something like
.summary-card {
display: flex;
width: 350px
}
.cool-grid {
display: flex;
flex-wrap: wrap;
}
check this out :- https://codepen.io/anon/pen/gzomoN
This is not the complete answer but it will give you some idea
you can also use grid layout if you want
.summary-card {
display: grid;
grid-template-columns: 200px auto;
grid-coloumn-start: 1;
grid-column-end: 1;
}
.cool-grid {
grid-template-columns: 200px auto;
grid-coloumn-start: 1;
grid-column-end: 3;
display: inline-grid;
flex-wrap: wrap;
}
Related
Current Behavior
I want to align the text in right of the page in a row,
Also the text should start from the same position based on the longest text in the same page.
current code
html:
<div class="row">
<div>Titile</div>
<span class="comment">
long textelement
</span>
</div>
<div class="row">
<div> Titile2</div>
<span class="comment">
small text
</span>
</div>
CSS:
.row{
width: 67%;
display:flex;
}
.comment{
margin-left: auto;
}
demo: demo
Expectation
An easy workaround is to add a div container as a parent, so the child would align properly
.container {
display: flex;
justify-content: space-between;
}
.row {
width: 67%;
display: flex;
flex-direction: column;
}
<div class="container">
<div class="row">
<div>Titile</div>
<span class="comment">
long textelement
</span>
</div>
<div class="row">
<div> Titile2</div>
<span class="comment">
small text
</span>
</div>
</div>
You could add a new div around the content in the row that needs its content on the right. If that div has width: fit-content it will take the width of the biggest child(longest text) and makes it look like the result you wanted.
.row{
width: 67%;
display:flex;
flex-direction: column;
}
.move-right{
align-items: flex-end;
}
.row-items{
width: fit-content;
}
<div class="row">
<div>
Title
</div>
<span class="comment">
long text element
</span>
</div>
<div class="row move-right">
<div class="row-items">
<div>
Titile2
</div>
<span class="comment">
small text
</span>
</div>
</div>
I have a problem that I my grid looks quite different on mobile devices, meanwhile on PCs, it looks just like I wanted, and I realized that it's a grid's issue, but I don't really know how to fix it since it gives different results all the time. Here's the code I use:
.offer .card-img {
width: 220px;
height: 300px;
background-size: cover;
}
.offer {
cursor: pointer;
transition: all 130ms ease;
}
.card-img:hover {
transform: scale(1.01);
background-color: black !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container pt-5">
<div class="container">
<div class="row">
<figure>
<div class="col-md-4">
<div class="card offer">
<div class="card-img" style="background: url('https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg') no-repeat center center" alt=""></div>
<div class="card-img-overlay">
<h5 class="mx-auto">Classic</h5>
</div>
</div>
</div>
</figure>
<figure>
<div class="col-md-4">
<div class="card offer">
<div class="card-img" style="background: url('https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg') no-repeat center center" alt=""></div>
<div class="card-img-overlay">
<h5 class="mx-auto">Classic</h5>
</div>
</div>
</div>
</figure>
</div>
<div class="row justify-content-center">
<figure >
<div class="col-md-6">
<div class="card offer">
<div class="card-img" style="background: url('https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg') no-repeat right center" alt=""></div>
<div class="card-img-overlay">
<h5 class="mx-auto">Classic</h5>
<p class="card-text"></p>
</div>
</div>
</div>
</figure>
</div>
</div>
</div>
and this is how it looks on my website
but when i resize my screen, it changes to this
I would appreciate any help.
I would suggest using flexbox on the parent element for the layout.
Desktop:
.parent{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.image{
width: 45%;
height: auto;
}
Mobile:
.parent{
flex-direction: column;
justify-content: flex-start;
}
.image{
width: 100%;
}
Flexbox is an amazing tool for layouts and I'd highly suggest looking into:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hope it Helps! :)
On the third image, <div class="row justify-content-center"> will make it always centered no matter what,
I have to build a Modular Window for a chat! I allready got a Toolbar and an Flex conatiner which gets filled. Now i got the Problem, that i want to add an Div for a chat input field. I tried nearly everything to align this thing to the bottom but nothing works.
Here is how it should look like:
"Message input" has to be aligned to the bottom
This is my actual HTML-Code:
<div id="chat_dialog" class="modal" style="height: 600px; overflow-y: hidden">
<div class="toolbar_standard">
<div class="toolbar_standard_control_row">
<img src="/static/images/ic_arrow_back_white.svg" class="toolbar-button" data-bind="click: closeChatDialog">
<div style="font-size: 20px; color: white">Chat</div>
<div style="font-size: 20px; color: white; padding-left: 40%" data-bind="html: chatPartnerName"></div>
<div style="..."></div>
</div>
</div>
<div style="display:flex; height: 100%;">
<div data-bind="foreach: contacts" style="width: 300px; overflow-y: scroll;">
<div class="overviewlist_row waves-effect" style="padding-left: 5px; padding-right: 5px" data-bind="click: $parent.onClick.bind($parent)">
<div>
<div>
<p data-bind="html: name"></p>
</div>
</div>
</div>
</div>
<div style="background-color: #e6e6e6; flex-grow: 1; overflow-y: scroll; padding-bottom: 10px">
<div style="height: 80%; display: flex; flex-direction: column;">
<div id="spinner" class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<div data-bind="foreach: messages" style="padding-left: 15px; min-height: 306px">
<p data-bind="html: message, css: messageClassName"></p>
</div>
<div style="height: auto">
<div class="input-field col s6" style="background-color: white; height: auto;">
<input id="message_to_send" type="text" class="validate" data-bind="value: message_to_send" style="width: 94%;">
<a id="sendChat" class="clickable-icon" data-bind="click: sendMessage" style="padding-top: 0px"><img src="/static/images/ic_send_black.svg"></a>
<label for="message_to_send">Nachricht</label>
</div>
</div>
</div>
</div>
</div>
</div>
And this is how it looks like in the Browser:
Here you can see that is is floating under the Div of the "Messages" and that its dynamically moving whit the size of the "Messages" Div!
How and where do i have to set the the alignment to the bottom?
First point: Don't use inline CSS without any necessity.
You can bring your message to bottom by positioning. Try to change your code as below
Add position:relative to <div style="height: 80%; display: flex; flex-direction: column;"> and add position:absolute; bottom:0; to <div style="height: auto">.
Edit: If it doesn't bring your message to exact bottom, then you are suppose to work on the height of <div style="height: 80%; display: flex; flex-direction: column;"> on this part.
Just add position: absolute; and bottom: 0px; in your textarea or container of textarea
Add position: fixed; and bottom:0; to your message input container, to fix the width overlap issue just add property of width: inherit; that will take the width value of parent element.
Otherwise you can assign the parent width to your message container dynamically using JavaScript code :
$(document).ready(()=> {
var parentWidth = $('.parent-element').width();
$('.message-container').width(parentWidth);
});
I wanted to get a center aligned grid list in Angular Material.
This is my code:
<md-content layout-padding>
<md-grid-list md-cols-gt-md="10" md-cols-md="8" md-cols-sm="6" md-cols="4" md-cols-xs="3" md-row-height-gt-md="1:1" md-row-height="1:1" md-row-height-xs="110px" md-gutter-gt-md="10px" md-gutter="2px">
<md-grid-tile ng-repeat="item in homeTilesNavigation">
<div class="compas-home-text">{{item.name}}</div>
</md-grid-tile>
</md-grid-list>
</md-content>
I am getting a result like this:
But I wanted like this:
I wanted the same grid list to be center aligned.
Here is the fiddle code.
You can use CSS Flexbox.
Make your parent (i.e. md-grid-list) a flex container using display: flex & use justify-content: center to align its children (i.e. md-grid-tile) horizontally center. Like:
md-grid-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
I've used div's instead of regular md- type components for demonstration:
md-grid-list is equivalent to .list
md-grid-tile is equivalent to .tile
Have a look at the example snippet below (updated fiddle according to your requirements):
.list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.tile {
width: 100px;
height: 100px;
border: 1px solid #777;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
<div class="list">
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
</div>
Hope this helps!
I have a page with a bootstrap row, which contains several col-md-1 Bootstrap columns (the amount can vary but never exceeds 12). In this JSFiddle you can see an example of what I mean.
Currently if I have four columns (like in my fiddle), they float left and do not use up the full width of the row:
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-1"></div>
<div class="col-sm-1"></div>
<div class="col-sm-1"></div>
...
</div>
What I want to have, is that the columns keep the same width as above, however they get spread out equally throughout the row. Remember, there can be any number of col-md-1s between 1 and 12! The result width four columns should look something like this:
Further requirements and information:
I'm using this in my AngularJS application, so I'd prefer non-jQuery
solutions
If it's in anyway possible, IE9+ support would be nice!
You can use offset method
<div class="container">
<div class="row">
<div class="col-sm-1 col-sm-offset-1"></div>
<div class="col-sm-1 col-sm-offset-1"></div>
<div class="col-sm-1 col-sm-offset-1"></div>
<div class="col-sm-1 col-sm-offset-1"></div>
</div>
</div>
Try this,, this may help you
DEMO
Since you want to have dynamic number of columns, flexbox is the best way to go.
As you required, it supports IE10+
.row {
border: 1px solid gray;
display: flex;
justify-content: space-between;
/* Adding for cross browser support */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.col-sm-1 {
border: 1px solid lightblue;
background: lightblue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-1">3</div>
<div class="col-sm-1">4</div>
</div>
<br>
<div class="row">
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-1">3</div>
<div class="col-sm-1">4</div>
<div class="col-sm-1">5</div>
<div class="col-sm-1">6</div>
<div class="col-sm-1">7</div>
</div>
</div>
Yo can do this just with bootstrap and css pushing the columns.
One possible solution can be:
Html:
<div class="container">
<div class="row col-sm-10 col-sm-push-1">
<div class="col-sm-1"></div>
<div class="col-sm-1 col-sm-push-1"></div>
<div class="col-sm-1 col-sm-push-2"></div>
<div class="col-sm-1 col-sm-push-3"></div>
</div>
</div>
css:
body {
margin: 10px;
}
.row {
border: 1px solid red;
padding: 0 4%;
}
.col-sm-1 {
border: 1px solid blue;
padding: 50px;
}
Demo