I've been trying to style a jQuery UI dialog for hours, and am going around in circles. I am able to get my desired look by manually adding buttons to the dialog. See the following link for a working example. This Works
Now, I want to do it the right way and add buttons per the jQuery UI manual. There are about a billion classes which are automatically added to the buttons, so I remove these factory classes, and then add a couple of custom classes.
$(this).dialog("widget").find('button').removeClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only').parent().removeAttr('class').parent().removeAttr('class');
...
buttons : [
{text:'YES, DELETE IT',class:'newButton red',click: function() {alert("Delete Record");$(this).dialog("close");}},
{text:'CANCEL',class:'newButton gray',click: function() {$(this).dialog("close");}}
]
See the following link for my fail attempt This doesn't quite work
First of all, the buttons don't show the color image. Then I click anywhere on the dialog, and the image appears on the button. If the dialog is closed then opened, the dialog becomes taller. On top of that, the buttons are squished together, but I probably can figure that out.
Please help me find my error of my ways!
Here's what's happening:
On page load, your red button has a class of ui-state-focus. When you click anywhere on the page, that button loses that class, therefore displaying the red background image. Another thing I have noticed is that the button is inheriting the following:
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
font-family: Verdana,Arial,sans-serif;
font-size: 1em;
}
That could explain why the text is much larger. I also noticed that your buttons are NOT inheriting this CSS from your first test:
#dialog-deleteListRecord button {
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
padding: 3px 8px;
color: white;
font-size: 12px;
font-weight: bolder;
font-family: Arial, Helvetica, sans-serif;
}
I hope that this gives you direction to solve your issue.
Related
So I have a button inside a div. I want to make the font-weight: bold so I put it in the css. I fire up the website and the text of the button isn't bold. I then check it with Firebug and the font-weight: bold isn't even there? When I manually type it there in firebug my text becomes bold, just as I want it.
I'm working with bootstrap, here is the css of the button:
.btn-primary {
background: url("../img/bg-nav.png") repeat-x scroll left bottom #198901;
color: #ffffff;
font: 17px "bowlby_oneregular",sans-serif !important;
font-weight: bold;
text-transform: uppercase;
}
I find it strange that it doesn't show up with Firebug, and yet when I put it there with Firebug it works
There are two solutions:
Remove !important:
font:17px "bowlby_oneregular",sans-serif;
font-weight:bold;
Split the shorthand property up:
font-size:17px;
font-family:"bowlby_oneregular",sans-serif;
font-weight:bold;
The exact solution depends on how exactly you want to apply the fonts. But I’d simply rewrite your code so that !important will never become necessary.
I have some problem with some radio buttons in Chrome. It works fine on other browsers but when I want to select the middle button I have to click the upper one. If I want to click the bottom one I have to select the middle one.
Can you please help me ?
this is a link of webpage http://gia-online.com/banjac/vps_hosting.html
The problem is in first price table
All radio buttons have the same value of 9.99
No way to differentiate when the Browser has to decide which one to light up.
They must each have unique values.
I disabled javaScript and the problem is still there, so it's not jQuery.
I copied the form into another page by itself and it works in Chrome.
I have narrowed it down to stylesheet issue.
This is the stylesheet causing the problem.
gia-online.com/banjac/css/style.css
If you remove this stylesheet the problem goes away along with most of your styling.
This is cause of the problem:
<div class="section_holder2 two">
I changed it to:
<div class="xsection_holder2 two">
And the problem went away.
This is the line of CSS causing the problem:
.ssection_holder2 .price_table .price {
color: #161616;
font-size: 45px;
font-weight: bold;
line-height: 5px;
text-align: center;
padding: 8px 0px 8px;
border-bottom: 1px solid #e6e5e5;
}
I want text instead of the button that is provided in rails.
I've added a class to the submit button, but this is where I'm stuck. Normally in CSS if I want something to be text I just don't style it. But in this case, the button is styled automatically to look like a button.
How do I overide this and make it look like just text?
Here's your button with a class of no_style (or whatever you would like):
<button class="no_style">test</button>
Then in your stylesheet call the button with a class of no_style:
button.no_style {
background: none;
border: none;
}
You may need to inspect the button to see if there is any other styling on it. You can inspect it by right clicking on the button and select "inspect element". If your button has any other styles, I can help you remove them. Just let me know if anything else shows up and I can show you how to remove it.
If you want to change the text you can still style the text without the look of a button, like this:
button.no_style {
background: none;
border: none;
color: red;
font-size: 24px;
text-transform: uppercase;
}
Is this what you were looking for?
I'm new to CSS and I'm trying to add a background image to a button. I have a simple input button that I'm using as a toggle for displaying a div. I want to put an image in the button. I'm using the following HTML.
<input type='button' id='toggleButton'>
When I view this in my web page in Firefox 9.0.1 it looks great:
I applied the following style to it to add my image:
#toggleButton {
background-image: url("plus.png");
background-repeat: no-repeat;
background-position: center;
}
As soon as I apply the background image the button becomes very plain:
I used Firebug to examine the computed style of both buttons and it didn't show any difference other than the style I appled and some minor changes in border width (from 2.5px to 1.66667px). I added border-width: 2.5px; to the style and it didn't help.
My image has an alpha channel and only the black of the plus sign should show. My understanding of CSS is that the original button's style should still be applied and my button only adds the background image. I expected to end up with a button that looks approximately like this:
How do I add the background image and keep the fancy button look?
How about try something like this if you just want to add a plus symbol:
Html:
<input type='button' id='toggleButton' value="+" />
CSS:
#toggleButton {
font-family: Helvetica, Arial;
font-weight: bold;
font-size: 14px;
vertical-align: middle;
text-align: center;
padding: 3px;
color: #444444;
}
Please try making your button picture to circular bead.
I'm trying to get a button which looks exactly the same whether it is enabled or disabled, but whenever I disable the button it seems to ignore any font styles I have set. This seems to be the case in IE but not other browsers.
So does anybody know the CSS to change a disabled button so that the font is not embossed?
Thanks in advance,
Chris
[Edit]
The CSS is as follows:
.Button
{
background-color:#332F27;
border-bottom-color:#1B1B1B;
border-top-color:#3B3B3B;
border-left-color:#3B3B3B;
border-right-color:#0C0C0C;
color:Black;
font-style:normal;
}
The button has the attribute Class="Button"
[/Edit]
If you are changing the disabled property of the button then you won't be able to get the feel and look of a normal button with CSS which will work in all browsers.
The easiest way is to add another button with no click event attached to it and set this button's display to inline and hide the original one.
If you still want to use CSS for this you can refer this link.
Styling disabled form controls with CSS
//You use this css it helps u
font-weight: bold;
border-right: #3C8FD1 1px solid;
border-top: #3C8FD1 1px solid;
border-left: #3C8FD1 1px solid;
border-bottom: #3C8FD1 1px solid;
font-size: 10px;
color: #045FA7;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
background-image: url(../App_Images/cssbuttonbg.gif);
line-height: 14px;