I am using the AJAX autocomplete add-on to the <asp:textbox> control. I have everything working with a <div> around the <ajaxToolkit:AutoCompleteExtender>.
I set the following CSS class:
.autocomplete_CompletionListElement
{
margin: 0px;
background-color: White;
cursor: default;
overflow-y: auto;
overflow-x: hidden;
height:180px;
text-align: left;
border: 1px solid #777;
z-index:10000;
}
Right now, when the list contains a reasonable amount of items, a vertical scrollbar appears (which is correct) and I can scroll through the drop down which is set to a height of 180px in the CSS (as seen above).
However, when there are only 1 or 2 items in the drop down, the height remains fixed at 180px with the 2 items and blank white space below. What I would ideally want is that the AJAX drop down would shrink to fit the height of its contents. If the contents are more than 180px, then the scrollbar should appear (as it is doing now).
Remove height:180px and change the CSS to use something like:
max-height:180px;
That should work (but I think only from IE7+) the other browsers should support it ok.
Related
I have a custom webkit scrollbar like this:
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: #999 !important;
}
So it renders a grey custom scrollbar instead of the standard one. However, it is stuck to the right side of the page. I know I can change this by adding a margin, padding or border to my body but I am using fullscreen (on backgrounds) images. So when I try this all the images are affected by this too, which I do not want. So I tried to position the scrollbar but this does not work (as it is not an element but a user agent property...
So I'm looking for a way (without using another plugin) to customize the toolbar so that it is offset from the side.
Or, if possible that I can make the scrollbar offset in a div.
Secondly, I'm looking for a way that I can make the "track" of the scrollbar transparet. So only a handle.
Thanks in advance!
If you are still looking for for the answer (or somebody else is, like I was) - here is a definitive article about webkit scrollbars.
Answering Your first question - I'd suggest that you put all your scrollable content in a div with 100% height and 90% width - the 10% left on the right would be your offset. Like that:
.superDiv{
height:100%;
width:90%;
position:fixed;
}
body{ overflow: hidden }
The second question - you're looking for
::-webkit-scrollbar-track-piece {
background:transparent;
}
But as Apple people are pushing for no-scrollbar web browsing, only the properties set by CSS are visible, so you don't have to change the track-piece.
Clever solution I found recently was to put the border on the right hand side of the screen / div that contains scrollbar:
<div class="yourdiv">
border-right: 5px solid #(background_color);
</div>
An easy way to control the position of a custom scrollbar is to set the scrolling element (body?) using definitive positioning. You'll also need to set html to overflow:auto;
To make the thumb transparent, use a RGBa value for declaring the color. In this case I used 0,0,0,0.4 (red,green,blue,alpha). RGBa is not supported in every browser, Chris Coyier has a good table of who supports it here: http://css-tricks.com/rgba-browser-support/
If all you want to show is the thumb than also consider hiding the other elements of the scrollbar: resizer, scrollbar-button, and scrollbar-corner.
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 5px;
right: 20px;
overflow: scroll;
}
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: rgba(0,0,0,0.4); /*-- black at 40% opacity --*/
}
::-webkit-resizer,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner { display: none; }
Check out the working demo at http://jsfiddle.net/Buttonpresser/G53JQ/
I am trying to use CSS3 columns to order some divs top to bottom then left to right. It seems to work pretty well but I have this one issue as shown in the image below. I give each of the divs a background and when I adjust the height of my window, instead of moving the entire background in one block as I would like, it progressively adds it, separating the background between two columns. This looks REALLY bad. I was wondering if there was a way to preserve the background of my divs so that as soon as the window becomes too small to accommodate even one pixel-height of a div, it moves the entire div to the next column.
Secondly, I would like to center the column(s) on the page with regard to the window size. I want this to work in Chrome (any recent version), Firefox (Any recent version), and IE 10.
You can fiddle here: http://jsfiddle.net/eE3z6/
#mainContent /* The containing div */
{
position: absolute;
top: 50px;
bottom: 50px;
margin: 10px;
column-width: 400px;
-webkit-column-width: 400px;
-moz-column-width: 400px;
}
.blockData /* The divs inside are all of this class */
{
position: relative;
width: 380px;
height: 30px;
padding: 4px;
margin: 0px 0px 10px 0;
border: 4px outset grey;
background: lightgrey;
}
Just add -webkit-column-break-inside : avoid; and display : inline-block for .blockData
Demo at : http://jsfiddle.net/eE3z6/4/
I thought I answered this yesterday. You need to take the float:left off of the .blackData and .listData styles and add a padding-bottom to your .listData style. 20px seems to work. The columns is checking the content (not the background) when deciding what to send to the next column and by adding padding to the bottom of the .listData you are making the content the same size as the background.
Also, on your jsfiddle you have .blockData style in there 2 times, so you need to take one of them out.
If you want to make it so that the columns will center on the main content div you will need to take off the position:absolute style from #mainContent and change .blockData margin from 5px 0px to 5px auto. By adding the auto to margin you will automatically center the content. I would also suggest taking the margin off the top of .blockData and only putting it on the bottom, so that all the columns will align to the top.
Now, when you take off the absolute positioning from #mainContent you will be able to center the blocks, but it will not readjust and send one block to the next column, but will even out the number of blocks in each column (i.e. instead of having 7 in the first and 1 in the second it will have 4 in the first and 4 in the second). It really depends on how you want it to be displayed.
I also, fixed up your jsfiddle. just turn position: absolute off and on for #mainContent and you'll see what I'm talking about.
EDIT:
instead of using-padding bottom to keep from cutting off each background you can use display: inline-block on the .blockData (this is similar to column-break-inside: avoid in this case but works on all browsers).
I'm currently working on a CSS Dropdown menu and I've run into the following issues:
Each successive sub menu overlaps its parent menu by an increasing amount.
Attempting to fix item 1 by setting the left attribute (each submenu already has position:absolute) does not work and throws off the position of the menu wildly.
Whenever a submenu is shown, the right padding is automatically increased causing a gap between the menu and the bottom border of the menu items.
In the CSS I use display: table-* (the star being any of the table-related display values) in order to make vertical centering of text easier and to more easily keep the selected menu item at the top of the list (see display: table-header).
I would really like to know both solutions and causes for the above issues.
For reference, I've created a fully functional JsFiddle.
I made a fiddle here http://jsfiddle.net/xUWdj/
Changes made:
Got rid of all the table displays, the only reason you were using it was for vertical alignment, you can utilize line-height on the <a>'s instead.
All submenu <ul>'s now are positioned based off it's parent by left: 100%; & top: 0;
You should now be able to style/position the rest of the menu to how you want it.
Edit:
Here's a version that allows you to continue using the table-group-header http://jsfiddle.net/HSh5n/2/
Changed li a { display: block; line-height: 30px; }
Added margins to move the ul's to -42px 0 0 130px
I guess the biggest thing with tables is that since they're inline elements, you can't assign position: relative to table-cells, so that's why you couldn't use the left or top properties. I haven't browser tested this, but I'd always double check if you go this route.
If you add right border to your li a{...} you can get an idea about what's causing the overlaps.
li a {
display: table-cell;
border-bottom: solid 1px #cccccc;
border-right: solid 1px #cccccc;
text-decoration: none;
color: rgba(89,87,87,0.9);
height: 30px;
padding: 5px;
vertical-align: middle;
cursor: pointer;
}
I need to create a dialog box using custom images created by a designer. For purposes of this discussion, this the correct answer for my application. The dialog box must be able to withstand changes in width and height. This is easy to do with a table, but I want to maintain a table-less design, so I figured that I could do this using 3 rows of DIV's. For example, float an image to the left, float an image to the right, and put a DIV in between then with the image set to the background so that text can be entered over it.
Here is demo of my failed attempt to do this: (just one row shown)
http://www.seaburydesign.com/rounded/demo.html
As you can see, this almost working. But the DIV in the middle is only the size of the content inside of it, even though I have set the height and width. I need to keep the width flexible.
Any ideas on how to fix this?
Remove the following line:
display:inline;
Besides being useless in this case (the inline behavior is already working because of the floats) "inline" property doesn't allow you to set the element's width or height. For a clearer understanding, read w3c's article.
If you make the rounded corners of your images white instead of transparent, you can apply the background-image to the header-tag instead of the middle div. This will create the impression that the middle div has the same height as both images.
Update
If possible (depending on what browsers you need to support), you could do rounded corners with CSS3's border-radius property, instead of using images. That would be something like:
header {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
You could also try this border-radius CSS-generator to find the properties that suit you best.
The css display: inline in your container div's voids any setting for width. Use display: block; float: left; margin: 0 XXpx; for your div (with XX being the width of the images on the sides).
Edit:
Concretely this would be:
div#yourdiv {
background-image: url("images/module_header_bg.jpg");
color: white;
display: block;
float: left;
font-weight: bold;
height: 42px;
width: auto;
}
and both img tags
img {
float: left;
}
This creates a dynamic sized box for your content, or you set width of the div to a specific value like width: 300px instead of width: auto.
I'm attempting to provide a consistent width per line in pixels inside of a textarea across IE8, Firefox and Safari, so that text content wraps lines as predictably and consistently as possible.
Firefox is doing something a little bit odd: it has an extra pixel of padding eating out of the content space of the textarea vs the other two browsers, and vs a similarly equipped div block.
When applying this class to both a textarea and a div the difference is visible, with the text in the div touching the outer left edge of the red background but the text in the textarea have 1 px padding-like offset in spite of padding being zero:
.testbox{
padding:0;
margin:0;
border:0;
background: red;
width: 40px;
height: 40px;
font-size: 12px;
line-height: 16px;
}
Other values for padding wind up displaying one extra pixel of offset vs a div.
Any ideas on if there's a way to trick Firefox to render a textarea as if it were a div, or to adjust this not-padding-but-looks-like-padding property for a textarea?
I have recently been doing some researching on the problem described by OP for a similar question on SO. It seems that a bug in Firefox is causing the rendering of this so called "not-padding-but-looks-like-padding" on textarea elements.
Usually this extra padding is not really an issue, but it becomes an issue when you want to keep two elements the same width, and you care about getting its content to wrap the same way in both elements.
Getting textarea's to wrap content the same as e.g. div elements in Firefox
It seems to be impossible to get rid of this 1.5px wide padding on the textarea in Firefox, so if you want to ensure that the content wrapping inside a div in Firefox behaves exactly the same as the content wrapping inside a textarea in Firefox, the best approach seems to be to add an additional 1.5px of padding on the right and the left hand side inside the div, but only in Firefox. You can accomplish this by setting the following vendor specific prefixed CSS properties on your div:
-moz-box-sizing: border-box;
-moz-padding-end: 1.5px;
-moz-padding-start: 1.5px;
The first ensures that the padding set on the div does not increase the width of the div, and the next two ensure that 1.5px of padding will be set on the right and the left hand side of the div.
This approach does not affect the rendering of the div's in any other browsers, it doesn't need to, as textarea's in other browsers don't render any extra padding. But it ensures that there are no content wrapping differences between div's and textarea's inside Firefox as long as they share the same font-family and font-size properties and so on.
Here's a jsFiddle for demonstration purposes.
Getting textarea's to wrap content consistently across browsers
If you only wanted to ensure that a textarea in Firefox has the same width and wrapping behaviour as a textarea in other browsers, you can set its box-sizing to border-box, add a padding on both sides of 5.5px and set -moz-padding-end and -moz-padding-start to 0px.
textarea {
padding: 0 5.5px 0 5.5px;
-moz-padding-end: 0px;
-moz-padding-start: 0px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Here's a jsFiddle showing this approach.
Wow, I don't know the answer yet but I did try some stuff, and it appears as though a textarea, when you apply borders, margins and padding to it, doesn't change its width but puts the borders etc. on the inside. Try this:
.testbox {
padding: 10;
margin: 10;
border: 5px solid black;
background: red;
width: 40px;
height: 40px;
font-size: 12px;
line-height: 16px;
}
You could work around this by using something like this:
<div class="testbox">
<textarea class="testarea"></textarea>
</div>
css:
.testbox {
padding: 0;
margin: 0;
border: 0;
background: red;
width: 40px;
height: 40px;
font-size: 12px;
line-height: 16px;
}
.testarea {
padding: 0;
margin: 0 -1px;
border: 0;
background: red;
width: 100%;
height: 100%;
font-size: 12px;
line-height: 16px;
}
This also seems to work in IE, except for the -1px, which throws the layout off (by one).
This is a bug in firefox which got fixed a few days ago. The fix will be released with Firefox 29.
I already tried the latest nightly build and the textara bug is gone!
I was facing the same problem and although my solution seemed like bending backwards too much for that one pixle, but it fixed the problem, here goes: To unify the width because of this weird behavior, Instead of using a div, i used a disabled textarea with a white background and a default cursor to act as a mimic the div.
I was having a similar problem, a link tag with a background image and padding did not display well on firefox. The padding and background seemed to apply to the line of text, not the block of text, when multiline. I tested out a few things, and ended up using a "display:block;" on the element css. Worked for me.