HTML:
<input id="bill" placeholder="">
CSS:
#bill {
display: block;
margin: auto;
position: relative;
top: 80px;
left: 35px;
display: inline-block;
border-radius: 3px;
padding: 4px;
width: 35%;
border: 2px solid rgb(13, 158, 143);
font-family: 'fontAwesome';
}
I want dollar sign on the left corner of input bar and text on the right corner of
input bar.
Related
Hi Currently my send message box appears like this
I want to integrate it within the chatbot
I have this styles added to the box
.style {
position: fixed;
right: 0px;
height: 85%;
bottom: 50px;
width: 30%;
margin-right: 16px;
margin-bottom: 18px;
border: 2px solid #053364;
z-index: 2;
border-radius: 25px 25px 25px 25px;
}
I would like to have all the comboboxes of my application similar to the PyCharm ones. I was able to change the box itself but not the drop-down list.
Here's what I would like to have:
Here's what I have:
I would like to increase the height of the items, the space between them and to remove the dotted border when the mouse hovers the item. All of this using the stylesheet, since I want all QComboBox to be like this.
Here's my stylesheet:
QComboBox{
font-family: "Segoe UI";
font-size: 8pt;
border-radius: 3px;
border: 1px solid;
border-color: rgb(175, 175, 175);
padding: 3px;
padding-right: 8px;
padding-left: 8px;
background-color: white;
margin: 1px;
}
QComboBox:focus, QComboBox:on{
border-radius: 4px;
border: 3px solid rgb(151, 195, 243);
margin:0px;
}
QComboBox::drop-down{
border:none;
}
QComboBox::down-arrow{
right: 4px;
image: url(:/custom/custom_icons/down-arrow.png);
}
QComboBox QAbstractItemView{
border: 1px solid rgb(175, 175, 175);
}
QComboBox QAbstractItemView::item {
height: 50px; /*not working*/
}
I'm trying to write a Vue.js transition that slides out an element and at the same time slides in another one. I almost have it working, but the elements bump each other when the animation starts.
Here is my CodePen and the code:
// pug/jade
#app
.elems
transition-group(name="elem")
li.elem(v-for="(elem, index) in elems"
v-if="index === currentElem"
#click="currentElem = currentElem === 0 ? 1 : 0" :key="index") {{ elem
// stylus
.elems
display: flex
align-items: center
justify-content: center
height: 100vh
position:relative
.elem
display: block
text-align: center
font-size: 30px
padding: 30px
border-radius: 20px
border: 2px solid black
user-select: none
cursor: pointer
&-enter-active, &-leave-active
transition: 1s
&-enter
transform: translateX(-100vw)
&-leave-to
transform: translateX(100vw)
// js
new Vue({
el: '#app',
data() {
return {
elems: ['hello there', 'hello yourself'],
currentElem: 0
}
}
})
You need absolute position of the .elem as i understand what you want.
otherwise they cant colide
try this css:
.elems
display: flex
align-items: center
justify-content: center
height: 100vh
width: 100vw
position: relative
overflow: hidden
.elem
display: block;
position: absolute
top: 50%;
left: 50;
margin-top: -30px;
margin-left: -150px
text-align: center
width: 300px
height: 60px
line-height: 60px
vertical-align: middle
font-size: 30px
border-radius: 20px
border: 2px solid black
user-select: none
cursor: pointer
&-enter-active, &-leave-active
transition: 1s
&-enter
transform: translateX(-100vw)
&-leave-to
transform: translateX(100vw)
i want to make a material like slider. The slider handle should get bigger when pressed, but when I click on it, it makes this:
top: not clicked, bottom: klicked
And after I move the handle its getting bigger.
I'm using a stylesheet:
...
QSlider::handle:horizontal {
background: #009ceb;
width: 24px;
margin: -12px 0;
border-radius: 12px;
border-style: solid;
border-width: 1px;
border-color: #009ceb;
}
QSlider::handle:horizontal:pressed{
background: #009ceb;
width: 36px;
margin: -18px 0;
border-style: solid;
border-radius: 18px;
border-width: 1px;
}
...
Why reverses a background property of a lower element the border-radius set on a higher element?
I have this HTML code:
<div class="wrapper">
<div class="content">
<div class="header">Title</div>
<div class="form"></div>
</div>
</div>
And this CSS code:
.wrapper {
background: none repeat scroll 0 0 #F8F8F8;
border-radius: 5px 5px 5px 5px;
height: 250px;
left: 100px;
overflow: visible;
position: absolute;
top: 10%;
width: 400px;
z-index: 10000
.header {
background: none repeat scroll 0 0 #222222;
border-top-left-radius: 5px;
box-shadow: 0 0 5px #444444;
position: relative;
z-index: 1;
}
}
The result is that there is no border-radius at the top, just at the bottom. If I remove the background property of the .headerclass the border-radius works on all four sides. What is the problem here?
You are nesting a selector inside other, which is wrong.
Try this.
.wrapper {
background: none repeat scroll 0 0 #F8F8F8;
border-radius: 5px 5px 5px 5px;
height: 250px;
left: 100px;
overflow: visible;
position: absolute;
top: 10%;
width: 400px;
z-index: 10000
}
.header {
background: none repeat scroll 0 0 #222222;
border-top-left-radius: 5px;
box-shadow: 0 0 5px #444444;
position: relative;
z-index: 1;
}
this must work,
and if you apply any background color on any of the child div then you have to explicitly set its corner radius..
Check this
http://jsfiddle.net/arunberti/LtRUu/
.wrapper {
background: none repeat scroll 0 0 red;
border-radius: 5px 5px 5px 5px;
height: 250px;
left: 100px;
overflow: visible;
position: absolute;
top: 10%;
width: 400px;
z-index: 10000;
color:red;
}
.header {
background: none repeat scroll 0 0 #222222;
border-top-left-radius: 5px;
box-shadow: 0 0 5px #444444;
position: relative;
z-index: 1;
}