html - Flexbox: Att få en inline-komponent att sträcka sig över hela bredden på föräldrakontainern
Jag har ärvt detta projekt från någon annan och jag skulle inte ha satt upp det så här från början, men jag har denna komponent list-item-component:
<!-- These are for the glyph chevrons-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-lg-6 item" *ngFor="let item of pageOfItems; let i = index">
<div class="well col-sm" (click)="showDetails(i)" [ngClass]="{'expanded': i === index}">
<div>
<span *ngIf="i !== index" id="spTitleGlyphRow#row#Col1" class="glyphicon glyphicon-chevron-right programTitleGlyph" aria-hidden="true"> </span>
<span *ngIf="i === index" id="spTitleGlyphRow#row#Col2" class="glyphicon glyphicon-chevron-down programTitleGlyph" aria-hidden="true"> </span>
<span id="spTitleRow#row#Col1" class="programTitle">{{item.programName}}</span>
</div>
<div *ngIf="i === index" id="dvProgramContentRow">
<div class="programInformation">
<p>{{item.description}}</p>
</div>
<div class="programContact">
<b>Contact:</b> {{item.fullName}}<br />
<b>Email:</b> {{item.email}}<br />
<b>Phone:</b> {{item.phone}}<br />
<b>Sector:</b> {{item.baseLocation}}
<br /><br />
<a href="{{item.website}}" target="_blank" class="btn btn-md btn-warning" role="button">Visit Site</a>
<button (click)="showMap(item.streetAddress)" class="btn btn-md btn-primary" role="button" [disabled]="item.streetAddress == 'na' || item.streetAddress == ''">Location</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<app-pagination
[items]="list"
(changePage)="onChangePage($event)"
[pageSize] = "selectedOption"
[renderPage] = "renderPage"
></app-pagination>
</div>
Här är CSS för sidan:
.well {
display: inline-block;
background-color: #f5f5f5;
padding: 30px;
border: 0;
border-radius: 0;
box-shadow: none;
margin-top: 5px;
cursor: pointer;
#dvProgramContentRow{
display: flex;
margin-left: 10px;
.programInformation{
flex: 2;
}
.programContact{
flex: 1;
}
}
}
.expanded {
background-color: #4B494C;
color: white;
}
.item {
padding: 5px;
}
.glyphicon{
margin-right: 5px;
}
Och detta är listan som använder dessa listobjekt:
<div class="container">
<div class="row well jhuBlue" >
<div class="col-sm-6 col-md-6 col-lg-8 color-blue">
<span class="CategoryHeader" *ngIf="list">{{list[0].categoryName}} - Program Names & Details</span>
</div>
<div class="col-sm-3 col-md-3 col-lg-2">
<span class="CategoryHeader">Show</span>
<select id="ddlDisplayNumber" [(ngModel)]="selectedOption" name="ddlDisplayNumber">
<option [ngValue]="listToShow.length">All</option>
<option [ngValue]=10>10</option>
<option [ngValue]=15>15</option>
<option [ngValue]=20>20</option>
</select>
<span class="CategoryHeader">Rows</span>
</div>
<div id="dvFilterClick" class="col-sm-3 col-md-3 col-lg-2 jhuBlue text-right">
<span class="spFilterBy CategoryHeader" (click)="openFilter()">Filter By<img src="../../../assets/images/white-down-arrow-png-2.png" height="27px" width="27px"></span>
</div>
</div>
<!-- <app-filter *ngIf="showFilter"-->
<!-- (selectedLocations)="filterByLocation($event)"-->
<!-- ></app-filter>-->
<div *ngIf="showFilter" id="dvFilterByRow" class="row">
<div class="col-lg-12">
<div id="dvFilterByContentRow" class="well dvFilterByContent">
<div id="dvFilterByProgramContentRow" style="margin-left: 10px">
<span style="font-size:1.2em"><b>LOCATIONS</b></span>
<br /><br />
<table class="clsLocationTable">
<tr>
<td>
<input type="checkbox" (change)="onCheckChange($event)" id="cklnbv" name="cklnbv" [value]="1">
<label for="cklnbv">Bayview and surrounding areas</label>
</td>
<td>
<input type="checkbox" (change)="onCheckChange($event)" id="cklnshe" name="cklnshe" value="4">
<label for="cklnshe">Harbor East</label>
</td>
<td>
<input type="checkbox" (change)="onCheckChange($event)" id="cklnwmtw" name="cklnwmtw" value="7">
<label for="cklnwmtw">Mt. Washington</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" (change)="onCheckChange($event)" id="cklnsnhdcw" name="cklnsnhdcw" value="2">
<label for="cklnsnhdcw">City-wide</label>
</td>
<td>
<input type="checkbox" (change)="onCheckChange($event)" id="cklnsnhd" name="cklnsnhd" value="5">
<label for="cklnsnhd">Homewood and surrounding areas</label>
</td>
<td>
<input type="checkbox" (change)="onCheckChange($event)" id="cklnsn" name="cklnsn" value="8">
<label for="cklnsn">Station North</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" (change)="onCheckChange($event)" id="cklneb" name="cklneb" value="3">
<label for="cklneb">East Baltimore</label>
</td>
<td>
<input type="checkbox" (change)="onCheckChange($event)" id="cklnmtvn" name="cklnmtvn" value="6">
<label for="cklnmtvn">Mt. Vernon</label>
</td>
<td>
</td>
</tr>
</table>
<input id="btnFilter" name="btnFilter" type="submit" value="Filter" (click)="onFilterSubmit()">
</div>
</div>
</div>
</div>
<app-list-item *ngIf="list"
[list] = "listToShow"
[selectedOption] = "selectedOption"
></app-list-item>
</div>
Och css:
.jhuBlue {
background-color: #005eb8;
}
.well {
padding: 30px;
}
.CategoryHeader {
color: white;
}
.spFilterBy {
cursor: pointer;
}
#dvFilterByRow {
margin-bottom: 5px;
padding: 30px;
overflow: hidden;
background-color: #D3D3D3;
}
Detta är det nuvarande beteendet:
Om du behöver .ts är detta den enda relevanta koden:
showDetails(index) {
if (index === this.index) {
this.index = -1;
}else{
this.index = index;
}
}
Det jag behöver ska hända är att det utvidgade svarta område div dvProgramContentRow ska täcka hela raden. Så istället för att skjuta nästa rad nedåt för att ge mer utrymme vill jag bara täcka elementet till vänster eller om du klickar på vänster sida, utvidga för att täcka objektet till höger. Så i princip utvidga horisontellt istället för vertikalt. Som detta:
Hur kan jag ändra stilen jag har för att få detta att hända?
Svar #1
Vi kan använda inbyggda HTML-elementet <details>. Jag har inte använt dina klasser. Se resultatet i helskärmsläge.
:root {
--margin: 5px;
}
* {
box-sizing: border-box;
}
.container {
width: 100%;
border: 1px dashed gray;
padding: 5px;
}
.wrapper {
display: inline-block;
width: calc(50% - var(--margin) * 2.5);
margin: var(--margin);
padding: var(--margin);
}
details {
background-color: #eee;
padding: var(--margin);
}
.wrapper:nth-child(even)>details[open] {
width: calc(200% + var(--margin) * 2.5);
background-color: rgb(30, 12, 12);
color: white;
z-index: 100;
transform: translateX(calc(-50% - var(--margin) * 2.5));
}
.wrapper:nth-child(odd)>details[open] {
width: calc(200% + var(--margin) * 2.5);
background-color: rgb(30, 12, 12);
color: white;
z-index: 100;
position: sticky;
}
summary {
cursor: pointer;
}<div class="container">
<div class="wrapper">
<details>
<summary>One</summary>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis, dolorem sequi delectus nemo eum iusto qui explicabo commodi eveniet quod aliquam totam enim reiciendis fugiat tenetur temporibus? Eveniet.
</p>
</details>
</div>
<div class="wrapper">
<details>
<summary>Two</summary>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis, dolorem sequi delectus nemo eum iusto qui explicabo commodi eveniet quod aliquam totam enim reiciendis fugiat tenetur temporibus? Eveniet.
</p>
</details>
</div>
<div class="wrapper">
<details>
<summary>Three</summary>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis, dolorem sequi delectus nemo eum iusto qui explicabo commodi eveniet quod aliquam totam enim reiciendis fugiat tenetur temporibus? Eveniet.
</p>
</details>
</div>
<div class="wrapper">
<details>
<summary>Four</summary>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis, dolorem sequi delectus nemo eum iusto qui explicabo commodi eveniet quod aliquam totam enim reiciendis fugiat tenetur temporibus? Eveniet.
</p>
</details>
</div>
</div>Täckelement på samma rad gör det otillgängligt. Användaren måste först minska det expanderade elementet för att se det andra elementet på samma rad. Vi kan expandera element för att ta upp hela raden:
* {
box-sizing: border-box;
}
.container {
width: 100%;
border: 1px dashed gray;
padding: 5px;
}
details {
display: inline-block;
width: calc(50% - 13px);
background-color: #eee;
margin: 5px;
padding: 5px;
}
details[open] {
width: 100%;
background-color: rgb(30, 12, 12);
color: white;
}
summary {
cursor: pointer;
}<div class="container">
<details>
<summary>One</summary>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis, dolorem sequi delectus nemo eum iusto qui explicabo commodi eveniet quod aliquam totam enim reiciendis fugiat tenetur temporibus? Eveniet.</p>
</details>
<details>
<summary>Two</summary>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis.
</p>
</details>
<details>
<summary>Three</summary>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis.
</p>
</details>
<details>
<summary>Four</summary>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis.</p>
</details>
</div>Svar #2
Om det är möjligt kan du ändra pilknappen till ett dolt kryssruteelement för att använda det som en växling. Gör sedan något liknande detta:
.checkbox:checked ~ .allOtherCols {
display: none; // or hide it however you want really
}Då kunde du förstora den markerade valda div:en 100%.