I have a grid of items and when I click on one of them I want to show another component that takes all the width on the row under the clicked item.
Here is a picture of what I want to achieve
I have a button-list-component which contain a button-component that display my items with an ngFor.
When I click on an item the size-selection-component is shown with a ngIf.
My problem is that if I have the size-selection-component in the button-list-component, it append at the end of the grid, and if I have this new component in the button-component then it only takes the width of the column containing the clicked item.
If I put it in position absolute I can make it the width of the container but then the following items won't go down.
Here is a piece of my code
button-list
<div class="wrapper">
<div class="container">
<app-button *ngFor="let button of buttons;" [button]="button" (buttonClicked)="onButtonClicked($event)">
</app-button>
</div>
</div>
.container {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(250rem, 1fr));
grid-gap: 10rem;
place-items: start center;
overflow-x: hidden;
overflow-y: auto;
margin: 10rem;
}
button
<div class="product">
<div class="product-col">
<h2 class="product_title" (click)="onButtonClicked()">{{button.Caption}}</h2>
<img class="product_img" [src]="picture" alt="" (click)="onButtonClicked()">
<span class="product_price" *ngIf="button.Price && button.Price != '0'">{{button.Price / 100 | currency}}</span>
</div>
</div>
<app-size-selection-button-list *ngIf="isSizeSelectionOpen"></app-size-selection-button-list>
How would it be possible to achieve that ? Maybe there is a solution in CSS or maybe another way to insert my component in the grid of items that would work.
Thanks
You don't have to append the div, you can create it and hide it, when user hover over the item div, you show it and set its child tag's innerHTML to whatever you need, like this
<body>
<p onmouseover="show();"></p>AA</p>
<div style="width:100%">
<div style="width:33%">
<p>Name</p>
</div>
<div style="width:33%">
<p>Name</p>
</div>
<div style="width:33%">
<p>Name</p>
</div>
</div>
<div id="blah" style="display:none">
<!-- whatever here -->
</div>
<script>
function show() {
var b=document.getElementById("blah");
b.style.display="block";
// Change some innerHTML of elements inside the blah div here
}
</script>
Related
I am trying to make the first column of a grid scrollable:
<div class="mud-grid">
<div class="mud-grid-item mud-grid-item-xs-4" >
<MudPaper>
<h1>Filter criterias</h1>
<div style="height: 100vh; overflow-y: auto;">
#for(int i=0;i<35;i++){
<div style="height:50px;border:1px solid;"> Filtering parameter ##i </div>
}
</div>
</MudPaper>
</div>
<div class="mud-grid-item mud-grid-item-xs-8">
<h1>Search Results</h1>
#for(int i=0;i<1500;i++){
<div style="height:50px;border:1px solid;"> Searc Results ##i </div>
}
</div>
</div>
My implementation is here and a style of height: 100vh is causing me some troubles
How can I set this value to automatically fit to the contents, even if I have 100 items on left side let the contents scroll completely till bottom allow the right section to stay as separate.
your link doesnt load in for me.. so im a bit confused by your explenation but you could try a width:fit-content overflow: auto
overflow auto should result in a scroll bar appearing
I have something like calendar grid using flexbox inside a ionic 3 project.
The cells are one array
<div class="sb-calendar-wrapper">
<div class="sb-calendar-month">
<div class="sb-calendar-row">
<div class="sb-calendar-cell sb-cell-labels sb-week-day" *ngFor="let day of sbcalendar.dayLabels">
{{day}}
</div>
</div>
<div class="sb-calendar-row">
<div class="sb-calendar-cell sb-cell" *ngFor="let day of calendarDays, let j=index" (click)="openCalendarDay(day)" [ngStyle]="{'height': (day.isOpen) ? '300px' : '60px'}">{{j}}
</div>
</div>
</div>
</div>
.sb-cell {
position: relative;
border-bottom: 1px solid rgba(130, 171, 183, 0.2);
padding: 5px;
height: calc((100vh - 150px)/6);
.sb-calendar-day-list{
position: absolute;
width: 100vw;
left: 0;
top:calc((100vh - 150px)/6);
background: #ccc;
height: calc( 300px - calc((100vh - 150px)/6));
}
}
When I click on any day, i want the "row" to expand to display an area which I can use for e.g. displaying items of that cell.
The problem I'm facing is how to position that list element, so that i will fill the entire space or width. With position:relative of the cell I can position everything fine except for the left:0, which doesnt work for most cells.
In summary when i click any day, a box that fills the entire view width should expand. thanks for any suggestions!
EDIT1
I don't want to create manual rows after each n-cell. The cell array should stay as a single array while the flexitem widths controls how many items are in each row.
I think you can organize those days on the same line as a row.
At the end of each row, you can add a place holder div with an ng-if condition.
Whenever you click on a day of that row, you can check the row index for showing the div or not. That div will hold an area that you want.
html:
<div class="flexbox-row" ng-repeat="row in rows track by $index">
<div class="flexbox-col clickable" ng-click="showRow($index)">
1
</div>
<div class="flexbox-col clickable" ng-click="showRow($index)">
2
</div>
<div class="flexbox-col clickable" ng-click="showRow($index)">
3...
</div>
<!-- Place holder div -->
<div ng-if="showRow() === $index">
<div data-custom-directive></div>
</div>
</div>
Show row code:
scope.showRow = function ($index) {
// Return activeRow
if ($index === undefined) {
return scope.activeRow;
}
// Hide if same row
if ($index === scope.activeFlight) {
scope.activeRow = null;
return;
}
// Show row
scope.activeRow = parseInt($index);
};
I'm using the Bootstrap 3 grid to hide/show nav bar content based on whether or not the user is using an extra small device.
I'm using .hidden-xs and .visible-xs classes. These classes appropriately hide/show the content, but I'm running into two problems:
(1) Hiding the content also shrinks the column spacing by .col-xs-5 because the div is hidden. I tried adding .visible-xs to a subsequent div and using .col-xs-5 to make up the empty space. This works, but only if I place content inside the divs. I just want the columns to be spaced out.
(2) On XS view size, the final item on the Nav bar "Nav" jumps to the next row. I have only accounted for 12 total columns.
See this JSFiddle. I'm trying to nly show "Welcome" on large view and show nothing on XS view.
I here's an idea, you can try instead of adding content. This CSS trick uses :before and :after CSS pseudo-classes.
.no_content {
display: block;
content: "";
width: 151px;
height: 35px;
background: transparent url(tape.png) 0 0 no-repeat;
}
<div class="no_content"></div>
I would look at the grid system further. I believe there is an offset that you can use to offset the div like this:
<div class="row">
<div class="col-xs-5 col-xs-offset-5></div>
<div class="col-xs-2></div>
</div>
Use the pull-right bootstrap class instead of trying to make empty div's fill in the space.
Completely remove the div you added in item (1) to "make up the space". On the div containing "Nav" set the class as pull-right col-xs-1. So the code from your JSFiddle becomes:
<div class="container">
<div class="row" id="header">
<div class="col-xs-5" id="brand-wrapper">
<div class="brand">Brand</div>
</div>
<!-- Hidden on XS Devices -->
<div class="hidden-xs col-xs-5">
<p>
Welcome
</p>
</div>
<!-- Nav -->
<div class="pull-right col-xs-1" id="toggle-wrapper">
<p>Nav</p>
</div>
</div>
</div>
I'm trying to set some divs to width: 100% on Twitter Bootstrap 3 (including no paddings or margins).
JSfiddle: http://jsfiddle.net/rq9ycjcx/
HTML:
<div class="container">
<header>
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x50">
</div>
<div class="col-md-10">Menu</div>
</div>
<div class="row gray">
<div class="col-md-6">
<h1>Page Title</h1>
</div>
<div class="col-md-6">
<div class="breadcrumbs">Main page > page </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/350x150" />
</div>
</div>
</header>
<footer>
<div class="row">
<div class="col-md-12">Content</div>
</div>
<div class="row dark">
<div class="col-md-3">Footer 1</div>
<div class="col-md-3">Footer 2</div>
<div class="col-md-3">Footer 3</div>
<div class="col-md-3">Footer 4</div>
</div>
</footer>
</div>
What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?
Page title and breadcrumbs height is 80px.
If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row).
How to fix it?
Use <div class="container-fluid">. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.
There is 0 padding on container-fluid.
In your code you have what appears to be body content in your header and you also have a div class="container" outside of your header and footer. This is not correct, you should have your container/container-fluid inside of your body. Also for your header you should use <nav="nav navbar-nav">.
Updated Fiddle
As suggested above, you can create a helper class
.padding-0 {
padding: 0;
}
and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:
<div class="row">
<div class="col-md-12 padding-0">
<img src="http://placehold.it/350x150" />
</div>
</div>
For the second problem, set height of .gray class to auto :
#media () {
.gray {
height: auto;
}
}
Note: You could also remove line-height: 80px, it's optional :)
http://jsfiddle.net/rq9ycjcx/8/
There is no "right" way to do that in Bootstrap 3. It means you have to reset padding for the exact column.
You can create a class such as this one:
.col-md-12.resetPadding { padding:0px }
About Main page > page disappearing, I don't see this problem on my browsers (tested on Chrome and FF), but you have line-height: 80px there and as you said your breadcrumbs div has height: 80px;, so try to reduce line-height property and see how it works.
A simple way would be to remove the <div class="col-md-12">...</div> and add your content directly inside the row tag. The row tag removes the left & right gutters, whereas the cold-md-12 essentially adds the gutters back in.
The Bootstrap 3 documentation says that for single full width items you don't need any markup, eg just wrap it in <p> tags. However this will show the 15px gutters due to the page markup. So by simply adding in the row tag and placing your content directly inside this you will get 100% width content and be compliant with the BS3 documentation.
Hello I'm trying to create a navigation bar which is made up of several div containers in one big navigation div.
I'm not sure if my approach is right but I tried to do it like this:
<div id="navigation">
<div class="innen">
<div class="logo">
<img class= "logo" src="logo.png" title="Logo"/>
</div>
<div id="bar">
<!-- Navigation Items are in here --!>
</div>
<div id="gamecard">
<!-- Another right floated Element !-->
</div>
</div>
<div class="unten">
<p>You are here: Main</p>
</div>
</div>
I wanted to push down the bar div to meet the height of the image by using top padding:
#bar{
padding-top: 80px;
}
But now it moves the down gamecard container too. How can I prevent this from happening?
I also added a jfiddle:
http://jsfiddle.net/Cv4p2/
try using position:absolute
<div id="bar" style="position:absolute; padding: 80px 0 0 0">
</div>
Padding is intended to add a cushion inside the container in which you implement it. It appears that you would benefit from using margin. You should replace "padding-top: 80px;" with "margin-top: 80px;" and you would achieve the desired effect.