I want to create a textbox to make a loginform. But there is alot of css on it that i don't want to use. Im also using bootstrap so there is a lot of standard css classes and stuff that the textbox inherits. How do i make it not inherit any other classes or can i make it to be reset so that it doesn't have any css classes except the ones i tell i to?!
One of the problems i have is that the textarea looks like it is sunk into the background i rather want it so look flat.
in your CSS
input[type="text"]{border:none; box-shadow:none; width:auto}
you can change any of these properties at will, or apply to all input elements by deleting the [text] part
Related
We're using bootstrap and I've got a page where I'm getting conflicting results with small buttons.
I have a number of buttons that look like this:
<input type="button" class="btn btn-small" value="Save"... />
I have my main form and then some divs that are used for jQuery dialogs. On the main form, the buttons are showing up as small, but in the dialogs, the buttons are showing up regular size, even though in all cases, I'm using <input type="button" and class="btn btn-small". The only difference is the divs that contain them, so I'm guessing it has something to do with the styles applied somewhere above the buttons.
When I look at the "Computed" styles in Firebug, it shows .btn being applied, but .btn-small has a line through it for every property I've inspected that has both listed, implying it's not being used.
The small buttons have a line height of 15px, but the normal size have a line height of 20px. What's really odd is, even though the computed property for line height for the small buttons say 15px, when I expand it to see where it comes from, it shows .btn with a 20px value being applied (see image).
The bottom line is I'm really not sure what's causing it. I'm assuming it's some style in one of the many divs surrounding it. My main question is obviously how do I fix this, but on a more general level, what would cause the .btn-small style to not be used?
HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them however if the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the class attribute is not relevant. [paraphrased from mozilla common css questions]
You have two classes modifying the same attribute, and so the browser rightly only applies one.
I was able to track down the problem. I initially ruled out jQuery-UI interaction since I was unable to reproduce it in jsFiddle by using jQuery-UI. What I hadn't mentioned and turned out to be relevant, is that we are also using Infragistics Ignite toolset. Ignite is based on jQuery-UI. The dialog was getting the .ui-widget class (I was focused on the button's classes) and that was causing ignite to set the font size in the buttons which then broke the Bootstrap sizing.
To fix the issue, I removed the following line from infragistic's .css file:
.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:"Segoe UI",Arial,sans-serif;font-size:1em}
Sorry for not providing all the relevant info. Just didn't think of infragistics as being a possible cause since I wasn't directly using any of their stuff on that page.
I need to change the styling of my checkboxes. I have read many articles on this but what I am expecting is this: http://i.imgur.com/q2HdOJO.png
When checked, instead of the "check", the checkbox be filled with (in this case) blue color.
I am not sure if this is the "intermediate" state in Mac and thus looks different in my Ubuntu machine but how can I fill the checkbox with color?
You can use the accent-color property in CSS:
#checkbox {
accent-color: #00FFF0;
}
Use images and bind click events with Javascript. It will be much easier than trying to use CSS. CSS will be impossible in some browsers that don't support the styling to hope to achieve.
Here is a related post: How to use images for check boxes using CSS or may be Javascript?
On a radio button checked event, I hide the div by
document.getElementById("AltYukleniciDiv").style.visibility = 'hidden';
But, when I use it for an aspxTextBox, it doesn't hide it. Or when I use the ClientInstanceName instead of document.getElementById(" ")
UnvanText.SetVisible(false); this didn't work either. UnvanText is ClientInsanceName.
javascript crashes there. I put an allert after that and it never shows it. I have to do it because I hide a div, including everything in it, but it still shows the textboxes that has validation. I don't know how it is possible. Can you tell me a way to hide them all? It used to hide the div with all of its contents before I make some validation settings.
It sounds like asp.net is being 'helpful' and changing the IDs of your elements.
Give the text box the attribute ClientIdMode="Static", and it might fix it.
you can add a CssClass attribute to that text box then use it to find the element and hide it.
You can consider using jQuery, so you need to write a single line of code:
$(".MyHideClass").hide();
or set attribute style display:none
I can advice using Firebug (FF Extension) for debugging javascript
I just wrote a tinymce plugin, which has a drop down box. I can increase the size of the select box, by manipulating the CSS file of the advanced theme (the theme I am using). Is there any other way to do it, without changing the CSS? Say in the function of the javascript code that actually creates the select box?
Edit:
I did set the max_width property while creating the listbox, in the createListBox function. But it only changes the width of the elements in the dropdown, not the drop down itself :(
You can always change the css using javascript:
document.getElementById("ATTRIBUTE_ID").style.width = "1000px";
See this SOF link for more details: Change an element's class with JavaScript
You should have a closer look at the tinymce configuration option editor_css.
Using this setting you may configure a css file which will overwrite the default css for the toolbar stuff. This way you don't need to change anything of the core css.
tinymce dropdown generates internally and it's hard to do this in right way, but you always can access the needed element by CSS like:
div[id*='mceu_'].mce-container.mce-panel.mce-floatpanel.mce-menu.mce-animate.mce-fixed.mce-menu-align.mce-in div.mce-container-body.mce-stack-layout {
max-height: 200px !important;
}
for me it works for all dropdown select lists inside modal windows like link-plugin - reduce height of select list block.
Since <select> elements don't style in a predictable way, I was thinking about setting up a javascript/html proxy element to manipulate a hidden <asp:dropdownlist> field. The code that populates the select is beyond my control, but I don't want to render the actual field.
Does anyone have any experience or pointers with something like this?
This is a job for jQuery. What you want to do is roughly the following:
Use css to hide the select dropdown
Read out the options/values of the select element into a javascript array. jQuery is good at this.
Use jQuery to generate a ul element with an li element for each of the options
Use the many methods that are around for styling the ul element into a dropdown
Here is an example of someone who has done this: http://www.brainfault.com/jquery-plugins/jquery-selectbox-replacement/ . You can probably use his code almost as is. The example is a bit confusing because he styles the dropdown to look exactly like a select element. But if you start editing the css you can get it to look any way you want.