I'm trying to fix a textarea height and disable ability to expand rows while typing. So please note that I'm not just trying to "hide" scrollbar, or to prevent user from being able to resize text area using mouse.
You can make it a div and apply "contenteditable" = true.
Relevant changes required are:
This contents of this column should always be visible i.e. no scroll bar, and instead the height of this row should adjust to show all content.
Possible solution to fix the problem with textarea would be to use javascript.
Related
I have a text area element that I want to cap at an initial height of 168px that is expandable vertically but has an initial value that's large and is auto-expanding the box past that 168px initial height on page load. I want to be able to allow the user to be able to expand that box if they want to later on but initially on page load it should be set to 168px with the overflow from that initial value hidden. Have tried various combinations of min-height, resize: vertical, and overflow without success. The box is still autoexpanding as the initial value gets loaded into it on page load. Is this possible with CSS?
I guess, this code will work. Please share your code as a snippet, it would be easy to debug.
textarea{
resize:vertical;
min-height:168px;
}
<textarea></textarea>
On this site here:
http://acp.studevent.co.uk/
I have a fixed div at the top which will act as a menu and a content div below containing everything else. I cannot figure out how to use overflow-y: scroll so that the pages scroll bar is only used for the content div and ignores the header div at the top.
PrimeFaces's layout/layoutUnit components do exactly what you needed. And if I'm not mistaken, they use javascript to calculate and set an height to the content. Each time you resize your page it recalculates the values.
You can check their showcase:
http://primefaces.org/showcase/ui/layoutFull.jsf
I dare say, you need to set a fixed height for overflow-y'to work. And one way to make it dynamic is to somehow calculate the necessary values.
Also you could make them have dynamically calculated fixed heights by using css positioning and left-right-top-bottom properties.
Best regards..
What I want to do is have a way to horizontally scroll through the icons on the top bar. No matter how I try to implement overflow I cannot get it to work. Here is a link to the page. Link no longer exists.
Note: that the scrollbar shall not cover the background image at all. It should be immediately below.
You need to set the width of that header div to be wider (width:2000px;). If you want a dynamic width (you dont know how many boxes will be in there) then you'll have to calculate the width with javascript (or serverside code like PHP).
Giving the .browser div a width of 2000px does the trick... then adjust the height of your divs to be tall enough to show the whole icon and name.
Let me know if that makes sense...
I'm building a tab bar in css, and want it to be able to handle having more tabs than can be shown on the screen. My HTML is structured roughly:
<div id="tabbar">
<div id="tablist"></div>
</div>
css:
#tabbar {position:absolute;width:100%;height:24px;overflow:hidden;}
#tablist {position:absolute;top:0px;left:0px;height:24px;}
div.tab {float:left;}
with all tabs inserted into #tablist. So long as the there are few enough tabs that they don't overflow, #tablist shrinkwraps correctly and I can get their collective widths. However, as soon as there are more than can fit on the screen, they wrap to the next line (though you can't see it, obviously, due to #tabbar's overflow:hidden), and #tablist's width ceases to accurately represent the total widths of the tabs.
I could set #tablist's width through javascript manually, adding the total widths of each tab, but this seems an awfully messy and error-prone approach. I could also use a table, but I'd rather not since it violates the whole css-for-layout theory.
What I'm looking for, in essence, is a means to shrinkwrap a div around its contents without its contents being wrapped to a second line due to the width of the div's parent.
EDIT: The purpose of this is to build a tab bar which allows the user to scroll when there are too many tabs, but in order to do that I need to know when the width of #tablist, or the total widths of all tabs, is greater than the width of #tabbar, so that I can activate the 'scroll right' button. I also need to know the exact width, not just the fact that it's wider, so that I know how far it should be able to scroll.
From what I understand, you want to keep the tabs on one line even if they're not shown on the screen, perhaps you'll be scrolling them? I could be wrong, but if I'm correct - you can simply set a big enough width on #tablist to float all tabs, which will then be hidden by the parent (#tabbar) overflow:hidden.
#tablist {width: 10000px}
I'm working on a web page where I have a dynamically generated table where certain columns should be of variable width (sizing to the text) and certain columns must always be a specific width. However, the table is inside of a containing div, and firefox is resizing the table such that it stays within the confines of the div. The trouble is, it resizes the columns that must remain a specific width.
Is there any way to force those columns to remain the same size, thus forcing the table to overflow from the div? The div has overflow: auto, which allows you to still see the table, and this is the effect that I am trying to achieve.
Thanks.
You might try styling it with overflow: visible; You could also try floating it, but that opens a whole other can of worms that you probably don't want.
I have several encounters with this problem, I couldn't find a best way to have what I want to display to be displayed/aligned to my needs. Especially so for width of the columns with dynamic text.
Instead of tackling it head-on, I use another approach. I tried to limit the number of characters (variable font-wdith still an issue, need to tweak around) to be displayed on a fixed width column. I'll then add tooltip (via title attribute or tooltip plugins) when mouseover those truncated text.
This is not a direct answer to your requirement, just offering another alternative.