I have an ASP.Net Webforms page which has several controls on it, including several different sized asp.net buttons. There are certain times when I need to disable a button or buttons on this page, which I am able to do without issue, but the issue is that when I do disable them, the text on the button appears to have a carriage return in the text, making the text appear lower on the button then when the button is enabled. (Please see the image below...Edit, apparently I don't have enough points to post an image.)
The image I wanted to post shows the text of the disabled button aligned at the bottom with half the bottom half of the word missing with the text of the enabled button showing correctly.
Here is the CSS code I am using.
.big, .medium, .med-big, .small, .smaller{
display: inline;
text-align: center;
vertical-align:top;
font-family: 'Oswald',sans-serif;
/*text-shadow: 0 1px 0 rgba(109, 5, 5, 0.8);*/
color:black;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.big:active, .medium:active, .small:active, .med-bid:active, .smaller:active{
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
outline: 0 none;
}
.big:disabled, .medium:disabled, .med-big:disabled, .small:disabled, .smaller:disabled{
display: inline;
text-align:center;
vertical-align:top;
font-family: 'Oswald',sans-serif;
color:grey;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background-color:#CCCCCC
}
.big{
width: 200px;
height: 30px;
padding: 17px 10px 10px 10px;
font-size:24px;
}
I am disabling the buttons through server side code simply by setting the button's Enabled Property to false.
I'm in the process of moving from more of a Winforms developer (of many years) to a web developer, so any help would be greatly appreciated. I also did search the site for an answer to this issue, and although there are several posts regarding CSS styling a disabled, button, I could not find one for this specific issue.
Thanks.
Related
everyone, I am trying to add border to one side of a a element, however, when I add it to one side it give it a sharp diagonal edge:
I am trying to remove the sharp edge and make it a square.
I have tried using pseudo-elemnts to achieve this but I have had no luck:
Currently, I am using:
a{
border-left: 2px solid rgba(0, 0, 0, 0.9) !important;
border-left-width: 0;
border-radius: 0px;
position: relative;
}
a::before{
border-left: 2px solid rgba(0, 0, 0, 0.9) !important;
border-radius: 0px;
position:absolute;
content:'';
}
But this is still giving me the results below. How can I do this successfully?
See if this works for you:
box-shadow: -10px 0 0 0 black;
Just that, no borders.
So currently, I'm using angular material and its default scroll (But I think it is perfect scrollbar) to use as a scroll design to my scroll bar. But the scroll is only showing if the users try to scroll the page/div. I tried to read the scrolling api of the Angular Material but there's no attribute that I can use in here. And I do already put the overflow-y: scroll on the css of course. Any idea? Thanks!
So I found a work around, I need to include pseudo class to my CSS
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
And if you need it to a specific element or container
.selectionTable::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
.selectionTable::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
Reference:
Making the main scrollbar always visible
Apply webkit scrollbar style to specified element
I have a div with overflow: auto
.div {
overflow: auto;
}
and when i try to set the styles for the scrollbar, it doesnt work:
.div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
.div::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.div::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #555;
}
i tryed targeting with class, id, even the tag, but nothing works.
when i don't target anything before ::-webkit-scrollbar styles, the browser scrollbar acquires the styles, but i want to style the div scrollbar
I think you should use one of javascript plugin to display custom scroll bars. Not all browsers support that what you wrote in your question.
custom scrollbars examples
I have a screenshot of the form (its in pc view) as shown below which I have to replicate in HTML/CSS.
I have created the fiddle for the above screenshot.
Problem Statement:
(1) I am wondering what changes I need to do in the fiddle so that I am able to expand the width of the form as marked by arrow in the screenshot above.
I tried playing with the margin and padding of the form class as shown below but it didn't work.
Whenever I increase the padding of the form, the input fields inside the form seems to go all over the place.
.form {
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24)
}
(2) Also, what changes I should make in the CSS, so that I can push the form (as marked with orange sign in the form) little bit towards the bottom.
Give the text input fields a width of 100% then you can use the paddings to control the size of the form elements.
.form {
background: #FFFFFF;
max-width: 360px;
margin: 150px auto 100px auto;
padding: 0px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24)
}
input[type="text"] {
width: 100%;
}
Note that I've modified the .form styles a little bit.
I have a menu header. The drop shadow effects of it as present in the adobe photoshop are:
Blend Mode: Multiply
Opacity: 0.25 (25%)
Distance: 3px
Spread: 15%
Size: 9px
Color: #282829
I am trying to use the above code in my CSS for my menu header (adove) but unfortunately for some reasons I am unable to replicate it. The code which I am using for the menu header are:
position: relative;
top: -890px;
background-color: rgba(0, 0, 0, 0.5);
height: 89px;
border-bottom: 3px solid #EF7440;
overflow: hidden;
Try this and adjust the pixel values if necessary. The 4th value is the blur size, the 3rd value is the size of the spread. The 1st and 2nd values adjust the X and Y offsets of the dropshadow.
-webkit-box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);
-moz-box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);
box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);