Search Results

Search found 532 results on 22 pages for 'scrollbar'.

Page 20/22 | < Previous Page | 16 17 18 19 20 21 22  | Next Page >

  • TEXTAREAs scroll by themselves (on IE8) every time you type one character

    - by Justin Grant
    IE8 has a known bug (per connect.microsoft.com) where typing or pasting text into a TEXTAREA element will cause the textarea to scroll by itself. This is hugely annoying and shows up in many community sites, including Wikipedia. The repro is this: open the HTML below with IE8 (or use any long page on wikipedia which will exhibit the same problem until they fix it) size the browser full-screen paste a few pages of text into the TEXTAREA move the scrollbar to the middle position now type one character into the textarea Expected: nothing happens Actual: scrossing happens on its own, and the insertion point ends up near the bottom of the textarea! Below is repro HTML (can also see this live on the web here: http://en.wikipedia.org/w/index.php?title=Text_box&action=edit) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <body> <div style="width: 80%"> <textarea rows="20" cols="80" style="width:100%;" ></textarea> </div> </body> </html>

    Read the article

  • Making a table in a scrolling div resizable?

    - by Mason Jones
    I've got a table in a div, with a vertical scrollbar on the div to allow the table to be longer than the div can hold. Works fine. But I'd like to allow the user to resize the div vertically if they want to be able to view more of the table. I've been playing with the jQueryUI resizable interaction, but it doesn't seem to quite do what I want; at least, not so far. I've tried making the wrapper div resizable, but the behavior's erratic. If I have the style "height:20em; overflow:auto;" on it, then I can resize the table horizontally, but not vertically. If I remove the overflow, then the table flows outside the div of course. If I remove the height, then the table is actually resizable, but it is initially drawn at full height. Anyone know of a way to specify an initial height, but allow it to be resized larger than that? If I make the table resizable rather than the div, then I can resize the table horizontally within the div but I can't increase the height of the displayed table. Which makes sense, of course, but I thought I'd mention it. Also, is there a way to make the resize "handle" the corner between the horizontal and vertical scrollbars? Right now it's a sort of invisible handle in the bottom-right of the table. Thanks for any thoughts.

    Read the article

  • css caption issue

    - by Moode Osman
    i have problem with caption to make caption appear under each photo when hover over it but thr problem here they appear all on one side one place the left bottom side here the code for HTML <div id="content2"> <ul style="width: 5020px; height: 600px;"> <li class="image" style="width: 392px;"><img src="images/pr1x.jpg" ><p class="caption">1st caption</p></li> <li class="image" style="width: 392px;"><img src="images/pr2x.jpg" ><p class="caption">2st caption</p></li> </ul></div> here the code for CSS li.image p.caption { position:absolute; display: none; font-size: 28px; color: red; } li.image:hover p.caption { display: list-item; }? #content2{ width: 150%; height: 600px; float:left; overflow:hidden; } #content2 p{ width: 150%; } .scrollbar-hor{ background-color: #e5e2de; height: 24px; width: 150%; float:left; } .handle-hor{ height: 25px; width: 400px; background: url(http://brafitting.info/images/bar.jpg) no-repeat; } plz help ty

    Read the article

  • Javascript problem with iframe that's hidden before loaded

    - by Aistina
    I have a page that contains an iframe that gets loaded using Javascript: index.html <iframe id="myFrame" width="800" height="600" style="display: none;"></iframe> <div id="loader"><!-- some loading indicator --></div> <script type="text/javascript"> function someFunction() { var myFrame = document.getElementById('myFrame'); var loader = document.getElementById('loader'); loader.style.display = 'block'; myFrame.src = 'myFrame.html'; myFrame.onload = function() { myFrame.style.display = 'block'; loader.style.display = 'none'; }; } </script> The page that gets loaded in the iframe contains some Javascript logic which calculates the sizes of certain elements for the purposes of adding a JS driven scrollbar (jScrollPane + jQuery Dimensions). myFrame.html <div id="scrollingElement" style="overflow: auto;"> <div id="several"></div> <div id="child"></div> <div id="elements"></div> </div> <script type="text/javascript"> $(document).load(function() { $('#scrollingElement').jScrollPane(); }); </script> This works in Chrome (and probably other Webkit browsers), but fails in Firefox and IE because at the time jScrollPane gets called, all the elements are still invisble and jQuery Dimensions is unable to determine any element's dimensions. Is there a way to make sure my iframe is visible before $(document).ready(...) gets called? Other than using setTimeout to delay jScrollPane, which is something I definitely want to avoid.

    Read the article

  • Slider with buttons. How to improve?

    - by Kalinin
    I need to make slider. I have content (which should shift horizontally) and two buttons - "right" and "left". If you press the button and hold it, the content starts to move (in the appropriate direction). If you not hold the button, then the movement stops. This behavior is copies the behavior of usual window scrollbar. I wrote code: var animateTime = 1, offsetStep = 5; //event handling for buttons "left", "right" $('.bttR, .bttL') .mousedown(function() { scrollContent.data('loop', true).loopingAnimation($(this)); }) .bind("mouseup mouseout", function(){ scrollContent.data('loop', false); }); $.fn.loopingAnimation = function(el){ if(this.data('loop') == true){ var leftOffsetStr; leftOffsetInt = parseInt(this.css('marginLeft').slice(0, -2)); if(el.attr('class') == 'bttR') leftOffsetStr = (leftOffsetInt - offsetStep).toString() + 'px'; else if(el.attr('class') == 'bttL') leftOffsetStr = (leftOffsetInt + offsetStep).toString() + 'px'; this.animate({marginLeft: leftOffsetStr}, animateTime, function(){ $(this).loopingAnimation(el); }) } return this; } But it does have a few things that I do not like: Always call the function animation (loopingAnimation) - I think that this is an extra load (not good). When moving content he "twitches and trembling" - (it's not pretty). How can I solve this problem more elegantly and without the drawbacks of my code?

    Read the article

  • When I Add <DIV> Bottom Scroll Bar Appears, Even Though It Is Not Greater Than The Page Width

    - by Clay Dempsey
    I have searched for this with no answer. My page loads up perfectly when I load the header, navigation and then center image...all 3 different divs. However I have more I need to add and the div tags change the size of the page even though the css I'm using isn't larger than the page. I have no idea what is happening. Here's the code page where everything is fine: http://www.thehdmgroup.com/midwaymissionary/test.php When I add the below div tag with the below css I get a bottom scrollbar on the page and I don't know why. Can someone please explain it to me? #middleTextBox1 { position: absolute; top:507px; left:172px; width:180px; height:180px; background-color:#411b42; border: 1px solid #434343; padding:10px; color: #FFFFFF; font-size: 10px; font-family: Arial, Helvetica, sans-serif; } <div id="middleTextBox1"> <h3 align="center">Mission:</h3> Words </div> I really have no idea why this is happening, could someone please help me out? Thanks for your time.

    Read the article

  • Need help with height 100% layout

    - by serg
    I am trying to build the following layout (file browser type of thing, left block would contain a list of files, right panel would contain selected file content): <------------- MENU -------------------> <--- LEFT ----><------- RIGHT ---------> <--- LEFT ----><------- RIGHT ---------> <--- LEFT ----><------- RIGHT ---------> <--- LEFT ----><------- RIGHT ---------> <--- LEFT ----><------- RIGHT ---------> <--- LEFT ----><------- RIGHT ---------> The page itself shouldn't have any scrollbars. Menu has 100% width and fixed height Left block has fixed width and 100% height. If content is taller - scroll bar appears inside the left block only. Right block contains <pre> element and takes the remaining width and 100% height. If content is wider or taller - scrollbar appears inside the right block only. This is what I have so far: http://jsbin.com/uqegi4/3/edit The problem is fixed menu height messes up 100% height calculation and all scrollbars inside left and right blocks appear at wrong time. I don't care about cross browser compatibility, only Chrome matters. Thanks.

    Read the article

  • Adapting the width of a Flexs 3 DataGridColumn to the content of its ItemRenderer ?

    - by phtrivier
    I have the following scenario : A Flex 3 DataGrid is sitting here At runtime, a column is added to this grid The column has a custom ItemRenderer The ItemRenderer inherits from HBox, and adds a few items to the HBOx dynamically My problem is that the width of the column doesn't change. As a consequence, my column stays small, and an ugly horizontal scrollbar is displayed in the line, instead of my content (which is completely unreadable). I would like the column to adapt its width to the content of the HBox in the ItemRenderer. I tried the following : Setting the 'percentWidth' of the ItemRenderer to '100' Invalidating the properties of the ItemRenderer after adding the items The only thing that has a "visible" effect it to force the width of the DataGridColumn. Obviously this is not acceptable since I'm dynamically adding components to the ItemRenderer, and I don't know how many or how big they are. Besides, when I am in the ItemRenderer, I have no access to the column itself (or do I ?) so I cannot force the size of the column from here. So is there a way around this ? Would AdvancedDataGrid help here (notwhistanding the fact that I cannot really use it for other reasons ...) Thanks PH

    Read the article

  • japanese input display outside of TextField created into ScrollPane

    - by soetheingilynn
    hello... I'm new to ActionScript 2.0. plz kindly help me. I have created the MainMovieClip and Scrollbar as follow .... my problem is that when I input japanese characters,the characters display at the top corner of the swf until I confirm the input. how can I do it?? if I install FlashPlayer "flashplayer10_1_rc2_plugin_041910", then the japanese characters display in the textfield normally....why is that??? plz..help me. with flash player 10.0, I can't input the japanese characters in the textfield. var mcMain:MovieClip = this.createEmptyMovieClip("mcMain", this.getNextHighestDepth()); scrp.contentPath = "scrollMovieClip"; mcMain = scrp.content; var textholder:TextField = mcMain.createTextField("txt", mcMain.getNextHighestDepth(), 50, 50, 100, 50); mcMain.txt.setFocus(); mcMain.txt.type = "input"; mcMain.txt.wordWrap = true; mcMain.txt.multiline = true; mcMain.txt.background = true; mcMain.txt.border = true; mcMain.txt.selectable = true; thanks in advanced...anyone.

    Read the article

  • IE8 ignores jQuery UI 'dialog' minHeight and height settings

    - by Kev
    I'm using jQuery 1.4.4 with jQueryUI 1.8.7 to display a modal dialog box. I'm having a problem where IE8 renders a scrollbar and appears to ignore the minHeight and height options in all the many different combinations I've tried them in. In Chrome 8 and Firefox 3.6 my dialogue looks like: In IE 8 it looks like: The markup and script looks like: <a id="create" href="#">Create New Thing</a> <div id="dlg-create-thing" title="Create new thing?"> <form name="create-thing-form" id="dlg-create-thing-form"> <p style="text-align:left"> <span>Name: <input id="thingName" name="thingName" maxlength="12" size="30" /></span> <br /><br /> <b>Thing options:</b><br /><br /> <input type="radio" id="option1" name="theoptions" value="0" checked="checked" />Use this option<br /> <input type="radio" id="option1AndMem" name="theoptions" value="1" />Use this other option </p> </form> </div> <script type="text/javascript"> $(function () { $("#dlg-create-thing").dialog({ autoOpen: false, resizable: false, width: 500, modal: true, minHeight: 280, buttons: { "Create": function () { /* do stuff */ }, "Cancel": function () { /* do other stuff */} } }); $("body").delegate("a[id='create']", "click", function () { $("#dlg-create-thing").dialog('open'); return false; } ); }); </script> How can I fix this (preferably in a nice browser agnostic way, but I'd settle for anything)?

    Read the article

  • call function inside a nested jquery plugin

    - by tchoesang
    There are many topics related to my question and i have been through most of them, but i haven't got it right. The closest post to my question is the following: http://stackoverflow.com/questions/1042072/how-to-call-functions-that-are-nested-inside-a-jquery-plugin Below is the jquery plugin i am using. On resize, the element sizes are recalculated. I am now trying to call the function resizeBind() from outside of the jquery plugin and it gives me error I tried the following combinations to call the function $.fn.splitter().resizeBind() $.fn.splitter.resizeBind() Any ideas, where i am getting wrong? ;(function($){ $.fn.splitter = function(args){ //Other functions ...... $(window).bind("resize", function(){ resizeBind(); }); function resizeBind(){ var top = splitter.offset().top; var wh = $(window).height(); var ww = $(window).width(); var sh = 0; // scrollbar height if (ww <0 && !jQuery.browser.msie ) sh = 17; var footer = parseInt($("#footer").css("height")) || 26; splitter.css("height", wh-top-footer-sh+"px"); $("#tabsRight").css("height", splitter.height()-30+"px"); $(".contentTabs").css("height", splitter.height()-70+"px"); } return this.each(function() { }); }; })(jQuery);

    Read the article

  • jQuery slide vertical images

    - by Mike
    Hello, I hope someone can help me with the following problem. I have a vertical scrollbar on my website which shows 5 images and will scroll 5 images further or back, depeding on where you clicked. The jQuery code looks like this. $(".productSlide .scrollable").scrollable(); $(".productSlide .scrollable").scrollable({ vertical: true, mousewheel: true }); I am new to jQuery and what I can achieve ist the following <div class="scrollBlock"> <?php for($i=0; $i<5; $i++) include 'example1.php'; ?> </div> <div class="scrollBlock"> <?php for($i=0; $i<5; $i++) include ' example1.php'; ?> </div> <div class="scrollBlock"> <?php for($i=0; $i<5; $i++) include ' example1.php'; ?> </div> In example1.php there is an image which will be showed 5 times. And everytime you click you’ll see the same div again with the same 5 pics. I can’t figure this one out without the "scrollBlock" div. How can I use more pictures in just one block – and it’s still scrolling 5 images? Thanks so much!

    Read the article

  • Dojo's nested BorderContainer disappear in IE

    - by h4b0
    I have this terrible problem with IE 7/8/9. I wrote an app using Dojo toolkit 1.8.0 and Play! framework. It works fine in all browser except for IE. Its 'developers tools' show no error, so does firebug. The problematic code section is here: <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'"> <div data-dojo-type="dijit.layout.ContentPane" id="head" region="top"> </div> <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'"> <div data-dojo-type="dijit.layout.ContentPane" id="menu" region="left"> </div> <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'"> <div data-dojo-type="dijit.layout.ContentPane" id="content_1" region="top"> </div> <div data-dojo-type="dijit.layout.ContentPane" id="content_2" region="bottom"> </div> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" id="foot" region="bottom"> </div> </div> The result, in all browsers except for IE is like that: But in IE it is shown like that: Can anyone explain why there are such differences? At first I thought that in IE content is hidden, so I set overflow: auto, but no scrollbar appeared after page load.

    Read the article

  • IE showing hidden div under certain circumstances

    - by karola
    After googling around and finding a lot of ie bugs I still did not find a description of the problem I have. The initial situation is a standard one. We have a tooltip which is actually a hidden div that will be displayed on mouseover at a given location. The div is hidden with display:none and contains a table with the content. We tried different libraries for showing the div (scriptaculous and jQuery Cluetip) but the effect is the same. The problem: Everything is fine as long as the contents fits the width of my window. But when I resize it until the horizontal scrollbar is activated the content of the hidden div will be shown at the end of the page when the tooltip is activated. This is really strange as it happens only under these premises. When more than one tooltip is involved the browser might even crash (and under Vista takes the whole system with him duh). I know it's a bit complicated to explain but I hope that someone at least had heard of that bug and can point me into the right direction.

    Read the article

  • Numbers not adding up? (What am I not understanding here?) [closed]

    - by Milo
    I have the following output: Short version: The last numbers on the S= lines increase by H and SHOULD theoretically be linearly decreasing, ex: -285,-290,-295...but the fourth one jumps to -252. Yet, every other number is linearly increasing. Why is that and how could I fix that? To explain the numbers, it comes from slider value changed. I have a slider whose value is used to generate the float on the next line. Everything should be growing linearly here. This value is used to determine the size of a flow layout and it is also used in conjunction with a scrollbar. But basically I have a background for the flow layout and that number is the start location for rendering it. The numbers should linearly change to create a smooth transition but when that one jumps, it looks weird on screen and I dont understand why the numbers are jumping every X slider value changes. Mathematically what could be causing this? Here is the code for rendering the background and the function that is called when value changes: void LobbyTableManager::renderBG( GraphicsContext* g, agui::Rectangle& absRect, agui::Rectangle& childRect ) { float scale = 0.35f; int w = m_bgSprite->getWidth() * getTableScale() * scale; int h = m_bgSprite->getHeight() * getTableScale() * scale; int numX = ceil(absRect.getWidth() / (float)w) + 2; int numY = ceil(absRect.getHeight() / (float)h) + 2; int startY = childRect.getY(); int numAttempts = 0; while(startY + h < absRect.getY() && numAttempts < 1000) { startY += h; if(moo) { std::cout << startY << ","; } numAttempts++; } g->holdDrawing(); for(int i = 0; i < numX; ++i) { for(int j = 0; j < numY; ++j) { g->drawScaledSprite(m_bgSprite,0,0,m_bgSprite->getWidth(),m_bgSprite->getHeight(), absRect.getX() + (i * w) + (offsetX),absRect.getY() + (j * h) + startY,w,h,0); } } g->unholdDrawing(); g->setClippingRect(cx,cy,cw,ch); } void LobbyTableManager::setTableScale( float scale ) { scale += 0.3f; scale *= 2.0f; float scrollRel = m_vScroll->getRelativeValue(); setScale(scale); rescaleTables(); resizeFlow(); updateScrollBars(); float newVal = scrollRel * m_vScroll->getMaxValue(); m_vScroll->setValue(newVal); } void LobbyTableManager::valueChanged( agui::VScrollBar* source,int val ) { m_flow->setLocation(0,-val); } Any insight on mathematically why the anomaly might happen every Nth time would be helpful. I just dont understand why if every number linearly increates it jumps from -295 to -252! Thanks

    Read the article

  • Web Safe Area (optimal resolution) for web app design?

    - by M.A.X
    I'm in the process of designing a new web app and I'm wondering for what 'Web Safe Area' should I optimize the app layout and design. By Web Safe Area I mean the actual area available to display the website in the browser (which is influenced by monitor resolution as well as the space taken up by the browser and OS) I did some investigation and thinking on my own but wanted to share this to see what the general opinion is. Here is what I found: Optimal Display Resolution: w3schools web stats seems to be the most referenced source (however they state that these are results from their site and is biased towards tech savvy users) http://www.w3counter.com/globalstats.php (aggregate data from something like 15,000 different sites that use their tracking services) StatCounter Global Stats Display Resolution (Stats are based on aggregate data collected by StatCounter on a sample exceeding 15 billion pageviews per month collected from across the StatCounter network of more than 3 million websites) NetMarketShare Screen Resolutions (marketshare.hitslink.com) (a web analytics consulting firm, they get data from browsers of site visitors to their on-demand network of live stats customers. The data is compiled from approximately 160 million visitors per month) Display Resolution Summary: There is a bit of variation between the above sources but in general as of Jan 2011 looks like 1024x768 is about 20%, while ~85% have a higher resolution of at least 1280x768 (1280x800 is the most common of these with 15-20% of total web, depending on the source; 1280x1024 and 1366x768 follow behind with 9-14% of the share). My guess would be that the higher resolution values will be even more common if we filter on North America, and even higher if we filter on N.American corporate users (unfortunately I couldn't find any free geographically filtered statistics). Another point to note is that the 1024x768 desktop user population is likely lower than the aforementioned 20%, seeing as the iPad (1024x768 native display) is likely propping up those number (the app I'm designing is flash based, Apple mobile devices don't support flash so iPad support isn't a concern). My recommendation would be to optimize around the 1280x768 constraint (*note: 1280x768 is actually a relatively rare resolution, but I think it's a valid constraint range considering that 1366x768 is relatively common and 1280 is the most common horizontal resolution). Browser + OS Constraints: To further add to the constraints we have to subtract the space taken up by the browser (assuming IE, which is the most space consuming) and the OS (assuming WinXP-Win7): Win7 has the biggest taskbar footprint at a height of 40px (XP's and Vista's is 30px) The default IE8 view uses up 25px at the bottom of the screen with the status bar and a further 120px at the top of the screen with the windows title bar and the browser UI (assuming the default 'favorites' toolbar is present, it would instead be 91px without the favorites toolbar). Assuming no scrollbar, we also loose a total of 4px horizontally for the window outline. This means that we are left with 583px of vertical space and 1276px of horizontal. In other words, a Web Safe Area of 1276 x 583 Is this a correct line of thinking? I'm really surprised that I couldn't find this type of investigation anywhere on the web. Lots of websites talk about designing for 1024x768, but that's only half the equation! There is no mention of browser/OS influences on the actual area you have to display the site/app. Any help on this would be greatly appreciated! Thanks. EDIT Another caveat to my line of thinking above is that different browsers actually take up different amounts of pixels based on the OS they're running on. For example, under WinXP IE8 takes up 142px on top of the screen (instead the aforementioned 120px for Win7) because the file menu shows up by default on XP while in Win7 the file menu is hidden by default. So it looks like on WinXP + IE8 the Web Safe Area would be a mere 572px (768px-142-30-24=572)

    Read the article

  • Binding to the selected item in an ItemsControl

    - by Jensen
    I created a custom ComboBox as follows: (note, code is not correct but you should get the general idea.) The ComboBox contains 2 dependency properties which matter: TitleText and DescriptionText. <Grid> <TextBlock x:Name="Title"/> <Grid x:Name="CBG"> <ToggleButton/> <ContentPresenter/> <Popup/> </Grid> </Grid> I want to use this ComboBox to display a wide range of options. I created a class called Setting which inherits from DependencyObject to create usable items, I created a DataTemplate to bind the contents of this Settings object to my ComboBox and created a UserControl which contains an ItemControl which has as a template my previously mentioned DataTemplate. I can fill it with Setting objects. <DataTemplate x:Key="myDataTemplate"> <ComboBox TitleText="{Binding Title}" DescriptionText="{Binding DescriptionText}"/> </DataTemplate> <UserControl> <Grid> <StackPanel Grid.Column="0"> <ItemsControl Template="{StaticResource myDataTemplate}"> <Item> <Setting Title="Foo" Description="Bar"> <Option>Yes</Option><Option>No</Option> </Setting> </Item> </ItemsControl> </StackPanel> <StackPanel Grid.Column="1"> <TextBlock x:Name="Description"/> </StackPanel> </Grid> </UserControl> I would like to have the DescriptionText of the selected ComboBox (selected by either the IsFocus of the ComboBox control or the IsOpen property of the popup) to be placed in the Description TextBlock in my UserControl. One way I managed to achieve this was replacing my ItemsControl by a ListBox but this caused several issues: it always showed a scrollbar even though I disabled it, it wouldn't catch focus when my popup was open but only when I explicitly selected the item in my ListBox, when I enabled the OverridesDefaultStyle property the contents of the ListBox wouldn't show up at all, I had to re-theme the ListBox control to match my UserControl layout... What's the best and easiest way to get my DescriptionText to show up without using a ListBox or creating a custom Selector control (as that had the same effect as a ListBox)? The goal at the end is to loop through all the items (maybe get them into an ObservableCollection or some sort and to save them into my settings file.

    Read the article

  • WPF: TextBox expanding with surrounding Grid but not with text

    - by haagel
    I have a problem with a TextBox in an application... A window has a Grid with two columns. The left column contains a control with a constant width but with a height that adapts. The right column contains a TextBox that takes up all remaining space in the Grid (and thereby in the Window). The Grid is given a minimal width and height and is wrapped within a ScrollViewer. If the user resizes the window to be smaller than the minimal widht/height of the Grid, scrollbars are displayed. This is exactly how I want it to be. However, a problem occurs when the user starts typing text. If the text is to long to fit in one line in the TextBox, I want the text to wrap. Therefore I set TextWrapping="Wrap" on the TextBox. But since the TextBox has an automatic width and is wrapped in a ScrollViewer (its actually the whole Grid that is wrapped), the TextBox just keeps expanding to the right. I do want the TextBox to expand if the window is expanded, but I don't want the TextBox to expand by the text. Rather the text should wrap inside the available TextBox. If the text don't fit within the TextBox height, a scrollbar should be displayed within the TextBox. Is there a way to accomplish this? Below is some code that shows my problem. <Window x:Class="AdaptingTextBoxes.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="300" Width="400" Background="DarkCyan"> <Grid Margin="10" Name="LayoutRoot"> <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"> <Grid MinWidth="300" MinHeight="200"> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Button Grid.Column="0" Margin="0,0,10,0" Content="Button" Width="100" /> <TextBox Grid.Column="1" AcceptsReturn="True" TextWrapping="Wrap" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" /> </Grid> </ScrollViewer> </Grid> </Window>

    Read the article

  • WPF RowDetailsTemplate width issue

    - by Ed Courtenay
    Apologies if this is a dupe, but I can't seem to find a rational solution for what must be a fairly simple issue. <Window x:Class="FeedTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <XmlNamespaceMappingCollection x:Key="map"> <XmlNamespaceMapping Prefix="media" Uri="http://search.yahoo.com/mrss/" /> </XmlNamespaceMappingCollection> <XmlDataProvider x:Key="newsFeed" XPath="//item[string-length(title)>0]" Source="http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/uk/rss.xml" /> <DataTemplate x:Key="rowDetailTemplate"> <Border BorderThickness="2"> <StackPanel Orientation="Horizontal"> <Image Source="{Binding XPath=media:thumbnail/@url}" Width="66" Height="49" /> <StackPanel Orientation="Vertical" Margin="5"> <TextBlock Text="{Binding XPath=description}" TextWrapping="Wrap" /> </StackPanel> </StackPanel> </Border> </DataTemplate> <Style TargetType="{x:Type DataGrid}"> <Setter Property="GridLinesVisibility" Value="None" /> </Style> </Window.Resources> <Grid Binding.XmlNamespaceManager="{StaticResource map}"> <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Source={StaticResource newsFeed}}" RowDetailsVisibilityMode="VisibleWhenSelected" RowDetailsTemplate="{StaticResource rowDetailTemplate}"> <DataGrid.Columns> <DataGridTextColumn Header="Title" Binding="{Binding XPath=title}" MinWidth="150" Width="*" /> </DataGrid.Columns> </DataGrid> </Grid> The attached XAML gets a news feed, and displays the title of each item in a DataGrid. Selecting an item shows the RowDetailsTemplate which is where my problem lies - why does the RowDetailsTemplate expand beyond the width of the containing DataGrid (thus forcing a horizontal scrollbar), and more importantly, how do I stop it doing this? Many thanks.

    Read the article

  • Resizing QT's QTextEdit to Match Text Height: maximumViewportSize()

    - by Aaron
    I am trying to use a QTextEdit widget inside of a form containing several QT widgets. The form itself sits inside a QScrollArea that is the central widget for a window. My intent is that any necessary scrolling will take place in the main QScrollArea (rather than inside any widgets), and any widgets inside will automatically resize their height to hold their contents. I have tried to implement the automatic resizing of height with a QTextEdit, but have run into an odd issue. I created a sub-class of QTextEdit and reimplemented sizeHint() like this: QSize OperationEditor::sizeHint() const { QSize sizehint = QTextBrowser::sizeHint(); sizehint.setHeight(this->fitted_height); return sizehint; } this-fitted_height is kept up-to-date via this slot that is wired to the QTextEdit's "contentsChanged()" signal: void OperationEditor::fitHeightToDocument() { this->document()->setTextWidth(this->viewport()->width()); QSize document_size(this->document()->size().toSize()); this->fitted_height = document_size.height(); this->updateGeometry(); } The size policy of the QTextEdit sub-class is: this->setSizePolicy(QSizePolicy::MinimumExpanding, QSizePolicy::Preferred); I took this approach after reading this post. Here is my problem: As the QTextEdit gradually resizes to fill the window, it stops getting larger and starts scrolling within the QTextEdit, no matter what height is returned from sizeHint(). If I initially have sizeHint() return some large constant number, then the QTextEdit is very big and is contained nicely within the outer QScrollArea, as one would expect. However, if sizeHint gradually adjusts the size of the QTextEdit rather than just making it really big to start, then it tops out when it fills the current window and starts scrolling instead of growing. I have traced this problem to be that, no matter what my sizeHint() returns, it will never resize the QTextEdit larger than the value returned from maximumViewportSize(), which is inherited from QAbstractScrollArea. Note that this is not the same number as viewport()-maximumSize(). I am unable to figure out how to set that value. Looking at QT's source code, maximumViewportSize() is returning "the size of the viewport as if the scroll bars had no valid scrolling range." This value is basically computed as the current size of the widget minus (2 * frameWidth + margins) plus any scrollbar widths/heights. This does not make a lot of sense to me, and it's not clear to me why that number would be used anywhere in a way that supercede's the sub-class's sizeHint() implementation. Also, it does seem odd that the single "frameWidth" integer is used in computing both the width and the height. Can anyone please shed some light on this? I suspect that my poor understanding of QT's layout engine is to blame here.

    Read the article

  • Table header to stay fixed at the top when user scrolls it out of view with jQuery

    - by PeterBZ
    I am trying to design an HTML table where the header will stay at the top of the page when AND ONLY when the user scrolls it out of view. For example, the table may be 500 pixels down from the page, how do I make it so that if the user scrolls the header out of view (browser detects its no longer in the windows view somehow), it will stay put at the top? Anyone can give me a Javascript solution to this? <table> <thead> <tr> <th>Col1</th> <th>Col2</th> <th>Col3</th> </tr> </thead> <tbody> <tr> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td>info</td> </tr> </tbody> </table> So in the above example, I want the <thead> to scroll with the page if it goes out of view. IMPORTANT: I am NOT looking for a solution where the <tbody> will have a scrollbar (overflow:auto).

    Read the article

  • IE6 "frame" layout with 100% height and scrollbars

    - by Joe
    I want to achieve a simple "frame" layout with fixed header, fixed left navigation area, and a main content area that fills 100% of the remainder of the viewport with scrollbars if necessary. My best attempt is below - but when I add enough content to the main div to force scrolling, I see that the scrollbar extends below the bottom of the viewport. What am I doing wrong? Or what is IE6 doing wrong and how can I fix it? NB please don't recommend using a more recent browser - I'd love to but can't. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <style type="text/css"> html, body { height:100%; margin:0; padding:0; overflow:hidden; } div { border:0; margin:0; padding:0; } div#top { background-color:#dddddd; height:100px; } div#left { background-color:#dddddd; float:left; width:120px; height:100%; overflow:hidden; } div#main { height:100%; overflow:auto; } </style> </head> <body> <div id="top">Title</div> <div id="left">LeftNav</div> <div id="main"> Content <p> Lorem ipsum ... </p> ... repeated several times ... </div> </body> </html>

    Read the article

  • CSS: series of floated elements without wrapping but rather scrolling horizontally

    - by tybro0103
    I'm working on a album viewer. At the top I want a horizontal container of all the image thumbnails. Right now all the thumbnails are wrapped in a div with float:left. I'm trying to figure out how to keep these thumbnails from wrapping to the next line when there are too many, but rather stay all in one horizontal row and use the scrollbar. Here's my code: (I don't want to use tables) <style type="text/css"> div { overflow:hidden; } #frame { width:600px; padding:8px; border:1px solid black; } #thumbnails_container { height:75px; border:1px solid black; padding:4px; overflow-x:scroll; } .thumbnail { border:1px solid black; margin-right:4px; width:100px; height:75px; float:left; } .thumbnail img { width:100px; height:75px; } #current_image_container img { width:600px; } </style> <div id="frame"> <div id="thumbnails_container"> <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/glry-pixie-bob-kittens.jpg" alt="foo" /></div> <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-KitJan08-1.jpg" alt="foo" /></div> <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-KitJan08-3.jpg" alt="foo" /></div> <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-Jan08.jpg" alt="foo" /></div> <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/gallery3.jpg" alt="foo" /></div> <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/gallery4.jpg" alt="foo" /></div> <div class="thumbnail"><img src="http://www.blueridgexotics.com/Gallery-Pics/kitten3.jpg" alt="foo" /></div> <div class="thumbnail"><img src="http://www.blueridgexotics.com/Gallery-Pics/kitten1.jpg" alt="foo" /></div> </div> <div id="current_image_container"> <img src="http://www.whitetailrun.com/Pixiebobs/PBkittenpics/shani-kits/Cats0031a.jpg" alt="foo" /> </div> </div>

    Read the article

  • Mouse scroll not working in a scroll viewer with a wpf datagrid and additional UI elements

    - by paladugu457
    I am trying to figure out how to get the mouse scroll working on a wpf window with a scrollviewer and a datagrid within it. The WPF and C# code is below <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"> <Grid> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid Grid.Row="0"> <Border Name="DataGridBorder" BorderThickness="2" Margin="1" CornerRadius="4" BorderBrush="#FF080757"> <dg:DataGrid AutoGenerateColumns="False" Name="ValuesDataGrid" BorderThickness="0" CanUserResizeColumns="True" FontWeight="Bold" HorizontalScrollBarVisibility="Auto" CanUserReorderColumns="False" IsReadOnly="True" IsTextSearchEnabled="True" AlternationCount="2" SelectionMode="Extended" GridLinesVisibility="All" HeadersVisibility="Column" CanUserAddRows="False" CanUserDeleteRows="False" CanUserResizeRows="False" CanUserSortColumns="False" RowDetailsVisibilityMode="Collapsed" SelectedIndex="0" RowStyle="{StaticResource CognitiDataGridRowStyle}" > <dg:DataGrid.Columns> <dg:DataGridTemplateColumn Header="Title" > <dg:DataGridTemplateColumn.CellTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" > <TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding Path=Name}" FontWeight="Normal" /> </StackPanel> </DataTemplate> </dg:DataGridTemplateColumn.CellTemplate> </dg:DataGridTemplateColumn> </dg:DataGrid.Columns> </dg:DataGrid> </Border> </Grid> <Button Grid.Row="1" Height="90" >hello world</Button> </Grid> </ScrollViewer> and the C# code is as follows public partial class Window1 : Window { public Window1() { InitializeComponent(); initialize(); } public void initialize() { ObservableCollection<MyObject> testList = new ObservableCollection<MyObject>(); for (int i = 0; i < 20; i++) { MyObject my = new MyObject("jack " + i); testList.Add(my); } ValuesDataGrid.ItemsSource = testList; } } public class MyObject { public string Name { get; set; } public MyObject(string name) { Name = name; } } The problem i am facing is that when using the mouse to scroll, it works fine when it is over the button but as soon as i move the mouse pointer over the grid and try to scroll, nothing happens. I am able to move the scrollbar of the scrollviewer directly though. I am still a wpf novice so any help on how to get the mouse scroll to work over the datagrid would be appreciated. I am guessing there should be a pretty easy solution for this but I havent been able to figure it out

    Read the article

  • WPF Datagrid zoom issue

    - by David Osborn
    I'm working with the WPF DataGrid from the WPFToolkit and I'm having issues with trying to zoom the entire datagrid. My initial thought was that it was going to be really easy and I would just apply a scale transform to the grid and animate the ScaleX, ScaleY properties when the used clicked a button. This did not work however because the scrollbar was zoomed in making it larger. I need fixed headers and fixed columns on the datagrid so I can't simple use a scrollviewer outside of the datagrid to handle the scrolling. The second thing I tried was to just scale the font size in the grid, but this failed because on shrinking the font size the columns stay at the original width and do not shrink. Finally I thought I had it working by using the below code which goes into the view tree for the datagrid and adds a scale transform to the Scroll Content Presenter. (Also not shown in this code, I apply a transform to the visual tree item for the headers in the same manner so that it scales as well). I thought this was working great until I tested out the horizontal scrolling after zooming. (Vertical scrolling works perfectly.) Before zooming at all the horizontal scrolling is fine, but after zooming, when I scroll horzonitally the display freaks out. It is hard to tell exactly what it is doing, but it sort of looks like the content that is scrolling off the left of the screen is "folding over" and coming back in on the left. Maybe it is just all smashing up on the left side. Does anyone have any ideas how I can get this working, hopefully without throwing out my whole datagrid that is already working quite well otherwise. ScrollContentPresenter sp = (ScrollContentPresenter) VisualTreeHelper.GetChild( VisualTreeHelper.GetChild( VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(dgMatrix, 0), 0), 0),2); ScaleTransform st = new ScaleTransform(1, 1); sp.LayoutTransform = st; DoubleAnimation a = new DoubleAnimation(); a.By = 1.5; a.AutoReverse = false; a.Duration = new Duration(TimeSpan.Parse("0:0:0.25")); st.BeginAnimation(ScaleTransform.ScaleXProperty, a); st.BeginAnimation(ScaleTransform.ScaleYProperty, a);

    Read the article

< Previous Page | 16 17 18 19 20 21 22  | Next Page >