I am unable to set Select box height for DropDownCheckBoxes in asp.net. I was able to set SelectBoxWidth, DropDownBoxBoxWidth, DropDownBoxBoxHeight.
I even tried adding SelectBoxCssClass but not working. First image is my current output. I am trying to get output as in second image
Any help appreciated
<asp:DropDownCheckBoxes ID="DdlProject" runat="server" OnTextChanged="DdlProject_TextChanged"
AddJQueryReference="true" AutoPostBack="true" CssClass="dd_chk_select" OnSelectedIndexChanged="DdlProject_SelectedIndexChanged" >
<Style SelectBoxWidth="120" DropDownBoxBoxWidth="120" DropDownBoxBoxHeight="120" DropDownBoxCssClass="btn-default dropdown-toggle" SelectBoxCssClass="btn-default dropdown-toggle dd_chk_select"/>
<Texts SelectBoxCaption="Select Project" />
</asp:DropDownCheckBoxes>
.dd_chk_select {
height: 30px;
text-align: center;
border-radius: 5px;
}
in your style try setting the tag as important
.dd_chk_select {
height: 100px !important;
text-align: center;
border-radius: 5px;
}
You said it worked, this means that your height style was being overwritten somewhere.
Related
I have the following ASP.Net code
...
<div style="width: 40%; float: left; margin-left: 15px">
<b>County:</b>
<asp:ComboBox ID="cboCounty" runat="server" MaxLength="0"
AutoCompleteMode="SuggestAppend" CssClass="EPSCombo">
</asp:ComboBox>
<br />
...
The problem: This div contains many combobox's and they are not showing as expected, they all have EPSCombo class. and when I debug the CSS I find that it is being overridden, here is the output from FireBug
My EPSCombo style is as follows (overriding the default AjaxToolkit CSS)
.EPSCombo .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
{
margin: 0;
border: solid 1px #7F9DB9;
border-right: 0px none;
padding: 1px 0px 0px 5px;
font-size: 13px;
height: 18px;
}
.EPSCombo .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
{
margin: 0;
padding: 0;
background-image: url(../images/windows-arrow.gif);
background-position: top left;
border: 0px none;
height: 21px;
width: 21px;
}
.EPSCombo .ajax__combobox_itemlist
{
border-color: #7F9DB9;
}
And the CSS file containing EPSCombo is the last one included in the Master page.
Question: It might had been a while since I did web development, but if I decide the CSS class for a control shouldnt that have the highest priority and should override everything else, correct? If so, then why is my combobox style (Height, Width, margin, and padding) is being overridden?? I dont have any other style class that set the height and width for those values shown in Firebug.
Update after Loki's answer I thought I should add this, adding !important to these attributes would solve the problem, but I want to get to the root cause of this and see where things went wrong.
Your ComboBox may be inheriting it's styling from the <div> it is contained in, or from a div higher than that. Since you have not specified a 'class' or 'ID' attribute for the div that it is contained within, that div may be retrieving style from your CSS file if you have something like:
div
{
height: 21px;
margin: 0px;
padding: 0px;
width: 21px;
}
To force your ComboBox to take independent styling though you may use the asp style attribute like so:
<asp:ComboBox ID="cboCounty" runat="server" MaxLength="0"
AutoCompleteMode="SuggestAppend" style="margin: 0;padding: 0;height: 21px;width: 21px;">
</asp:ComboBox>
That should be the highest priority over any other styling that may be interfering in your application. Although considered improper programming practice it may help you narrow down the issue.
Cheers, Eric
EDIT I should also mention that your CSS code is interpreted in order from the most specific to least specific tag definitions. Ex, div.menu is more specific than div, this may be occurring somewhere else in your style-sheet.
This is also a good article to look at describing inheritance. Hope this helps!
A quick fix - add !important flags to your stylesheet. They'll have higher priority over everything else, unless there are other flags defining the very same property of the very same element
I was wondering if this is possible:
if I have an input field:
<input type="button" value="some value" class="icon-button" />
and it is styled with gradient background, border, box-shadow, etc.
I want to have the button like an Icon with all its style and the value-text right next to it.
I thought of something like this, but it didn't work:
.icon-button{
display:block;
width: 25px;
height: 25px;
/* gradients, borders, shadows, etc. */
text-indent: 30px;
overflow: visible;
}
Any Idea? I know I could solve it with javascript, but I would like to know if there is a css way to do this.
I don't think you're going to achieve this (at least not very neatly) using an input. If you can amend your markup to use an actual button to submit though, it's pretty trivial:
<button type="submit">Some value</button>
CSS:
button {
line-height: 25px;
border: none;
background: transparent;
cursor: pointer;
}
button::before {
content: '';
display:inline-block;
vertical-align: middle;
width: 25px;
height: 25px;
margin-right: 3px;
/* gradients, borders, shadows, etc. */
background: red;
}
You could use a span rather than generated content if IE7 support is needed. This approach is not possible with an input, as that can't contain any elements, nor can it have generated content.
If you need to use an input, you could achieve the same thing by wrapping it in a span and styling that.
Sorry gals & guys for a potentially dumb question but I have been looking for various ways to solve this issue and it still does not work like I want it to.
This is one of these issues where an input field stays very short (like ~150px) even though the box it is is much wider (like ~1300 px on a wide monitor).
I originally had the html & CSS shown in:
http://jsfiddle.net/jjoensuu/qSz5x/5/
In an attempt to solve this issue I found the solutions in:
How to make text input box to occupy all the remaining width within parent block?
I created what I think is similar to "wdm"'s answer in above thread, but I am missing something because the result is still a narrow input field. My creation is here:
http://jsfiddle.net/jjoensuu/rJ45P/8/
I also tried the solution from "Marty Wallace" in same thread but could not get it to work.
So as a reference to my code on the jsfiddle site, the "topsearch" box gets the width of ~1300 pixels but the "field-topsearch" input field stays at around 156px.
With some of my attempted solutions the "Go" button wraps to the next line below. Any help on how to solve this would be appreciated.
I took a slightly different approach. It appears to me you wanted the input text field to expand but the label and input button to remain the same size either side of the input field. This may well be useful for generating a form containing multiple rows without resorting to table layouts. Also the previous suggestion does not really work very well regarding keeping the elements on one line. This technique would allow the containing 'box' to be resized to whatever you liked at will.
I did have to tweak your html a little, but I feel the label should be next to the element it is related to anyway. I have also left out the form html for clarity since that is not part of the layout:
<div class="input">
<label for="field-topsearch">Search</label>
<div class="value">
<div>
<input id="field-topsearch" maxlength="256" type="text" name="search_str" value=""/>
</div>
<input type="submit" class="button-start-search submit " value="Go!"/>
</div>
</div>
And the css:
.value {
position: relative;
}
.value>div {
margin-left: 60px;
margin-right: 40px;
}
label {
position: absolute;
top: 0px;
left: 0px;
}
input.submit {
position: absolute;
top: 0px;
right: 0px;
}
input[type="text"] {
width: 100%;
}
The fiddle is available here
Here is the working fiddel: http://jsfiddle.net/surendraVsingh/rJ45P/18/
CSS
.topsearch
{
height: 40px;
line-height: 35px;
padding-right: 10px;
width:100%;
display:table;
}
.topsearch label
{
color: #c98116;
text-transform: uppercase;
font-weight: normal;
font-size: 0.9em;
margin: 0 5px;
}
.topsearch label, .topsearch form
{
display: inline;
}
.topsearchfield
{
border: none;
height: 24px;
font-size: 15px;
width: auto;
}
#field-topsearch{width:80%; display:inline-block;}
.button-start-search submit
{
display: table-cell;
}
I'm trying to use a textbox or textarea to show a preview of some notes when a row is selected in an adjacent grid in an Asp.Net application. The problem is, no matter how much text I enter in the bound field, the text gets cut off in the preview text control. I'm testing in IE. These are the two controls I have experimented with that have provided the same results, as well as the CSS used to for the control:
<asp:TextBox runat="server" class="textArea" ID="Notes_TextBox" TextMode="MultiLine" ReadOnly="true" Rows="20" />
<textarea runat="server" class="textArea" id="Notes_TextArea" rows="3" cols="22" readonly="readonly" />
.textArea
{
border: 1px solid #b5bcc7;
height: 380px;
background-color: #F7FCFF;
color: Gray;
margin-top: 1px;
margin-left: 4px;
margin-right: 1px;
padding: 2px;
overflow: hidden;
}
The functionality I'm looking for is to have the readonly text box/area there at all times without a scroll bar showing and when the text is larger than the box, the scroll bar should appear allowing viewing of all the text in the field.
Please let me know if you more information would be helpful or if you have any suggestions for me.
Thanks very much in advance.
Change the overflow style to auto from hidden. That seems to work properly in IE8 for me.
.textArea
{
border: 1px solid #b5bcc7;
height: 380px;
background-color: #F7FCFF;
color: Gray;
margin-top: 1px;
margin-left: 4px;
margin-right: 1px;
padding: 2px;
overflow: auto;
}
This ended up being an issue with the underlying data. The Notes field of the underlying object was truncated by default and there's another field called LongNotes that contained the full text.
I am using the ajaxtoolkit:AsyncFileUpload, and I was wondering if there is even a way to change the button that goes along with it?
<ajaxtoolkit:AsyncFileUpload Width="200" ID="filImageUpload" ThrobberID="imgUploadProgress"
OnUploadedComplete="filImageUpload_UploadComplete"
OnClientUploadComplete="filImageUpload_UploadImageComplete"
OnClientUploadStarted="filImageUpload_UploadStarted"
OnClientUploadError="filImageUpload_UploadError"
UploaderStyle="Traditional" CompleteBackColor="LightGreen" ErrorBackColor="Red" runat="server" />
Is there another attribute that will allow me to change it that I am missing? Or can I change it using CSS?
I know that when it renders I get and input element, but I don't know if I am able to change that text through that in CSS either.
Any help will be appreciated
Not a real fix, but by changing the UploaderStyle="Traditional" to UploaderStyle="Modern", you will be able to make the button an image instead. You can then add a CssClass to the AsyncFileUpload and add a background image through the style sheets.
.AFU
{
position: relative;
float: left;
clear: both;
top: 0px;
padding-left: 0px;
padding-right: 0px;
width: 200px;
border:thick;
margin:0px;
background: url("Your/Path/Here") no-repeat 100% 1px;
}
Just do that:
$("#AsyncFileUpload1").find('div').css('background', 'transparent');
$("#AsyncFileUpload1").find('div').css('background-image', 'url("Images/btnSelecionar.jpg")');
Replace AsyncFileUpload1 by your ControlId.
Works fine for me! =)