I'm facing an issue where when my max-height is set to 500px, the scroll appears. However, if i set the height to 100%, the scroll will never appear for one of my tables. Strange enough, my other table works fine.
scss code:
.card-box {
box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
margin-bottom: 8px;
background-color: #fff;
background-clip: border-box;
border: 0 solid rgba(0, 0, 0, 0.125);
border-radius: 0.5rem;
padding: 10px;
max-height: 100%;
overflow: scroll;
.ant-tabs-tab {
font-weight: bold;
}
.ant-table-tbody {
color: #222;
}
.h6-title {
color: blue !important;
font-weight: bold !important;
font-size: 32px !important;
margin-left: 5px !important;
}
}
If i set to 500px:
If i set to 100%:
Related
At 100% size of the browser, there are some white spaces between child elements and their parent wrapper. However, if I modify the browser size to say 90% there are no more white spaces. If I further play with the browser size, that element will toggle between white spaces and no white spaces.
Any idea what am I doing wrong? Thanks
css code:
.flowpanelContainer {
display: inline-flex;
border: .180rem solid COLOR;
border-radius: 5px;
color: COLOR;
font-family: "Roboto",sans-serif;
box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.gwt-ToggleButton {
border: none !important;
background: transparent !important;
border-right: .180rem solid COLOR !important;
height: 100% !important;
outline: none !important;
border-radius: 0 !important;
font-weight: 700 !important;
/*padding: calc(8px + 1.5625vw);*/
padding: 0.5rem 0.8rem !important;
letter-spacing: 1px !important;
transition: all .4s linear !important;
width: max-content !important;
}
I am using react date picker to build a custom date but I cant seem to be able to style past dates. All dates lower than the present date should have a grey background.The present date should have a past background and the future dates should all have a white background with a black border;
Code I have written to override current styles but I cant seem to figure this out
.css-gbrmys>*:not(style)~*:not(style){
margin-top: 0px !important;
}
.react-datepicker__input-container > input {
height: 42px !important;
border-radius: 8px !important;
background: #fff !important;
width: 100% !important;
border: 1px solid #E0E0E0 !important;
text-indent: 12px;
}
.react-datepicker__triangle{
display: none !important;
}
.react-datepicker__header{
border: none !important;
background-color: #fff !important;
}
.css-2v22cu{
margin-top: 13px !important;
margin-bottom: 13px !important;
}
.react-datepicker{
font-family: 'Red Hat Display', sans-serif !important;
font-size: 14px !important;
border: none !important;
border-radius: 8px !important;
box-shadow: 0px 8px 16px rgba(17, 17, 17, 0.06) !important;
}
.react-datepicker__current-month{
font-size: 18px !important;
}
.react-datepicker__day-name{
color: #9C9C9C !important;
font-size: 14px !important;
line-height: 21px !important;
}
.react-datepicker__day-names{
margin-left: 18px !important;
margin-right: 18px !important;
}
.react-datepicker__day{
background: #EEEEEE !important;
font-size: 14px !important;
line-height: 21px !important;
border-radius: 4px !important;
color: #9C9C9C !important;
}
.react-datepicker__day--selected{
background: #000000 !important;
color: white !important;
}
.react-datepicker__month {
margin-bottom: 25px !important;
margin-top: 0.4rem !important;
margin-left: 0.4rem !important;
margin-right: 0.4rem !important;
}
Hopefully this will be an easy thing to fix, but I have tried searching for an answer and nothing seems to fit.
I'm trying to make a hover effect on a button:
button {
min-width: 20vw;
max-width: 40vw;
border: none;
color: white;
font-size: 1.5vw;
padding: 15px 32px;
text-align: center;
text-decoration: none;
background-color: blue;
border-radius: 20px;
transition: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button:hover {
color: black;
background-color: lightcyan;
}
When I test this in a browser (vivaldi & edge) nothing changes. The test site is http://wyrdling.com/skulpturjagt by the way.
PS. I tried using the chrome developer tool, but I'm too much of a newb to figure out how to read it XD
Unless its a typo in your question, you use .button:hover. That will apply to elements with a class of hover. Swap it to button:hover
Here are some example plunkers.
Example 1:
button {
min-width: 20vw;
max-width: 40vw;
border: none;
color: white;
font-size: 1.5vw;
padding: 15px 32px;
text-align: center;
text-decoration: none;
background-color: blue;
border-radius: 20px;
transition: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
button:hover {
color: black;
background-color: lightcyan;
}
<button>My button.</button>
Example 2 :
.button {
min-width: 20vw;
max-width: 40vw;
border: none;
color: white;
font-size: 1.5vw;
padding: 15px 32px;
text-align: center;
text-decoration: none;
background-color: blue;
border-radius: 20px;
transition: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button:hover {
color: black;
background-color: lightcyan;
}
<button class="button">My button</button>
I'm trying to use box shadow to create a border around 2 html elements. I cannot user box-shadow on the button element as the performance in Android is very poor, it needs to be on each inner element. I also cannot user border proterty as again the performance is poor on some android devices. As you can see on the jsfiddle, the left and right "borders" are thicker than the top and bottom.
The solution below uses box shadow on the top, left and bottom of the em element and on the top, right and bottom of span element.
How do I make the "border" look even?
<button class="button">
<em></em>
<span class="hidden" style="display: inline;">698</span>
</button>
.button {
background: #00bdf2;
border-color: white;
border-width: 0.1rem;
border-style: solid;
float: right;
height: 3rem;
margin-right: 2.4rem;
margin-top: 0.9rem;
overflow: visible;
padding: 0;
position: relative;
z-index: 101;
border: 0;
}
input, button {
border-radius: 0;
outline: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
}
.button em {
background-position: center center;
background-repeat: no-repeat;
background-size: 1.5rem 1.5rem;
display: inline-block;
float: left;
height: 100%;
padding: 0 1rem;
width: 1.5rem;
-webkit-box-shadow: inset .1rem 0 0 .1rem #000;
-moz-box-shadow: inset 0 0 .2rem #000;
box-shadow: inset .1rem 0 0 .1rem #000;
}
.button > span {
background: #ffcd00;
color: #444444;
float: right;
height: 100%;
font-family: Arial;
font-size: 1.4rem;
line-height: 3rem;
padding: 0 1rem;
text-align: center;
-webkit-box-shadow: inset .1rem 0 0 .1rem #000;
-moz-box-shadow: inset 0 0 .2rem #000;
box-shadow: inset -.1rem 0 0 .1rem #000;
}
By moving the h-shadow to .1rem and -.1rem you are pushing the shadow left (or right) by that value, so by design, this will reveal more of the shadow on that sides.
Removing the value and having it as 0 will fix this, but will also show the shadow of the side you are trying to hide it from so this will not create the effect you are after.
Here is drop down box I got to work for me.
But it goes outof boundry on left end. Actually menu items should fit exactly below the text box.
Check Fiddle
I tried changing width of all element but could not set it. Can some one tell me which class exactly controls width of menu item which appear when dropdown box is popped?
css:
.container {
width:90%;
margin:10% auto;
}
.dropdown-menu{
width:85%;
margin:0 auto;
}
.twitter-typeahead .tt-query, .twitter-typeahead .tt-hint {
margin-bottom: 0;
width: 360px; !important;
}
.twitter-typeahead .tt-hint {
display: block;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
border: 1px solid transparent;
border-radius:4px;
}
.twitter-typeahead .hint-small {
height: 30px;
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
line-height: 1.5;
}
.twitter-typeahead .hint-large {
height: 45px;
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
line-height: 1.33;
}
.tt-dropdown-menu {
min-width: 260px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}
On your class .dropdown-menu add this:
.dropdown-menu{
width:360px;
left:auto;
margin:0 auto;
}
The Fiddle demo
It's because 360px is the size of your input .twitter-typeahead .tt-query, .twitter-typeahead .tt-hint.
And the left:auto to keep the original distance no matter the absolute position.