I wanted to put some space between scrollbar and edge of textarea and have this code:
export const Textarea = styled.textarea`
font-family: Open Sans, sans-serif;
font-size: 16px;
line-height: 24px;
border-radius: 14px;
width: 600px;
height: 200px;
border-width: 0px;
border: 1px solid #DCDCDC;
padding: 14px 16px;
left:-100px;
resize: none;
box-sizing: border-box;
::-webkit-scrollbar {
width: 8px;
height: 60px;
}
::-webkit-scrollbar-thumb {
background-color: #3AA4A4;
border-radius:2px;
border-right: 4px white solid;
background-clip: padding-box;
}
::-webkit-scrollbar-track {
margin-top: 20px;
margin-bottom: 20px;
}
:focus {
outline: none;
}
:placeholder {
color: #96a2ac;
}
`;
but the problem is the space was added but border radius of scrollbar of top right and bottom right is not added and visible.
Related
Note: becasue I am a new user, I cannot embed photos yet. The photos are in links generated by Stack overflow below.
The below is the design I am trying to achieve,
However, the below is currently what is happening
As you can see, the sidebar list is appearing to go outside the sidebar itself when the padding is added.
How can I manipulate my CSS to alter?
width: 100vw;
height: 100vh;
}
body {
margin: 0;
padding: 0;
}
.Sidebar {
height: 100%;
width: 250px;
background-color: white;
border-right: 1px solid;
padding-left: 15px;
}
.SidebarList {
height: auto;
width: 100%;
padding-left: 15px;
font-size: 18px;
border: 2px #FD954E;
border-right: 1px solid;
}
.SidebarList .row {
width: 100%;
height: 50px;
background-color: white;
list-style-type: none;
margin: 0%;
display: flex;
color: #A7ACB6;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
.SidebarList .row:hover {
cursor: pointer;
background-color: #E7E7E7 ;
}
.SidebarList #active {
background-color: white;
color: #FD954E
}
.row #icon {
flex: 30%;
display: grid;
place-items: center;
}
.row #title {
flex: 70%;
}
.Logo {
padding-left: 40px;
padding-top: 25px;
}
const DropUl = styled.ul`
width:138px;
height:124px;
margin:0px;
padding:0px;
background: #FFFFFF;
border: 2px solid #169DA8;
box-sizing: border-box;
border-radius: 4px;
position: absolute;
top:55px;
**display:none;
&:hover{
display:block;
}**
`
const DropLi = styled.li`
display:block;
width:106px;
height:36px;
position: relative;
top:10px;
left:20px;
`
const DropAncor = styled.a`
text-decoration:none;
font-family: Rubik;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 150%;
color: #111111;
<Li parametarWith={'58px'} ><Ancor href="#"> <h5>Saveti</h5></Ancor>
<DropUl>
<DropLi><DropAncor href="#">Cesto pitanje</DropAncor></DropLi>
<DropLi><DropAncor href="#">Veterinar</DropAncor></DropLi>
<DropLi><DropAncor href="#">Iskustva</DropAncor></DropLi>
</DropUl>
</Li>
Qestion:
I what to make dropm-down menu in style component on ul element when it is
hover to display block drop menu
When i hover on this example nothing happens i use &:hover but it is not working
You can do something like this:
const DropLi = styled.li`
display: none;
width: 106px;
height: 36px;
position: relative;
top: 10px;
left: 20px;
`
const DropUl = styled.ul`
width:138px;
height:124px;
margin:0px;
padding:0px;
background: #FFFFFF;
border: 2px solid #169DA8;
box-sizing: border-box;
border-radius: 4px;
position: absolute;
top:55px;
&:hover ${DropLi} {
display: block;
}
`
See the Doc for more information!
I am trying to make my grid layout divs to be the same height. Please see my sass code below, screenshots of website layout and html code. I want the common height to be the height of the grid element with the most content.
I am only able to provide a picture of my html, since I am using react and different elements.
Please advise on SASS settings. thanks!
SASS code:
// MAIN CONTENT
.grid {
display: grid;
width: 114rem;
grid-gap: 0.5rem;
margin:1rem;
grid-template-columns: repeat(
auto-fit,
minmax(20rem, 1fr)
);
align-items: start;
#include media(small) {
grid-gap: 3rem;
}
&__item {
background: $mainWhite;
border-radius: 0.05rem;
overflow: hidden;
box-shadow: 0 3rem 6rem rgba(0, 0, 0, .05);
transition: $transition;
margin-bottom: 2rem;
&:hover {
transform: translateY(-.5%);
box-shadow: 0 4rem 8rem rgba(0, 0, 0, .1);
}
}
}
.card {
.card__img {
display: block;
width: 100%;
height: 18rem;
object-fit: cover;
object-position: top;
}
.card__content {
padding: 2rem 2rem;
a{
margin-bottom: 1%;
&:hover{
text-decoration: none;
}
}
.card__tools__header{
font-weight: 400;
margin-bottom: 0.2rem;
font-size: 1.2rem;
color:$mainBlack;
}
.card__tools__box{
display:flex;
flex-wrap: wrap;
flex-direction: row;
box-sizing: border-box;
.card__tools {
font-size: 1.5rem;
white-space: nowrap;
color:$mainGreen;
padding-right:1rem;
overflow: hidden;
box-sizing: border-box;
}
}
.card__header {
font-family: 'Open Sans', sans-serif;
font-size: 1.8rem;
font-weight: 500;
color: $mainBlack;
margin-bottom: 1rem;
}
.card__text {
font-size: 1.1rem;
letter-spacing: .1rem;
margin-bottom: 1rem;
}
}
.card__btn {
display: block;
width: 100%;
padding: 1rem;
font-size: 1.2rem;
text-align: center;
color: $mainBlack;
background-color: $mainWhite;
border: none;
border-radius: 0;
transition: $transition;
cursor: pointer;
margin-top: 5%;
span {
margin-left: 1rem;
}
&:hover,
&:active {
background: $mainGreen;
text-decoration: none;
color:$mainWhite;
span {
margin-left: 1.5rem;
}
}
}
}
You need to set the height with grid-template-rows on your container and tell the children to fill 100% of that height. Otherwise they will only take the space they need:
.grid {
//...
grid-template-rows: 1fr;
&__item {
//...
height: 100%;
}
}
I created a codepen for you to test this.
trying to use the TextComponent but I failed to style it as shown in the image below;
TextComponent username = new TextComponent().labelAndHint("UserNmae").constraint(TextField.ANY);
FontImage.setMaterialIcon(username.getField().getHintLabel(), FontImage.MATERIAL_PERSON);
The TextComponent doesn't allow for that particular design at the time. The round border is pretty easy:
TextField {
border: 1pt solid blue;
border-radius: 0.5mm;
padding: 2mm;
}
But the text overlay that sits on the border itself is problematic with the current API. This is probably something that can be enhanced by adding another on-top mode to the TextComponent that would use CENTER_BEHAVIOR_TOTAL_BELOW for the BorderLayout there.
However, at this time we recommend using a slightly different design e.g.:
TextComponent login = new TextComponent().
label("Login").
descriptionMessage("Enter your email").
constraint(TextArea.EMAILADDR).
action(MATERIAL_ARROW_FORWARD).
actionClick(e ->
SigninStep2Form.create().show());
The CSS is:
#Constants {
includeNativeBool: true;
scrollVisibleBool: false;
labelGap: 2;
textComponentOnTopBool: true;
textComponentAnimBool: false;
textCmpVAlignInt: 0;
textComponentFieldUIID: TextComponentField;
}
Form {
background: white;
}
TextComponentField {
background: #EDEDED;
padding-left: 1mm;
padding-bottom: 1.5mm;
padding-top: 0.5mm;
padding-left: 3mm;
margin: 0px;
font-family: "native:MainRegular";
font-size: 3mm;
color: black;
border: none;
border-bottom: 0.25mm solid #9a9a9a;
}
InputComponentAction {
padding: 1mm;
background: transparent;
border: none;
}
FloatingHint {
font-family: "native:MainRegular";
font-size: 2mm;
color: #5e5e5e;
margin: 0px;
padding-top: 1.5mm;
padding-right: 1mm;
padding-bottom: 0px;
padding-left: 3mm;
background: #EDEDED;
border-top-left-radius: 1mm;
border-top-right-radius: 1mm;
}
TextComponent {
background: white;
border: none;
padding: 1mm;
margin: 0px;
}
ErrorLabel {
padding-top: 0.5mm;
background: transparent;
padding-left: 3mm;
}
DescriptionLabel {
padding-top: 0.5mm;
padding-left: 3mm;
background: transparent;
}
The resulting text components look like this:
Boostrap dropdown is hidden inside other elements. When I try to click on pencil icon it shows dropdown but some other elements are overriding it. I made position of dropdown relative but it increases site of Div tag. attaching screenshot.
new
Christeen
Last modified 4-5-2016 at 23:16
Share
Edit
Delete
CSS
.listing-body ul.listbody {
margin: 0;
padding: 0;
display: block;
list-style: none;
}
.listing-body ul.listbody li {
margin: 0;
padding: 0;
list-style: none;
float: left;
width: 100%;
background: #FFF;
border: 1px solid #dadada;
border-top: none;
}
.listing-body .fourthli {
width: 25%;
float: left;
margin: 0;
padding: 0 1%;
color: #000;
font-family: 'robotoregular';
font-size: 12px;
line-height: 45px;
color: #333;
text-align: left;
box-sizing: border-box;
overflow: hidden;
max-width: 50%;
text-overflow: ellipsis;
white-space: nowrap;
}
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
}
The overflow:hidden in the .listing-body .fouthli was cropping off the dropdown menu. Removing it fixed it.