I have two divs like this:
First div :
<div class="col-md-6" id="owner_name_76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" style="visibility: visible;float:left;margin-left:2px">
<div class="container-fluid">
<div class="row">
<span class="user" style="color:#000a75;font-weight:bold">Général</span>
</div>
</div>
</div>
Second div :
<div class="col-md-2 px-4 chevron-down collapsed" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" aria-expanded="false" style="float:right;margin-right:2px">
<i class="material-icons float-right material-expand ripple" style="color: #0047FD !important;margin-right:2px">expand_more</i>
</div>
This two div are in :
<a class="mdc-list-item" data-placement="top" title="Acceuil" style="cursor:pointer;width:400px;margin-left:4px;margin-right:0em" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a">
<div class="col-md-6" id="owner_name_76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" style="visibility: visible;float:left;margin-left:2px">
<div class="container-fluid">
<div class="row">
<span class="user" style="color:#000a75;font-weight:bold">Général</span>
</div>
</div>
</div>
<!--Collaspe zone-->
<div class="col-md-2 px-4 chevron-down collapsed" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" aria-expanded="false" style="float:right;margin-right:2px">
<i class="material-icons float-right material-expand ripple" style="color: #0047FD !important;margin-right:2px">expand_more</i>
</div>
</a>
Here what it looks like :
I want the space between the div to be greater than this , so i have tried with float and with margin but i have the same problem.
So i want the icon of expand more to be in the right margin 0 now it is in the center.
I think your codes is not completely posted here, so we have a difference in viewing.
But I see in your codes, the width has been set as fixed value 400px. That's why the icon could not move to right. Please remove the width:400px; in the a tag.
Maybe when you run code at your side, the a tag has been set display: block/inline-block .etc.. So you can see it can not move to right. That why we can not understand what you want.
Something like this? I need more details.
Just used d-flex from bootstrap.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<!-- just to show it whit boostrap -->
<a class="mdc-list-item" data-placement="top" title="Acceuil" style="cursor:pointer;" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a">
<div class="d-flex" id="owner_name_76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" style="visibility: visible;">
<div>
<span class="user" style="color:#000a75;font-weight:bold">Général</span>
</div>
<!--Collaspe zone-->
<div class="ml-auto px-4 chevron-down collapsed" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" aria-expanded="false">
<i class="material-icons float-right material-expand ripple" style="color: #0047FD !important;margin-right:2px">expand_more</i>
</div>
</div>
</a>
My problem was solved ! i followed this exemple
<div class="container">
<div class="row">
<div class="col-sm">
<div class="row">
<span class="user" style="color:#000a75;font-weight:bold">Général</span>
</div>
</div>
<div class="col-sm">
<div class="col-md-2 px-4 chevron-down collapsed" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" aria-expanded="false" style="float:right;margin-right:2px">
<i class="material-icons float-right material-expand ripple" style="color: #0047FD !important;margin-right:2px">expand_more</i>
</div>
</div>
</div>
</div>
Related
I have a card-group with several cards like this:
<div class="card-group">
<div class="justify-content-start p-3">
<div class="card bg-light text-center p-0" style="width: 10rem;">
<div class="card-header justify-content-right align-middle">
<span class="align-middle"><h3> {{ item[1] }} </h3></span>
</div>
<div class="card-body justify-content-center">
<img class="w-50 m-2" style="image-rendering: pixelated;" src="../static/icon.png">
<div class="input-group mt-3 w-100">
<button type="button" class="btn btn-outline-primary w-75" id="toggleButton">Water</button>
<button type="button" class="btn btn-outline-primary w-25" data-bs-toggle="collapse" data-bs-target="#timeCollapse" aria-expanded="false" aria-controls="collapseButton">
<i class="bi bi-three-dots-vertical"></i>
</button>
</div>
<div class="collapse mt-2" id="timeCollapse">
<input type="text" class="form-control" aria-label="Time Input Dropdown">
</div>
</div>
</div>
</div>
</div>
When Testing on Chrome, they work perfectly, stacking into multiple rows.
However when I turn on the mobile Layouts/Narrow the Viewport, the cards start to all go into individual rows.
I have tried narrowing the cards, to make sure they are not just too wide, but nothing seems to work.
What could cause this issue? Also is there a 'smart' width feature for cards, similar to css background-repeat: round;
I have a issue with vertical alignment in a container. I have the following code that does what I want, that is, the first row in the center and the second at the bottom of the container.
Full screen
<header class="masthead" id="home">
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-evenly text-center">
<div class="col-4">
<img src="assets/img/profil.png" class="rounded-circle img-fluid" alt="...">
<hr class="divider" />
<h1 class="text-white font-weight-bold">d3vyce</h1>
</div>
<div class="col-md-8 col-lg-4">
<h2 class="text-white font-weight-bold">Hi 👋, Welcome to my Site!</h2>
<p class="text-white">Developer, CTF Player, Homelab, 3D Printing</p>
<hr class="divider" />
<div class="d-grid col-6 mx-auto">
<a class="btn btn-outline-light btn-lg" href="https://blog.d3vyce.fr" target="_blank"><i class="fa fa-bookmark fa-lg"></i> Blog</a>
<a class="btn mt-2 btn-outline-light btn-lg" href="https://github.com/d3vyce" target="_blank"><i class="fa fa-github fa-lg"></i> Github</a>
</div>
</div>
</div>
<div class="row head-row justify-content-center">
<div class="col-12 mouse_scroll p-0">
<a href="#about">
<div class="mouse">
<div class="wheel"></div>
</div>
<div>
<span class="m_scroll_arrows unu"></span>
<span class="m_scroll_arrows doi"></span>
<span class="m_scroll_arrows trei"></span>
</div>
</a>
</div>
</div>
</div>
</header>
For the alignment at the bottom of the second row I use the following CSS:
.mouse_scroll {
display: block;
width: 24px;
height: 100px;
position: absolute;
bottom: 0; }
The problem happens with the responsive. The columns of the first row are well one on top of the other, but the space between the two is much too important and I can't modify it :(
I tried to search on stackoverflow for answers, but after many tests I'm in a dead end...
Reponsive
Thank you in advance for your answers!
I was working with bootstrap and found out a weird issue. When using collapse button, page width is changed (changes to lower), when I press collapse again to hide the shown content, page is reset to normal. What can be causing the issue?
<a class="btn btn-icon btn-light" data-toggle="collapse" href="#article-content1" role="button" aria-expanded="false" aria-controls="article-content1">
<i class="fas fa-minus"></i>
</a>
<div class="collapse" id="article-content1">
<div class="card-body">
You can show or hide this card.
</div>
<div class="card-footer">
<div class="container-fluid">
<div class="row">
<div class="col-1">
<img alt="image" src="./assets/img/avatar/avatar.png" class="rounded-circle avatar-outline ml-autox" alt="" width="46" height="46" style="margin-top:-3px">
</div>
<div class="col-6 text-left">
<strong>Jasmine Snow</strong></br>
<span class="color-muted">November 11, 2020</span>
</div>
<div class="col-5"><!-- empty --></div>
</div>
</div>
</div>
</div>
I have a code like this
<div class="col-md-12 p-0 m-0" type="button" data-toggle="collapse" data-target="#collapseFace" aria-expanded="false" aria-controls="collapseExample">
<div class="border-bottom border-top f-sz-18">
Face
</div>
</div>
<div class="collapse" id="collapseFace">
<div>
<div><a class="text-decoration-none text-dark f-sz-15 ml-3" href="">123</a></div>
</div>
</div>
How to disable so that the drop-down list does not work when following a link?
When I click on a link, for a split second I see how it starts to open, it's unpleasant
Currently i have the following:
I would like the collapsible cards to be centered under the text and icons.. How would i go about doing that? I have tried using CSS on the div, however nothing seems to make a change in their position?
The code i have so far:
<div class="categoryList">
#result
#if (result == "")
{
foreach (String dataLine in userData)
{
<p>
<a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
#dataLine.Split(delimiterChar)[0]
</a>
<button class="btn"><i class="fas fa-plus secondaryPlusIcon"></i></button>
<button class="btn"><i class="far fa-edit secondaryPlusIcon"></i></button>
<button class="btn"><i class="far fa-trash-alt secondaryPlusIcon"></i></button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body w-25 p-3">
</div>
</div>
}
}
</div>
If Kira's answer does not work you could try this as an alternative.
<div class="collapse" id="collapseExample">
<div class="card card-body w-25 p-3 desiredclassname">
...
</div>
</div>
CSS code:
.desiredclassname{
margin: auto;
}
Hope it helps :)
You can use CSS flexbox to get exact centering
.collapse{
display: flex;
justify-content: center;
}
There is more info here https://www.w3schools.com/css/css3_flexbox.asp
Or, you could wrap it in a <center> tag:
<center>
<div class="collapse" id="collapseExample">
...
</center>
The center tag is discouraged, however. It could be replaced by
<div style="text-align: center;">
<div class="collapse" id="collapseExample">
...
</div>
Hopefully one of these answers helps!