Very simple question but I've been googling for hours and haven't found anything
How can i style the content/option/popup of a dropdownlist on the right side of the 'open button' like in this image/screenshot: https://www.dropbox.com/s/joqj00ahjrwqs0p/Capture.PNG?dl=0 ?
You cannot style it. You need to create a replacement element. Some browser elements can not be changed, or almost not be changed, with regard to their styling. They are so-called "native" (referring to the operating system) controls.
Check here for some jQuery based replacements which you can style whatever way you like:
http://jquery-plugins.net/fancyselect-jquery-plugin-for-custom-select-box
Related
I am working on a Wordpress website in which I need to use the musical "flat" symbol. To figure out what might be a good way to handle this, I checked out what is used on Wikipedia, in the corresponding article (https://en.wikipedia.org/wiki/Flat_(music)).
I know how to find the HTML entity code and use that, and I know I can just copy the symbol from somewhere else and just paste it directly into my post. But when doing that, there is extra padding around the symbol, so it displays incorrectly, like this: D ♭ . (It's actually not doing it here on SO, so I had to add spaces on each side to simulate it.) It looks like the problem is handled on Wikipedia by the following code, which appears everywhere the flat symbol is used:
<span class="music-symbol" style="font-family: Arial Unicode MS, Lucida Sans Unicode;">♭</span>
So I used the same code and I created a "music-symbol" class in the CSS file, in which I set padding to 0. I couldn't find the corresponding class on Wikipedia, but I guessed that that's what it contained. I honestly don't know why this works (I'm a noob) but it does seem to work, assuming I specify the font using the style tag as shown. When I say "it works", I mean that it makes the flat symbol appear right next to the note name, as it should, without extra space, like this: D♭.
However, when I view the same site on my Android, the spacing is still there. Can anyone explain why, and how I should address this?
Also, is there a better or more straightforward way of handling special symbols like the flat? I don't get why I was able to paste it in directly here on SO and have the spacing be correct without having to use the extra class reference and style tag.
As far as I can see within the styles on that particular site there is no additional styling for the music-symbol class. From what I can tell the additional white space is inherit to the element and font(s) being used. Padding will not be what you are looking to alter, you would be wanting to adjust the margin of the span element where the symbol is placed.
See class definition below for styling a span with the music-symbol class
span.music-symbol {
margin-left: -2px;
}
I am a real noob in RoR, and missing basic concepts of programming in it.
I created a table with 3 boolean fields and corresponding show/edit/delete etc.
I have, as default, checkboxes for changing/creating those boolean fields.
Q: I would like to create a button instead of checkbox, which acts like checkbox and in case of 'checked' or 'unchecked' it sets corresponding color/image on button.
Edit: For those who negged this - at least tell me whats wrong with the question if that's so trivial to you
Cheers
Aledj
It seems that you simply want to give the checkbox a different style. While this can be accomplished by writing the CSS directly, you might be better off using a front-end framework like Bootstrap or a jQuery-UI theme which will do it for you, with some pre-defined styles.
Bootstrap
jQuery UI Themes
You can just use css to make most things look like most things:
CSS: styled a checkbox to look like a button, is there a hover?
I've searched quite a bit, but all results reference using a custom image. I'm working with fluid layouts/retina displays and I'd like the button to be purely HTML/CSS.
Does anyone know a workaround/method?
Without seeing some code, I'd say hide the image with jQuery, then again use jQuery to create a new element with whatever content you want inside what I presume is the anchor tag used.
If javascript isn't supported, it'll show the image, if not, it'll show your new element (which you can style accordingly)
edit: ok, some clarification... use jquery to hide the existing input type="image"... then use jquery again to create a new input of type submit, do whatever you need it to do
Here's a fiddle to explain: http://jsfiddle.net/erinfreeman/PFZY8/
If there's a better way of doing it, I'm all ears. As below, I don't think jpann can add any additional code else it would simply be a case of hiding the existing input field and adding another.
Hi I was working on a project and the client wanted custom paypal buttons. I found a great site that provided custom code for the button: http://www.daddydesign.com/wordpress/how-to-create-a-custom-paypal-button-without-images/
You simply replace the input type="image" tag with an input type="submit" and style it. Hope this helps.
Can the size of a radio button be changed in CSS--in all browsers that is? I cannot figure out how this can be done. If you know this is not possible, please let me know so I don't waste my time. I have not looked into CSS 3 for HTML 5 yet. Hmmmm...
Although radio buttons look is controlled by operating system there is some method for applying style for form elements like radio buttons: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
AFAIK it is not recommended to modify it.
CSS allows for some manipulation of the form element - so you should be able to set it's height and width as with any element. However the OS and Browser still have an impact on the final output.
The code in this demo demonstrates CSS rules and how they are used to style the radio buttons:
http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/
The easiest way to avoid using CSS - which is actually the more difficult way to accomplish this change - is to use javascript and css to replace the radio buttons and other form elements with custom images :
http://www.emblematiq.com/lab/niceforms/
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
I need to find a way to hide HTML Rows (or Tables) from view without blocking them from being rendered. Setting this.myTable.Visible = false would seem to be the easiest way to hide tables from the user, but it prevents the HTML Table from being sent to the browser and that causes a problem because I am using Validators and need to make sure the non-visible elements are validated (because of page navigation logic, only some elements will be made visible to the user at a time).
I was attempting to change the Style property but asp.net says it is read-only so I cannot make it invisible using CSS. Also I would prefer not to use Javascript but if there is a simple solution with JS that is fine.
Any help is greatly appreciated.
You could make your <tr>s server tags. To do this, change your rows in
<tr id="rowID" runat="server">
So you can access their properties, such as rowID.style or class properties.
You can set this server-side by adding a display property to the style collection. The style collection property itself is read-only (you can't replace it), but you can an element to it to reflect setting that style property.
table.Style.Add("display","none")
or
table.Style["display"] = "none";
The same is true for table rows as the Style collection is inherited from HtmlGenericControl.
EDIT: The HTML control needs to be runat="server" for this to work, which I'm assuming yours is since you are able to set the Visible property.
To hide a complete table (but still render it to the client), wrap it in a div with style="display:none":
<div style="display:none;">
asp.net table goes here
</div>
Although, for single rows, this does not work. You will probably have to use some javascript (e.g. jquery, as another user recommended).
Besides using the style property, you can always put the style on the element either right on the tag itself, or in code via element.Attributes["style"] = "display: none;";. To do it in code, you need to make them server controls by adding runat="server" and setting an ID.
Thanks for the useful information guys. I was able to actually combine two of the earlier answers to come up with a great solution. For reference here it is:
I used div tags around the tables I wanted to show and hide like:
<div style="display:none;" id="tblHideItems1" runat="server">
I referenced these in the code-behind like this:
Definition:
protected System.Web.UI.HtmlControls.HtmlGenericControl tblHideItems1;
To show:
this.tblHideItems1.Style.Add("display", "inline");
To hide:
this.tblHideItems1.Style.Add("display", "none");
This allows me to show or hide the tables, without taking up blank space on the page when they are hidden, but still rendering them so they'll work with Validation controls (that was my ultimate goal) while hidden or showing.
The style tag in the definition may not be necessary but since it works now as it is, I will probably just leave it since it is being modified at runtime.
Again thanks for the insight!!
guys even table.Visible = False works
provided
u've set the runat= "server" for the table ofcourse