I want my ul to get the full height of the div but its not taking the divs entire height so I need to change the ul to take full height of the div
.header-wrapper {
display: inline-flex;
width: 100%;
height: 50px;
top: 0;
left: 0;
position: fixed;
background: linear-gradient(base.$secondaryColor, base.$primaryColor);
}
.top-nav-bar {
height: 100%;
float: right;
background-color: green;
li {
display: inline-flex;
list-style-type: none;
color: base.$whiteColor;
margin-left: 10px;
margin-right: 10px;
align-items: center;
justify-content: center;
background-color: red;
height: 50px;
width: 100px;
cursor: pointer;
&:hover {
color: base.$blackColor;
background-color: base.$whiteColor;
}
}
}
Here is my code
Related
I am trying to create a gui application to control the volume level of my machine using Qt5 and C++.
This is what I kind of want to achieve.
So, I created the basic layouts and added the QSlider, and then used the following stylesheet to style it:
QSlider::groove:horizontal
{
height: 16px;
background: yellow;
margin: 2px;
}
QSlider::handle:horizontal
{
background: blue;
width: 16px;
height: 16px;
margin: -5px 6px -5px 6px;
border-radius:11px;
border: 3px solid #ffffff;
}
I got the following result:
First the handle is an eclipse, and not a circle. But I wanted to reduce the height of the groove, so I modified the above stylesheet:
QSlider::groove:horizontal
{
height: 10px; // modified here
background: yellow;
margin: 2px;
}
QSlider::handle:horizontal
{
background: blue;
width: 16px;
height: 16px;
margin: -5px 6px -5px 6px;
border-radius:11px;
border: 3px solid #ffffff;
}
And now, the handle of the slider became a rectangle.
Can anyone please answer what's causing it to behave like this, or point me to some docs.
your border-radius should be proportional to the length and width to become a circle.
Try this style :
QSlider::groove:horizontal {
border-radius: 1px;
height: 3px;
margin: 0px;
background-color: rgb(52, 59, 72);
}
QSlider::groove:horizontal:hover {
background-color: rgb(55, 62, 76);
}
QSlider::handle:horizontal {
background-color: rgb(85, 170, 255);
border: none;
height: 40px;
width: 40px;
margin: -20px 0;
border-radius: 20px;
padding: -20px 0px;
}
QSlider::handle:horizontal:hover {
background-color: rgb(155, 180, 255);
}
QSlider::handle:horizontal:pressed {
background-color: rgb(65, 255, 195);
}
And This is for your style (I change margin and padding)
QSlider::groove:horizontal
{
height: 16px;
background: yellow;
margin: 2px;
}
QSlider::handle:horizontal
{
background: blue;
width: 16px;
height: 16px;
margin: -4px 0;
padding: -4px 0px;
border-radius:11px;
border: 3px solid #ffffff;
}
[enter image description here][1]
[1]: the image of the button
[2] There are styles for this button. Please looking at the line (.btnDefault:hover:after).
.btnDefault {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 0 46px 0 25px;
background-color: #fff;
width: 160px;
height: 48px;
font-size: 16px;
letter-spacing: 2px;
text-align: center;
border-radius: 50px;
box-shadow: 0px 12px 51px 0px rgba(88, 49, 33, .4);
transition: opacity .3s ease-in-out;
}
.btnDefault:after {
content: '';
position: absolute;
top: 50%;
right: 25px;
width: 22px;
height: 22px;
background: url('https://i.stack.imgur.com/pPcvP.png') no-repeat;
background-size: contain;
transform: translateY(-50%);
transition: transform .3s ease-in-out;
}
.btnDefault:hover {
opacity: .7;
}
.btnDefault:hover:after {
transform: scaleX(-1) translateY(-50%);
}
[3] this is button HTML
<a class="btnDefault">VIEW MORE</a>
I have two divs, which I aligned side by side, inside a container. I want to make both of them height 100%. I do that and it works fine, but after i change the left div's border or padding it seems to alter the height so it's larger than the right div. Is there any idea how to fix this problem?
.container {
height: 200px;
width: 100px;
}
.one {
height: 100%;
width: 100px;
background-color: green;
float: left;
}
.two {
height: 100%;
width: 100px;
background-color: red;
float: right;
}
Thanks in advance.
Flex is a good solution for what you want to achieve
.container {
display: flex;
height: 200px;
width: 100px;
}
.one {
flex: 1;
min-height: 100vh;
width: 100px;
background-color: green;
float: left;
}
.two {
flex: 1;
min-height: 100vh;
width: 100px;
background-color: red;
float: right;
}
How to set transition delay on li:after so that it aligns with transition for li:hover? Seems like it doesn't work when transition: all 0.3s; is set, because it appears instantly.
Here is the Fiddle
Maybe if you do something like this, where you first set up the :after and then show it on :hover
body {
background-color: #f01;
}
ul {
background-color: #fff;
}
li {
position: relative;
list-style-type: none;
display: inline;
line-height: 2em;
padding: 5px;
transition: all 1s;
}
li:hover {
background-color: #414C52;
transition: all 1s;
}
li:after {
top: 25px;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: #414C52;
margin-left: -10px;
transition: all 1s;
border-width: 10px;
opacity: 0;
}
li:hover:after {
opacity: 1;
transition: all 1s;
}
a {
padding: 12px 10px color: #333;
}
<ul class="nav navbar-nav">
<li>asdfasdf</li>
<li class="active">ffffft</li>
</ul>
yes, it should do it but you need an inital li:after before your li:hover:after
Here is the Fiddle Link
.homeFirstSection {
float: left;
width: 100%;
height: 500px;
position: relative;
}
.home_left_bar {
float: left;
background: #f67777;
width: 4%;
height: 100%;
z-index: 5;
position: fixed;
}
How I can set the height of fixed part to height of its wrap?
Found a very simple solution only setting the css height to inherit.Here is the Fiddle and Code
.homeFirstSection {
float: left;
width: 100%;
height: 200px;
position: relative;
}
.home_left_bar {
float: left;
background: #f67777;
width: 4%;
height: inherit;
z-index: 5;
position: fixed;
}