I'm making a navbar in bootstrap 3 and I found something weird.
<nav className="navbar navbar-inverse">
<div className="container-fluid">
<div className="container">
<div className="row">
<div className="col-sm-3">
<a href="#">
Home
</a>
</div>
<div className="col-sm-3">
<a href="#">
About us
</a>
</div>
<div className="col-sm-3">
<a href="#">
Surveys
</a>
</div>
<div className="col-sm-3">
<a href="#">
Statistics
</a>
</div>
</div>
</div>
</div>
This is structure of this component and here is CSS, where I try to make <a> attribute larger on :hover
a:hover {
text-decoration: none;
color: inherit;
transform: scale(1.1);
}
And I can't help wondering why despite others attributes working, transform shows no effect. Not sure if it changes anything, but maybe I'll add that I use React for this application.
Only elements positioned by the box model can be transformed. As a rule of thumb, an element is positioned by the box model if it has display: block. Source
You can also use display: inline-block;.
Related
I'm trying to modify an existing component which inherits the Flexbox concept.
Currently it looks like this:
Now what I'm trying to achieve is regardless of content size inside the box:
The box will have the same height - aligned to each other
The button will stay at the bottom even if the top contents are long.
Here is the existing structure that I'm trying to fix:
<section class="container counsellor-list">
<div class="row">
<div class="col-12 col-sm-12 col-lg-6 col-xl-4 mb-30 counsellor-list-item">
<div class="state_chosen">
<img class="img-fluid" src="https://st.depositphotos.com/1771835/1477/i/950/depositphotos_14779771-stock-photo-portrait-of-confident-young-doctor.jpg" />
<div class="bg-blue20 p-30 counsellor-list-item-content">
<div class="text-coral subtitle-small text-bold text-uppercase mb-24 d-flex flex-wrap">
<span class="">
Wien
</span>
<span class="ml-16">
St. Polten
</span>
<span class="ml-auto language">
<span>
DE
<span> | </span>
EN
</span>
</span>
</div>
<h2 class="mb-24">Jan Faustio</h2>
<div class="">
<a class="btn btn-coral" href="#"> Button </a>
</div>
</div>
</div>
</div>
...
</section>
Codepen link
I tried a lot of stuff but didn't work as I'm expecting it to be/result.
Check this, I hope I understood what you want to achieve https://codepen.io/IvanBisultanov/pen/PoQmXqX
I also added .btn-wrap classname, and wrapped all HTML above in div
.counsellor-list-item-content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.btn-wrap {
margin-top: auto;
}
Hello and thanks in advance for the help. Here's a link to the site in question: caulfield.co/test/
I'm attempting to create a parallax footer reveal effect using Bootstrap 4. I cannot seem to edit the z-index of the fixed-bottom footerto hide it behind the body div so that it reveals only after scrolling to the bottom of the body whose margin-bottom is equal the height of the div. For some reason, when trying to edit the z-index, nothing happens. I assume this is something in the CSS of Bootstrap causing this, but don't know where to start to look for it. Can anyone help?
CSS:
.body-temp{
height:1000px;
margin-bottom:300px;
background-color:black;
z-index:5000;
}
/* Footer
-------------------------------------------------- */
footer{
height:300px;
background-color:#232323;
margin: 0 auto;
text-align:center;
font-weight:300;
font-size:.8rem;
color:#666666;
z-index: -1000;
}
HTML:
<div class="container body-temp">
</div>
<!-- Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<footer class="container-fluid fixed-bottom">
<a class="" href="#">
<img class="grow" id="footer-logo" src="images/mb-white.svg" alt="Margaret Biggs Fine Art">
</a>
<p>© 2018 Margaret Biggs</p>
<div>
<a class="footer-icons" href="#">
<i class="fab fa-linkedin-in"></i>
</a>
<a class="footer-icons" href="#">
<i class="fab fa-facebook-f"></i>
</a>
</div>
</footer>
Yes this is bootstrap overriding you css via the css specificity.
You added the BS clss fixed-bottom that has a z-index of 1030.
the selector footer wil not overide it.
Use footer.fixed-bottom to overide BS via specificity.
On the case of body-temp. It has a position: static. This wont work with z-index. To solve this add position: relative on your body-temp styles.
MDN DOCS for z-index
"For a positioned box (that is, one with any position other than static), the z-index property specifies: ..."
Hope this helps :)
The quickest and easiest solution is to simply set the position of the .body-temp div like below:
.body-temp {
position: relative;
}
That being said, what I would do is wrap your entire .body-temp div in a wrapper, and specify the background color of said wrapper div:
HTML
<div class="body-wrapper">
<div class="container body-temp"></div>
</div>
<footer class="container-fluid fixed-bottom">
<a class="" href="#">
<img class="grow" id="footer-logo" src="images/mb-white.svg" alt="Margaret Biggs Fine Art">
</a>
<p>© 2018 Margaret Biggs</p>
<div>
<a class="footer-icons" href="#">
<i class="fab fa-linkedin-in"></i>
</a>
<a class="footer-icons" href="#">
<i class="fab fa-facebook-f"></i>
</a>
</div>
</footer>
CSS
.body-wrapper {
position: relative;
z-index: 5000;
background-color: #fff;
}
I am interested in using a transition in the icon on a Material Design card.
Example 1.
Example 2.
Here is what I've got so far: Codepen.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<div class="container">
<div class="card hoverable">
<div class="card-image">
<img alt="Kirito" src="https://azure.microsoft.com/svghandler/cdn/?width=600&height=315">
<h2 class="card-title"><a class="white-text" href="#!">Card Title 1</a></h2><a class="btn-floating btn-large halfway-fab waves-effect waves-light red"><i class="material-icons">arrow_forward</i><i class="material-icons">arrow_forward</i></a>
</div>
<div class="card-content">
<div class="chip teal">
<a class="white-text" href="#!">Tags</a>
</div>
<div class="chip teal">
<a class="white-text" href="#!">Tags 2</a>
</div>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
Problem. If i add both icons and some overflow: hidden; to the container of the icon, the problem is the icons move down. And I upset to set the CSS transition for the icon.
It is possible to recreate the first screen capture as follows.
Ensure that icons within the button are on the same line.
This can be done using white-space: nowrap; on the button.
Transition the left margin of the first icon to move it out of view when the card is being hovered. This will automatically move the second icon into view, as it comes right after.
I demonstrate this below. To not do this automatically for all cards, I have restricted the styles to cards with class two-icons. I have added that class to your HTML, it is otherwise unchanged.
.card {
max-width: 250px; /* only for display purposes on Stack Overflow */
}
.two-icons .btn-floating {
white-space: nowrap;
}
.two-icons .btn-floating .material-icons:first-child {
transition: margin-left .4s;
}
.two-icons:hover .btn-floating .material-icons:first-child {
margin-left: -56px;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<div class="container">
<div class="card hoverable two-icons">
<div class="card-image">
<img alt="Kirito" src="https://azure.microsoft.com/svghandler/cdn/?width=600&height=315">
<h2 class="card-title"><a class="white-text" href="#!">Card Title 1</a></h2><a class="btn-floating btn-large halfway-fab waves-effect waves-light red"><i class="material-icons">feedback</i><i class="material-icons">arrow_forward</i></a>
</div>
<div class="card-content">
<div class="chip teal">
<a class="white-text" href="#!">Tags</a>
</div>
<div class="chip teal">
<a class="white-text" href="#!">Tags 2</a>
</div>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
I have this simple nav.
<div class="ui attached stackable menu">
<div class="ui container">
<a class="item">
Home
</a>
<div class="ui simple dropdown item">
More
<i class="dropdown icon"></i>
<div class="menu">
<a class="item"><i class="edit icon"></i> Edit Profile</a>
<a class="item"><i class="globe icon"></i> Choose Language</a>
<a class="item"><i class="settings icon"></i> Account Settings</a>
</div>
</div>
<div class="item">
<div class="ui input"><input placeholder="Search..." type="text" class="dictionary"></div>
</div>
</div>
</div>
I am trying to add styling to <div class="ui input"><input placeholder="Search..." type="text" class="dictionary"></div> but no styles are being applied, anything .. for example
input.dictionary{
border:1px solid red;
}
does not have any effect on it.
OK So what's happening is that Semantic UI is overriding your custom style:
http://i.imgur.com/ayRs3Kx.png
As you can see your custom CSS is crossed out in chrome developer tools.
You have two choices
Make your CSS Selector more specific
Include !important after your style e.g. border:1px solid red !important;
Option 1 is more preferable. I've made a JSFiddle here with an example. By adding red-border I've made the style more specific than the Semantic UI CSS.
When you find your CSS does not seem to be working, use the dev tools to see if it shows up, and if it does what is overriding it.
I want to change the bg-color of .circle.icon if posts-item is hovered. Any idea how to accomplish that, possibly without Javascript?
<div id="scr1" class="large-6 columns timeline">
<div class="line"></div>
<ul class="posts">
<li class="posts-item">
<div class="circle icon"></div>
<h2 class="posts-item-title">
</h2>
<p class="summary"></p>
</li>
</ul>
</div>
Like so.
.posts-item:hover .circle.icon {
background: green;
}
No jQuery - Everyone's happy :)