I want the active element to be centered in parent element when there is enough other child elements after and before it. When the active element is first of the children, it should remain on the left. When the active element is last of the children, it should remain on the right.
<div class="container">
<div class="recent-dates">
<a class="date-text" href="/14159#2020-08-05">Wed 05</a>
<a class="date-text" href="/14159#2020-08-06">Thu 06</a>
<a class="date-text" href="/14159#2020-08-07">Fri 07</a>
<a class="date-text" href="/14159#2020-08-08">Sat 08</a>
<a class="date-text" href="/14159#2020-08-09">Sun 09</a>
<a class="date-text" href="/14159#2020-08-10">Mon 10</a>
<a class="date-text" href="/14159#2020-08-11">Tue 11</a>
<a class="date-text" href="/14159#2020-08-12">Tue 12</a>
<a class="date-text" href="/14159#2020-08-13">Thu 13</a>
<a class="date-text active" href="/14159#2020-08-14">Fri 14</a>
<a class="date-text" href="/14159#2020-08-15">Sat 15</a>
<a class="date-text" href="/14159#2020-08-16">Sun 16</a>
</div>
</div>
.container {
width: 500px
}
.recent-dates {
display: flex;
justify-content: center;
align-items: center;
background-color: #181717;
height: 60px;
overflow: hidden;
}
.date-text {
font-weight: normal;
font-size: 16px;
color: rgba(255, 255, 255, 0.4);
padding: 10px;
}
.date-text.active {
font-weight: bold;
color: #62E479;
}
Jsfiddle to illustrate the problem https://jsfiddle.net/koyz1arv/
I could do this by my self with JavaScript but may be there is some CSS-only solution?
EDIT (to make it clearer)
The active element should be be in the middle of the parent when there is enough elements before and after it. Spaces between child elements must stay the same.
Related
This question already has answers here:
How to stop text from taking up more than 1 line?
(5 answers)
Closed 2 years ago.
I have a problem, it is weird, I thought I have finished a task but I was playing with the browser and then boom, a problem, so I have a container with flex displaying, it contains links elements, each element has a text, but now, the text is not displayed correctly, I don't know why, is it because of flex displaying of the parent ? I don't know, here is what I want to achieve :
But that is what I get :
[![enter image description here][2]][2]
I don't get that return, why is that ?
Here is my html code :
<div class="header__options">
<a href="#" onclick="showDetails(0)">
Dernières minutes
</a>
<a href="#" onclick="showDetails(1)">
Vol
</a>
<a href="#" onclick="showDetails(2)">
Séjour
</a>
<a href="#" onclick="showDetails(3)">
Location
</a>
<a href="#" onclick="showDetails(4)">
Camping
</a>
<a href="#" onclick="showDetails(5)">
Hôtel
</a>
<a href="#" onclick="showDetails(6)">
Train
</a>
</div>
And my css :
.header__options a {
margin-right: 20px;
position: relative;
font-size: 14px;
text-decoration: none;
color: #ffffff;
font-family: Arial, sans-serif;
}
Any help would be much appreciated.
Adding white-space: nowrap will ensure that the element text does not wrap, and stays on one line.
.header__options {
background: black;
}
.header__options a {
margin-right: 20px;
font-size: 14px;
text-decoration: none;
color: #ffffff;
font-family: Arial, sans-serif;
/* Add white-space: nowrap */
white-space: nowrap;
}
<div class="header__options">
<a href="#" onclick="showDetails(0)">
Dernières minutes
</a>
<a href="#" onclick="showDetails(1)">
Vol
</a>
<a href="#" onclick="showDetails(2)">
Séjour
</a>
<a href="#" onclick="showDetails(3)">
Location
</a>
<a href="#" onclick="showDetails(4)">
Camping
</a>
<a href="#" onclick="showDetails(5)">
Hôtel
</a>
<a href="#" onclick="showDetails(6)">
Train
</a>
</div>
You can use the CSS:
white-space: nowrap;
For more information: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_text_white-space
I'm trying to make a navigation menu with tabs and I use negative margin to group the elements and I want the active element to stay over the inactive elements. I used position: absolute but it had no effect. How can I do this?
.nav-item {
margin: -40px;
}
.nav-link {
color: #F2BF5E !important;
font-weight: 700 !important;
}
.nav-link.active {
color: white !important;
font-weight: 700 !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<div style="margin-top: 10%" class="row">
<div class="col">
<ul style="display: flex; justify-content: center;" class="nav nav-pills nav-pills-warning" role="tablist">
<li (click)="teste('entrar')" class="nav-item" style="width: 200px;">
<a class="nav-link active" data-toggle="tab" href="#link1" role="tablist">
Entrar
</a>
</li>
<li (click)="teste('cadastrar')" class="nav-item" style="width: 200px;">
<a data-toggle="tab" class="nav-link" href="#link2" role="tablist">
Cadastrar
</a>
</li>
</ul>
</div>
</div>
Currently, this is what I have:
enter image description here
If I am understanding you correctly, you want an image to be on top of the other, and vice versa, based off of whether it is 'active' or not.
In this case, I would imagine using the z-index is what you would want. It is a CSS property that provides depth/stacking based off of an integer value.
.nav-link.active {
z-index:1;
position:absolute;
color: white !important;
font-weight: 700 !important;
}
You might have to modify your code a bit to get it to how you want exactly; I'm just trying to provide a concept. You can just toggle the z-index value based off of whether it is 'active'
im trying to fire a class when a hover a button, basically inside of my href i have a i icon tag that needs to change color: but is not working:
my css and html:
.catalog-icons i:hover{
color: #ba658a;
}
.catalog-icons .btn-icon:hover ~.catalog-icons i:hover{
color:#ba658a;
background-color: white;
}
<li class="list-inline-item">
<a class="btn btn-icon" href="">
<i class="fontello-icon icon-vet"></i>
</a>
</li>
I added an image since your code does not provide any.
Your rule should be simple:
.your_hovered_element_class:hover affected_elemnt_inside
in your case once .btn-icon is hovered, you change the i background color
.btn-icon:hover i{
background-color: #ba658a;
}
i img {
height: 1em;
}
<li class="list-inline-item">
<a class="btn btn-icon" href="">link text
<i class="fontello-icon icon-vet"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-person-outline-128.png" /></i>
</a>
</li>
I used this example https://jsfiddle.net/wvypo83c/1/ and it work well except for the popup-menus.
On all the cells I have popup-menus so I can edit the values. The popup-menu from the first column appears behind the values. I thought the problem was the z-index, so I changed the z-index of the panel from the popup-menu to a higher number. But now the popup-menu shows in the cell making the cell bigger.
How do I make the popup-menu panel to appear in other layer and not inside of the cell?
Dev-Environment:
Angular CLI 6.1.1
popup-menu bs-dropdown
css:
.tbody th {
position: sticky;
left: 0;
z-index: 1;
border: 1px solid #CCD7E0;
background-color: #FFFFFF;
}
.menu div
{
position: relative;
z-index:1000;
}
Thank you for your help,
Luis
More Complete HTML and the CSS:
<tr *ngFor="let row of rows">
<th class="properties2-th">
<div class="d-inline-block" [style.margin-left.px]="row.left_margin">
<ul class="topbar__nav main-nav properties2-menu">
<li class="main-nav__item dropdown-container">
<div dropdown (onShown)="row.menuState='shown'" (onHidden)="row.menuState='hidden'">
<a class="main-nav__link" href="#" dropdownToggle (click)="false">
<span class="property-name">{{row.name}}</span>
<i class="icon main-nav__link-icon" [class.icon-angle-down]="row.menuState=='hidden'" [class.icon-angle-up]="row.menuState=='shown'"></i>
</a>
<div class="dropdown dropdown-menu ">
<ul class="dropdown-menu--topbar main-nav">
<li class="dropdown-menu__item">
<a class="dropdown-menu__link" (click)="openKeyModal(keyContent, row, null, $event)" style="cursor: pointer">Add new sub key</a>
</li><li class="dropdown-menu__item">
<a class="dropdown-menu__link" (click)="openKeyModal(keyContent, row.parentKey, row, $event)" style="cursor: pointer">Edit the key</a>
</li><li class="dropdown-menu__item">
<a class="dropdown-menu__link" (click)="removeKey(row, $event)" style="cursor: pointer">Remove the key</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</th>
<!--- for the td popup-menu works well -->
<td class="properties2-td" *ngFor="let environment of environments">
<a *ngIf="!getValue(row, environment) && isLeaf(row)" class="nav-link" title="Add new value"
(click)="openValModal(valContent, row, environment, $event)" href=""><span
class="property-name">Add new value[+]</span></a>
<div class="d-inline-block" *ngIf="getValue(row, environment)">
<a *ngIf="isLeaf(row) && !getValue(row, environment).value" class="nav-link" title="Add new value"
(click)="openValModal(valContent, row, environment, $event)" href=""><span
class="property-name">Add new value[+]</span></a>
<div class="d-inline-block" *ngIf="isLeaf(row) && getValue(row, environment).value">
<ul class="topbar__nav main-nav">
<li class="main-nav__item dropdown-container">
<div dropdown (onShown)="getValue(row, environment).menuState='shown'" (onHidden)="getValue(row, environment).menuState='hidden'">
<a class="main-nav__link " href="#" dropdownToggle (click)="false" title="{{getValue(row, environment).value}}">
<span class="property-value">{{
(getValue(row, environment).value.length > 30) ?
(getValue(row, environment).value | slice:0:27) + '...' :
(getValue(row, environment).value)
}}</span>
<i class="icon main-nav__link-icon" [class.icon-angle-down]="getValue(row, environment).menuState=='hidden'" [class.icon-angle-up]="getValue(row, environment).menuState=='shown'"></i>
</a>
<div class="dropdown dropdown-menu">
<ul class="dropdown-menu--topbar main-nav">
<li class="dropdown-menu__item">
<a class="dropdown-menu__link" (click)="openValModal(valContent, row, environment, $event)" style="cursor: pointer">Edit the value</a>
</li><li class="dropdown-menu__item">
<a class="dropdown-menu__link" (click)="clearValue(getValue(row, environment), $event)" style="cursor: pointer">Clear the value</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</td>
</tr>
.properties2-table-div {
max-width: 1024px;
max-height: 768px;
overflow: scroll;
position: relative;
}
.properties2-table {
position: relative;
border-collapse: collapse;
}
.properties2-td, .properties2-th {
padding: 0.25em;
max-width: 400px;
min-width: 300px;
height: 50px;
}
.properties2-thead th {
position: sticky;
top: 0;
box-sizing: border-box;
border: 1px solid #CCD7E0;
background: linear-gradient(180deg, #FFFFFF 0%, #F5F8FA 100%);
}
.properties2-thead th:first-child {
left: 0;
z-index: 10;
}
.properties2-tbody th {
position: sticky;
left: 0;
z-index: 1;
border: 1px solid #CCD7E0;
background-color: #FFFFFF;
}
.properties2-menu div
{
/*
static the same effect as the sticky
relative the same effect as the sticky
fixed
absolute
sticky
*/
position: relative;
z-index:1000;
}
.properties2-tbody td {
border: 1px solid #CCD7E0;
background-color: #FFFFFF;
}
CSS:
nav a{
display: none;
}
#menubutton:checked, nav a{
display: block;
color: black;
text-decoration: none;
}
HTML:
<nav>
<img src="pictures/close.png" alt="Close" height="20" width="20">
<a class="navitem" id="firstnavitem" href="index.php">Home</a>
<a class="navitem" href="#">Test</a>
<a class="navitem" href="#">Test</a>
<a class="navitem" href="#">Test</a>
</nav>
I want that the HTML code isn't displayed until the #menubutton is :checked.
(The #menubutton is an invisible checkbox).
If the #menubutton is :checked I want, that the HTML code is displayed. The code that should be displayed is in the css "nav a{}".
Use the adjacent sibling selector +.
#menubutton {
display: none;
}
nav * {
display: none;
}
#menubutton:checked + nav * {
display: block;
color: black;
text-decoration: none;
}
#closeMenu {
height: 20px;
width: 20px;
}
<label for="menubutton">MenuButton</label>
<input type="checkbox" id="menubutton" />
<nav>
<label for="menubutton"><img src="pictures/close.png" alt="close menu" id="closeMenu" /></label>
<a class="navitem" id="firstnavitem" href="index.php">Home</a>
<a class="navitem" href="#">Test</a>
<a class="navitem" href="#">Test</a>
<a class="navitem" href="#">Test</a>
</nav>
If there are other elements in between your #menubutton and your nav element, you might need to make use of the general sibling selector ~ instead.
css
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}
html
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>
This works with pure CSS and HTML using the :target psuedo class. It works as of IE 9. See MSDN for more info.
Watch out: the :target psuedo-class relies on the fragment (or hash) of the current URL, so it might mess up internal page navigation.
#menu {
display: none;
}
#menu:target {
display: block;
}
Menu
<nav id="menu">
Close |
<a class="navitem" id="firstnavitem" href="index.php">Home</a> |
<a class="navitem" href="#">Test</a> |
<a class="navitem" href="#">Test</a> |
<a class="navitem" href="#">Test</a>
</nav>