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.
Related
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.
I have an asp button with certain style. but when i apply the same style to asp file upload control, only background change to that style. The browse button is still the same.
Asp code is
<div>
Please Select Excel File:
<asp:FileUpload ID="fileuploadExcel" runat="server" CssClass="addkey_btn" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" OnClientClick="showDivPageLoading();" CssClass="addkey_btn" />
</div>
CSS is
.addkey_btn {
background: none repeat scroll 0 0 #00B7CD;
border: 0 none;
color: #FFFFFF;
cursor: pointer;
font-family: 'Altis_Book';
font-size: 15px;
padding: 3px 15px;
}
I want to apply the same css to Browse button as in Upload button. Any suggestions?
EDIT1
Any pure CSS way of doing this?
It is very difficult to style input[type=file] reliably across browsers. The only cross-browser solution is the one demonstrated by #Vitorino, using label and/or pseudo-elements to hide the actual input and then style that element/pseudo-element instead.
This answer doesn't repeat that, but offers a pure CSS alternative which is browser dependent. That said, this should not be used in production websites, this is just a proof-of-concept or a demo.
Modern browsers are implementing somewhat non-standard extensions to enable user-styling of hitherto nigh-impossible element features. This allows developers to override default user-agent stylesheet to a large extent.
Custom-extensions:
Specifically, for input[type=file] at least Trident (for IE-10 and above) and Webkit (for Chrome, Safari) allow styling of this element to some extent without resorting to hacks like hidden elements, or absolutely positioned pseudo-elements. For this case, the vendor-specific extensions of our interest are:
-webkit-appearance (to enable override of user-agent style in Webkit-based browsers)
::-webkit-file-upload-button (to enable styling of the browse button in Webkit browsers)
::-ms-browse (to enable styling of the browse button in Trident-based browsers, i.e. IE)
::-ms-value (to enable styling of text input in Trident browsers, i.e. IE)
Caveats:
Unfortunately, there are no -moz- extensions for this in Gecko/Mozilla based browsers. Specifically, at least Firefox doesn't allow styling of the browse button at all.
IE does not allow changing the position of the browse button from right to left. Has to be further verified, perhaps it is using -ms-flex to control that?
Demo:
Example Fiddle: http://jsfiddle.net/abhitalks/hxv19bbg/7/
Example Snippet:
The following snippet will work perfectly in IE-10/11 and Chrome-39 (that is what I tested against), but will not work with Firefox.
* { box-sizing: border-box; margin: 0; padding: 0; }
div { margin: 8px; }
input[type=file], input[type=file] + input {
display: inline-block;
background-color: #eee;
border: 1px solid gray;
font-size: 15px; padding: 4px;
}
input[type=file] + input {
padding: 13px;
background-color: #00b7cd;
}
::-webkit-file-upload-button {
-webkit-appearance: none;
background-color: #00b7cd;
border: 1px solid gray;
font-size: 15px; padding: 8px;
}
::-ms-browse {
background-color: #00b7cd;
border: 1px solid gray;
font-size: 15px; padding: 8px;
}
input[type=file]::-ms-value { border: none; }
<div>
<label>Select File: </label>
<input id="browse" type="file" />
<input class="btn" type="button" value="Submit" />
</div>
you can style label and place it on top of choose file button
.btn,
label.choose:before {
background: none repeat scroll 0 0 #00B7CD;
border: 0 none;
color: #FFFFFF;
cursor: pointer;
font-family: 'Altis_Book';
font-size: 15px;
padding: 3px 15px;
}
label.choose:before {
content: 'Choose file';
padding: 3px 6px;
position: absolute;
}
<div>
<label class="choose">
<input id="browse" type="file" />
</label>
<input class="btn" type="button" value="Submit" />
</div>
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
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 have some Radio Buttons as shown here:
<input type="radio" name="sex" id="Duration" value="Duration"/>
<label"Duration">Date Range</label>
I have tried several ways, but i am unable to change the styling for the label of these radio Buttons
Could anybody please help me?
First you need to correct the label code, you have <label"Duration"> and it should have "for", like this:
<label for="Duration">
(read here: http://www.w3schools.com/tags/tag_label.asp)
Then you need to target the <label> with your CSS.
Try this in your CSS definitions:
label {
text-size: 11px;
font-weight: bold;
}
To contribute a little to jackJoe
a little something on the side:
"i would recommend using class over 'id' because class is used for muliply uses for the same purpose, like a bunch of radiobuttons that need the same style, id however is for most of the time one time only styles.";
<label class="duration">
in css you need the '.' to call it a class and a '#' to call it an id (sorry for my bad english)
css:
.duration{
width:21px;
height:21px;
margin: 0px;
padding: 0px;
background-image:url(images/radiobutton.png);
background-repeat: no-repeat;
}
on the side watch out for using Capslock letters in the beginning its better to use only small letters.
This is a sample styling
.radio {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(checkbox.gif) no-repeat;
display: block;
clear: left;
float: left;
}