Search Results

Search found 1557 results on 63 pages for 'horizontal'.

Page 15/63 | < Previous Page | 11 12 13 14 15 16 17 18 19 20 21 22  | Next Page >

  • Certain grid lines not rendering as expected

    - by row1
    I am drawing a simple quad (a triangle strip with 4 vertices) as the floor and then drawing an 8x8 grid over top (a collection of vertex pairs for a line list). The vertical grid lines work fine (apart from being very aliased), but some of the horizontal lines do not get rendered. The grid renders fine if I do not draw the quad. foreach (EffectPass pass in _Effect.CurrentTechnique.Passes) { pass.Apply(); CurrentGraphicsDevice.SetVertexBuffer(_VertexFloorBuffer); _Engine.CurrentGraphicsDevice.DrawPrimitives(PrimitiveType.TriangleStrip, 0, 2); //Some of the horizontal lines seems to disappear if we draw the above quad. CurrentGraphicsDevice.SetVertexBuffer(_VertexGridBuffer); CurrentGraphicsDevice.DrawPrimitives(PrimitiveType.LineList, 0, _VertexGridBuffer.VertexCount / 2); } What could be causing these lines to not be rendered? Update: I added the below code after I draw my quad and grid and it started working. But I am not sure why that works as I thought this code was to draw the WPF controls elementRenderer.Render(); spriteBatch.Begin(); spriteBatch.Draw(elementRenderer.Texture, Vector2.Zero, Color.White); spriteBatch.End();

    Read the article

  • Mobile Friendly Websites with CSS Media Queries

    - by dwahlin
    In a previous post the concept of CSS media queries was introduced and I discussed the fundamentals of how they can be used to target different screen sizes. I showed how they could be used to convert a 3-column wide page into a more vertical view of data that displays better on devices such as an iPhone:     In this post I'll provide an additional look at how CSS media queries can be used to mobile-enable a sample site called "Widget Masters" without having to change any server-side code or HTML code. The site that will be discussed is shown next:     This site has some of the standard items shown in most websites today including a title area, menu bar, and sections where data is displayed. Without including CSS media queries the site is readable but has to be zoomed out to see everything on a mobile device, cuts-off some of the menu items, and requires horizontal scrolling to get to additional content. The following image shows what the site looks like on an iPhone. While the site works on mobile devices it's definitely not optimized for mobile.     Let's take a look at how CSS media queries can be used to override existing styles in the site based on different screen widths. Adding CSS Media Queries into a Site The Widget Masters Website relies on standard CSS combined with HTML5 elements to provide the layout shown earlier. For example, to layout the menu bar shown at the top of the page the nav element is used as shown next. A standard div element could certainly be used as well if desired.   <nav> <ul class="clearfix"> <li><a href="#home">Home</a></li> <li><a href="#products">Products</a></li> <li><a href="#aboutus">About Us</a></li> <li><a href="#contactus">Contact Us</a></li> <li><a href="#store">Store</a></li> </ul> </nav>   This HTML is combined with the CSS shown next to add a CSS3 gradient, handle the horizontal orientation, and add some general hover effects.   nav { width: 100%; } nav ul { border-radius: 6px; height: 40px; width: 100%; margin: 0; padding: 0; background: rgb(125,126,125); /* Old browsers */ background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */ } nav ul > li { list-style: none; float: left; margin: 0; padding: 0; } nav ul > li:first-child { margin-left: 8px; } nav ul > li > a { color: #ccc; text-decoration: none; line-height: 2.8em; font-size: 0.95em; font-weight: bold; padding: 8px 25px 7px 25px; font-family: Arial, Helvetica, sans-serif; } nav ul > li a:hover { background-color: rgba(0, 0, 0, 0.1); color: #fff; }   When mobile devices hit the site the layout of the menu items needs to be adjusted so that they're all visible without having to swipe left or right to get to them. This type of modification can be accomplished using CSS media queries by targeting specific screen sizes. To start, a media query can be added into the site's CSS file as shown next: @media screen and (max-width:320px) { /* CSS style overrides for this screen width go here */ } This media query targets screens that have a maximum width of 320 pixels. Additional types of queries can also be added – refer to my previous post for more details as well as resources that can be used to test media queries in different devices. In that post I emphasize (and I'll emphasize again) that CSS media queries only modify the overall layout and look and feel of a site. They don't optimize the site as far as the size of the images or content sent to the device which is important to keep in mind. To make the navigation menu more accessible on devices such as an iPhone or Android the CSS shown next can be used. This code changes the height of the menu from 40 pixels to 100%, takes off the li element floats, changes the line-height, and changes the margins.   @media screen and (max-width:320px) { nav ul { height: 100%; } nav ul > li { float: none; } nav ul > li a { line-height: 1.5em; } nav ul > li:first-child { margin-left: 0px; } /* Additional CSS overrides go here */ }   The following image shows an example of what the menu look like when run on a device with a width of 320 pixels:   Mobile devices with a maximum width of 480 pixels need different CSS styles applied since they have 160 additional pixels of width. This can be done by adding a new CSS media query into the stylesheet as shown next. Looking through the CSS you'll see that only a minimal override is added to adjust the padding of anchor tags since the menu fits by default in this screen width.   @media screen and (max-width: 480px) { nav ul > li > a { padding: 8px 10px 7px 10px; } }   Running the site on a device with 480 pixels results in the menu shown next being rendered. Notice that the space between the menu items is much smaller compared to what was shown when the main site loads in a standard browser.     In addition to modifying the menu, the 3 horizontal content sections shown earlier can be changed from a horizontal layout to a vertical layout so that they look good on a variety of smaller mobile devices and are easier to navigate by end users. The HTML5 article and section elements are used as containers for the 3 sections in the site as shown next:   <article class="clearfix"> <section id="info"> <header>Why Choose Us?</header> <br /> <img id="mainImage" src="Images/ArticleImage.png" title="Article Image" /> <p> Post emensos insuperabilis expeditionis eventus languentibus partium animis, quas periculorum varietas fregerat et laborum, nondum tubarum cessante clangore vel milite locato per stationes hibernas. </p> </section> <section id="products"> <header>Products</header> <br /> <img id="gearsImage" src="Images/Gears.png" title="Article Image" /> <p> <ul> <li>Widget 1</li> <li>Widget 2</li> <li>Widget 3</li> <li>Widget 4</li> <li>Widget 5</li> </ul> </p> </section> <section id="FAQ"> <header>FAQ</header> <br /> <img id="faqImage" src="Images/faq.png" title="Article Image" /> <p> <ul> <li>FAQ 1</li> <li>FAQ 2</li> <li>FAQ 3</li> <li>FAQ 4</li> <li>FAQ 5</li> </ul> </p> </section> </article>   To force the sections into a vertical layout for smaller mobile devices the CSS styles shown next can be added into the media queries targeting 320 pixel and 480 pixel widths. Styles to target the display size of the images in each section are also included. It's important to note that the original image is still being downloaded from the server and isn't being optimized in any way for the mobile device. It's certainly possible for the CSS to include URL information for a mobile-optimized image if desired. @media screen and (max-width:320px) { section { float: none; width: 97%; margin: 0px; padding: 5px; } #wrapper { padding: 5px; width: 96%; } #mainImage, #gearsImage, #faqImage { width: 100%; height: 100px; } } @media screen and (max-width: 480px) { section { float: none; width: 98%; margin: 0px 0px 10px 0px; padding: 5px; } article > section:last-child { margin-right: 0px; float: none; } #bottomSection { width: 99%; } #wrapper { padding: 5px; width: 96%; } #mainImage, #gearsImage, #faqImage { width: 100%; height: 100px; } }   The following images show the site rendered on an iPhone with the CSS media queries in place. Each of the sections now displays vertically making it much easier for the user to access them. Images inside of each section also scale appropriately to fit properly.     CSS media queries provide a great way to override default styles in a website and target devices with different resolutions. In this post you've seen how CSS media queries can be used to convert a standard browser-based site into a site that is more accessible to mobile users. Although much more can be done to optimize sites for mobile, CSS media queries provide a nice starting point if you don't have the time or resources to create mobile-specific versions of sites.

    Read the article

  • Metro: Understanding CSS Media Queries

    - by Stephen.Walther
    If you are building a Metro style application then your application needs to look great when used on a wide variety of devices. Your application needs to work on tiny little phones, slates, desktop monitors, and the super high resolution displays of the future. Your application also must support portable devices used with different orientations. If someone tilts their phone from portrait to landscape mode then your application must still be usable. Finally, your Metro style application must look great in different states. For example, your Metro application can be in a “snapped state” when it is shrunk so it can share screen real estate with another application. In this blog post, you learn how to use Cascading Style Sheet media queries to support different devices, different device orientations, and different application states. First, you are provided with an overview of the W3C Media Query recommendation and you learn how to detect standard media features. Next, you learn about the Microsoft extensions to media queries which are supported in Metro style applications. For example, you learn how to use the –ms-view-state feature to detect whether an application is in a “snapped state” or “fill state”. Finally, you learn how to programmatically detect the features of a device and the state of an application. You learn how to use the msMatchMedia() method to execute a media query with JavaScript. Using CSS Media Queries Media queries enable you to apply different styles depending on the features of a device. Media queries are not only supported by Metro style applications, most modern web browsers now support media queries including Google Chrome 4+, Mozilla Firefox 3.5+, Apple Safari 4+, and Microsoft Internet Explorer 9+. Loading Different Style Sheets with Media Queries Imagine, for example, that you want to display different content depending on the horizontal resolution of a device. In that case, you can load different style sheets optimized for different sized devices. Consider the following HTML page: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>U.S. Robotics and Mechanical Men</title> <link href="main.css" rel="stylesheet" type="text/css" /> <!-- Less than 1100px --> <link href="medium.css" rel="stylesheet" type="text/css" media="(max-width:1100px)" /> <!-- Less than 800px --> <link href="small.css" rel="stylesheet" type="text/css" media="(max-width:800px)" /> </head> <body> <div id="header"> <h1>U.S. Robotics and Mechanical Men</h1> </div> <!-- Advertisement Column --> <div id="leftColumn"> <img src="advertisement1.gif" alt="advertisement" /> <img src="advertisement2.jpg" alt="advertisement" /> </div> <!-- Product Search Form --> <div id="mainContentColumn"> <label>Search Products</label> <input id="search" /><button>Search</button> </div> <!-- Deal of the Day Column --> <div id="rightColumn"> <h1>Deal of the Day!</h1> <p> Buy two cameras and get a third camera for free! Offer is good for today only. </p> </div> </body> </html> The HTML page above contains three columns: a leftColumn, mainContentColumn, and rightColumn. When the page is displayed on a low resolution device, such as a phone, only the mainContentColumn appears: When the page is displayed in a medium resolution device, such as a slate, both the leftColumn and the mainContentColumns are displayed: Finally, when the page is displayed in a high-resolution device, such as a computer monitor, all three columns are displayed: Different content is displayed with the help of media queries. The page above contains three style sheet links. Two of the style links include a media attribute: <link href="main.css" rel="stylesheet" type="text/css" /> <!-- Less than 1100px --> <link href="medium.css" rel="stylesheet" type="text/css" media="(max-width:1100px)" /> <!-- Less than 800px --> <link href="small.css" rel="stylesheet" type="text/css" media="(max-width:800px)" /> The main.css style sheet contains default styles for the elements in the page. The medium.css style sheet is applied when the page width is less than 1100px. This style sheet hides the rightColumn and changes the page background color to lime: html { background-color: lime; } #rightColumn { display:none; } Finally, the small.css style sheet is loaded when the page width is less than 800px. This style sheet hides the leftColumn and changes the page background color to red: html { background-color: red; } #leftColumn { display:none; } The different style sheets are applied as you stretch and contract your browser window. You don’t need to refresh the page after changing the size of the page for a media query to be applied: Using the @media Rule You don’t need to divide your styles into separate files to take advantage of media queries. You can group styles by using the @media rule. For example, the following HTML page contains one set of styles which are applied when a device’s orientation is portrait and another set of styles when a device’s orientation is landscape: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Application1</title> <style type="text/css"> html { font-family:'Segoe UI Semilight'; font-size: xx-large; } @media screen and (orientation:landscape) { html { background-color: lime; } p.content { width: 50%; margin: auto; } } @media screen and (orientation:portrait) { html { background-color: red; } p.content { width: 90%; margin: auto; } } </style> </head> <body> <p class="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. </p> </body> </html> When a device has a landscape orientation then the background color is set to the color lime and the text only takes up 50% of the available horizontal space: When the device has a portrait orientation then the background color is red and the text takes up 90% of the available horizontal space: Using Standard CSS Media Features The official list of standard media features is contained in the W3C CSS Media Query recommendation located here: http://www.w3.org/TR/css3-mediaqueries/ Here is the official list of the 13 media features described in the standard: · width – The current width of the viewport · height – The current height of the viewport · device-width – The width of the device · device-height – The height of the device · orientation – The value portrait or landscape · aspect-ratio – The ratio of width to height · device-aspect-ratio – The ratio of device width to device height · color – The number of bits per color supported by the device · color-index – The number of colors in the color lookup table of the device · monochrome – The number of bits in the monochrome frame buffer · resolution – The density of the pixels supported by the device · scan – The values progressive or interlace (used for TVs) · grid – The values 0 or 1 which indicate whether the device supports a grid or a bitmap Many of the media features in the list above support the min- and max- prefix. For example, you can test for the min-width using a query like this: (min-width:800px) You can use the logical and operator with media queries when you need to check whether a device supports more than one feature. For example, the following query returns true only when the width of the device is between 800 and 1,200 pixels: (min-width:800px) and (max-width:1200px) Finally, you can use the different media types – all, braille, embossed, handheld, print, projection, screen, speech, tty, tv — with a media query. For example, the following media query only applies to a page when a page is being printed in color: print and (color) If you don’t specify a media type then media type all is assumed. Using Metro Style Media Features Microsoft has extended the standard list of media features which you can include in a media query with two custom media features: · -ms-high-contrast – The values any, black-white, white-black · -ms-view-state – The values full-screen, fill, snapped, device-portrait You can take advantage of the –ms-high-contrast media feature to make your web application more accessible to individuals with disabilities. In high contrast mode, you should make your application easier to use for individuals with vision disabilities. The –ms-view-state media feature enables you to detect the state of an application. For example, when an application is snapped, the application only occupies part of the available screen real estate. The snapped application appears on the left or right side of the screen and the rest of the screen real estate is dominated by the fill application (Metro style applications can only be snapped on devices with a horizontal resolution of greater than 1,366 pixels). Here is a page which contains style rules for an application in both a snap and fill application state: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>MyWinWebApp</title> <style type="text/css"> html { font-family:'Segoe UI Semilight'; font-size: xx-large; } @media screen and (-ms-view-state:snapped) { html { background-color: lime; } } @media screen and (-ms-view-state:fill) { html { background-color: red; } } </style> </head> <body> <p class="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. </p> </body> </html> When the application is snapped, the application appears with a lime background color: When the application state is fill then the background color changes to red: When the application takes up the entire screen real estate – it is not in snapped or fill state – then no special style rules apply and the application appears with a white background color. Querying Media Features with JavaScript You can perform media queries using JavaScript by taking advantage of the window.msMatchMedia() method. This method returns a MSMediaQueryList which has a matches method that represents success or failure. For example, the following code checks whether the current device is in portrait mode: if (window.msMatchMedia("(orientation:portrait)").matches) { console.log("portrait"); } else { console.log("landscape"); } If the matches property returns true, then the device is in portrait mode and the message “portrait” is written to the Visual Studio JavaScript Console window. Otherwise, the message “landscape” is written to the JavaScript Console window. You can create an event listener which triggers code whenever the results of a media query changes. For example, the following code writes a message to the JavaScript Console whenever the current device is switched into or out of Portrait mode: window.msMatchMedia("(orientation:portrait)").addListener(function (mql) { if (mql.matches) { console.log("Switched to portrait"); } }); Be aware that the event listener is triggered whenever the result of the media query changes. So the event listener is triggered both when you switch from landscape to portrait and when you switch from portrait to landscape. For this reason, you need to verify that the matches property has the value true before writing the message. Summary The goal of this blog entry was to explain how CSS media queries work in the context of a Metro style application written with JavaScript. First, you were provided with an overview of the W3C CSS Media Query recommendation. You learned about the standard media features which you can query such as width and orientation. Next, we focused on the Microsoft extensions to media queries. You learned how to use –ms-view-state to detect whether a Metro style application is in “snapped” or “fill” state. You also learned how to use the msMatchMedia() method to perform a media query from JavaScript.

    Read the article

  • Android ListView delete row button - focus issue

    - by Max Gontar
    Hi! I have an activity with ListView and buttons below: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <ListView android:id="@+id/lvLamps" android:layout_width="fill_parent" android:layout_height="fill_parent" android:listSelector="@null" android:choiceMode="none" android:scrollbarStyle="insideInset" android:layout_weight="1.0" /> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_weight="0.0"> <Button android:id="@+id/btnAdd" android:background="@null" android:drawableLeft="@drawable/btn_upgrade" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableRight="@drawable/lbl_upgrade" android:textSize="0pt" android:text="" android:layout_alignParentLeft="true" android:padding="20px" /> <Button android:id="@+id/btnNext" android:background="@null" android:drawableRight="@drawable/next_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableLeft="@drawable/lbl_next" android:textSize="0pt" android:text="" android:layout_alignParentRight="true" android:padding="20px" android:visibility="gone" /> <ImageButton android:id="@+id/btnListExit" android:background="@null" android:src="@drawable/btn_x" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:padding="20px" /> </RelativeLayout> </LinearLayout> ListView row contains delete button: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:focusable="true"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:focusable="true"> <ImageButton android:id="@+id/btnRowDelete" android:src="@drawable/btn_x" android:background="@null" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:padding="4px" android:focusable="true" android:focusableInTouchMode="true"/> <TextView android:id="@+id/txtLampRowFrom" android:text="123" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="6pt" android:layout_toRightOf="@id/btnRowDelete" android:focusable="false" android:textColor="@color/textColor"/> <TextView android:id="@+id/txtLampRowTo" android:text="123" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="6pt" android:layout_toRightOf="@id/btnRowDelete" android:layout_alignParentBottom="true" android:focusable="false" android:textColor="@color/textColor"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/arrow_upgrade_to" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:focusable="false"/> </RelativeLayout> </LinearLayout> In Adapter, Button onClickListener is set, also there are dummies to make list non-selectable: // disabling list items select public boolean areAllItemsEnabled() { return false; } public boolean isEnabled(int position) { return false; } What I want is: always show buttons in the bottom of screen after list (no matter how long it is, there should be scroll if it's too long) ListView should not be selectable, I don't want row selection row delete button should be selectable (focusable) with touch and with trackball And everything works except I can't focus row delete button with trackball (although it's working with touch). Can you help me? Thanks!

    Read the article

  • android: tablerow mixed with columns and multiline text

    - by Yang
    I am trying to have a tablelayout contains several tablerows. One of the rows contains 4 buttons, while the second row contains a very long text. However, the width of the button stretches with the text in the second row. Is there anyway to prevent this? http://img684.imageshack.us/i/tableview1.jpg/ http://img521.imageshack.us/i/tableview2.jpg/ Here is my xml file: (somehow this website is not friendly to xml file) AbsoluteLayout android:id="@+id/widget0" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" TableLayout android:id="@+id/widget28" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_x="0px" android:layout_y="10px" TableRow android:id="@+id/widget29" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" Button android:id="@+id/widget30" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" Button android:id="@+id/widget31" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" Button android:id="@+id/widget32" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" Button android:id="@+id/widget33" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" TableRow android:id="@+id/widget35" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" TextView android:id="@+id/widget40" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextViewTextViewTextViewTextViewTextViewTextView"

    Read the article

  • Android TableRow RelativeLayout Issue

    - by phogel
    I have the following <TableRow xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/admin_row" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_horizontal"> <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" android:background="@color/silver"> I dynamically populate the table but with the relative layout colored silver it only spans about 3/4 of the table row. If I put a LinearLayout with horizontal orientation it spans completely but if I change it to vertical the same problem occurs. I need a relative layout in the table row because I need to something like this: Value Detail MoreDetail. Any ideas on getting the relative layout to span the table row?

    Read the article

  • Winform problem with autoscrolling of the ScrollableControl

    - by BobLim
    Hi guys, I have a problem with autoscrolling of the .NET ScrollableControl. I am using TabPage which inherited from ScrollableControl in the class hierarachy. Every TabPage object has only 1 UserControl derived control which draws the landscape; there is no other control on the tabpage. The usage of my application is its user will drag a file from windows explorer and drop into the TabPage. As more files are dragged and dropped, the UserControl derived control will expand to accomodate the drawing of the files and auto-scrolling will be enabled. The problem I have is when I mouse-click on the UserControl control, the vertical and horizontal scrollbars will scroll back to (0,0) position. I want the vertical and horizontal scrollbars to remain at their original scrolled position whatever happens. I believe when I mouse-click on the UserControl control, the UserControl control comes into focus and that triggers the auto-scrolling to (0,0) position. Please help. Thanks in advance!

    Read the article

  • How do I apply multiple rotation transforms on a Raphael text object?

    - by Pridkett
    I have a Raphael text object that I would like to rotate around an axis some distance away and also rotate the text accordingly so it stays horizontal. I know this is possible using SVG transformation matrices, but the author of Raphael has stated that they won't be a part of the toolkit anytime soon. Here's some code of what I'd like to do: txt_obj = paper.text(100, 0, "Hello!"); txt_obj.rotate(90, 100, 100); // rotate text so it is sideways at (200,100) txt_obj.rotate(-90); // rotate text back to horizontal Unfortunately, the second rotate command obliterates the translation and rotation accomplished by the first. Ideally I'd like to animate the operation, but I'll take it one step at a time for right now.

    Read the article

  • Android ListView delete row button - focus issue

    - by Max Gontar
    I have an activity with ListView and buttons below: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <ListView android:id="@+id/lvLamps" android:layout_width="fill_parent" android:layout_height="fill_parent" android:listSelector="@null" android:choiceMode="none" android:scrollbarStyle="insideInset" android:layout_weight="1.0" /> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_weight="0.0"> <Button android:id="@+id/btnAdd" android:background="@null" android:drawableLeft="@drawable/btn_upgrade" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableRight="@drawable/lbl_upgrade" android:textSize="0pt" android:text="" android:layout_alignParentLeft="true" android:padding="20px" /> <Button android:id="@+id/btnNext" android:background="@null" android:drawableRight="@drawable/next_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableLeft="@drawable/lbl_next" android:textSize="0pt" android:text="" android:layout_alignParentRight="true" android:padding="20px" android:visibility="gone" /> <ImageButton android:id="@+id/btnListExit" android:background="@null" android:src="@drawable/btn_x" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:padding="20px" /> </RelativeLayout> </LinearLayout> ListView row contains delete button: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:focusable="true"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:focusable="true"> <ImageButton android:id="@+id/btnRowDelete" android:src="@drawable/btn_x" android:background="@null" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:padding="4px" android:focusable="true" android:focusableInTouchMode="true"/> <TextView android:id="@+id/txtLampRowFrom" android:text="123" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="6pt" android:layout_toRightOf="@id/btnRowDelete" android:focusable="false" android:textColor="@color/textColor"/> <TextView android:id="@+id/txtLampRowTo" android:text="123" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="6pt" android:layout_toRightOf="@id/btnRowDelete" android:layout_alignParentBottom="true" android:focusable="false" android:textColor="@color/textColor"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/arrow_upgrade_to" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:focusable="false"/> </RelativeLayout> </LinearLayout> In Adapter, Button onClickListener is set, also there are dummies to make list non-selectable: // disabling list items select public boolean areAllItemsEnabled() { return false; } public boolean isEnabled(int position) { return false; } What I want is: always show buttons in the bottom of screen after list (no matter how long it is, there should be scroll if it's too long) ListView should not be selectable, I don't want row selection row delete button should be selectable (focusable) with touch and with trackball And everything works except I can't focus row delete button with trackball (although it's working with touch). Can you help me? Thanks!

    Read the article

  • Can't cast treeviewitem as treeviewitem in wpf

    - by phenevo
    Hi, I've got webservice asmx, and there are classes: Country public string Name {get;set;} public string Code {get;set;} public List<Area> Areas {get;set;} Area public string Name {get;set;} public string Code {get;set;} public List<Regions> Provinces {get;set;} Provinces public string Name {get;set;} public string Code {get;set;} I bind it to mz TreeView WPF: Country[] items = new MyService().GetListOfCountries(); structureTree.ItemsSource = items; Code of myTree: <UserControl x:Class="ObjectsAndZonesSimpleTree" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" <Grid> <StackPanel Name="stackPanel1"> <GroupBox Header="Choose" Height="354" Name="groupBox1" Width="Auto"> <TreeView Name="structureTree" SelectedItemChanged="structureTree_SelectedItemChanged" Grid.Row="0" Grid.Column="0" ItemsSource="{Binding}" Height="334" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Visible" Width="Auto" PreviewMouseRightButtonUp="structureTree_PreviewMouseRightButtonUp" FontFamily="Verdana" FontSize="12" BorderThickness="1" MinHeight="0" Padding="1" Cursor="Hand" Margin="-1"> <TreeView.Resources> <HierarchicalDataTemplate DataType="{x:Type MyService:Country}" ItemsSource="{Binding Path=ListOfRegions}"> <StackPanel Orientation="Horizontal"> <TextBlock TextAlignment="Justify" VerticalAlignment="Center" Text="{Binding Path=Name}"/> </StackPanel> </HierarchicalDataTemplate> <HierarchicalDataTemplate DataType="{x:Type MyService:Region}" ItemsSource="{Binding Path=Provinces}"> <StackPanel Orientation="Horizontal"> <TextBlock TextAlignment="Justify" VerticalAlignment="Center" Text="{Binding Path=Name}"/> </StackPanel> </HierarchicalDataTemplate> <DataTemplate DataType="{x:Type MyService:Province}" ItemsSource="{Binding Path=ListOfCities}"> <StackPanel Orientation="Horizontal"> <TextBlock TextAlignment="Justify" VerticalAlignment="Center" Text="{Binding Path=Name}"/> </StackPanel> </DataTemplate> </TreeView.Resources> </TreeView> </GroupBox> </StackPanel> </Grid> </UserControl> This gives me null: private void structureTree_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e) { TreeViewItem treeViewItem = structureTree.SelectedItem as TreeViewItem; }

    Read the article

  • Intercept UITableView scroll touches

    - by Jonesy
    Is it possible to control when the UITableView scrolls in my own code. I am trying to get behaviour where a vertical swipe scrolls and a horizontal swipe gets passed through to my code (of which there are many example) BUT I want a DIAGONAL swipe to do nothing, i.e the UITableView should not even begin scrolling. I tried catching it in here - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView but the scrollView.contentOffset.x is always 0 so I cannot detect a horizontal movement. I also tried subclassing UITableView and implementing - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event etc.. but the UITableView (and I guess it's parent UIScrollView) start to scroll before the touches are notified? To re-iterate, I want the UITableView scrolling to be locked if a diagonal swipe is made, but to scroll vertically normally. (This behaviour can be seen in Tweetie(Twitter) for the iPhone) Thanks for any help!

    Read the article

  • Drop on NSTableView Behavior

    - by dave-gennel
    Hi, I have an NSTableView and I have successfully implemented both tableView:validateDrop:proposedRow:proposedDropOperation: and tableView:acceptDrop:row:dropOperation:. I don't need tableView:writeRowsWithIndexes:toPasteboard: because that's for dragging objects out of the NSTableView. Now, the problem is that I want it to behave kind of iTunes-like. In iTunes 9.x (I don't remember it for the previous versions) you have an NSTableView (the playlist) and when you drag a file over it you get this blue focus inside the NSTableView (maybe it's the NSScrollView?) and you don't have the blue horizontal line that indicates where you're going to insert an object. So basically I would like: No blue horizontal insert line between rows when hovering a file over the NSTableView. The blue focus inside the NSTableView (or NSScrollView). Any help would be greatly appreciated so thank you in advance.

    Read the article

  • Determine the width of the vertical scroll bar in a ScrollViewer

    - by juharr
    I'm using a ScrollViewer to display an Image. The Image has a ScaleTransform set as one of it's LayoutTransforms. I've got it setup to fit the width of the image into the ActualSize of the ScrollViewer. My problem is that if the image height requires the vertical scrollbar to be present (I have it set to Auto) then my image is scaled just a little bit to much. I know how to determine if the scrollbar would be present and how to get the correct scale, but I cannot figure out how to determine what the actual width of the scrollbar is. I guess I could just guess at it, but I'd like something that would work if I later add styles to my application that would result in the scrollbars being a different size. Additionally I'm also doing Fit to Height and would need to get the Height of the horizontal scrollbar when it would be visible (I'm assuming that the answer to getting the width of the vertical scrollbar would make getting the height of the horizontal scrollbar obvious).

    Read the article

  • Javascript execution order

    - by zaf
    I want to give a static javascript block of code to a html template designer, which can be: either inline or external or both used once or more in the html template and each block can determine its position in the template relative to the other javascript code blocks. An example could be image banners served using javascript. I give code to template designer who places it in two places, once for a horizontal banner in the header and once for a vertical banner. The same code runs in both blocks but knowing their positions can determine if to serve a horizontal or a vertical image banner. Make sense?

    Read the article

  • Simple way to implement computer-go board in Java

    - by codingbear
    I want to make a simple Go board to design an Computer Go game. In a go game, you lie a "stone" (white or black) on a position where horizontal and vertical lines intersect. What are some simple ways to restrict users from placing their stones in other locations? Maybe I'm just not seeing a simple solution. EDIT I guess I should rephrase my question better: I want to know how to do the background image of Go board, so that I can lie my stones on the intersection of the horizontal and the vertical lines. I was thinking about getting a just regular Go board image, and when I'm actually rendering stones, I find right position of pixels to lie stones. However, that solution did not seem to be the best solution, since I need to worry about size of stone images and think about proportionality when I either expand or shrink the board window.

    Read the article

  • flex chart grid lines dotted

    - by Jonny
    Using the LineChart component of Flex: How do I make the horizontal grid lines (background within the chart) dotted? With the mx:Stroke within the mx:horizontalStroke, I can only set properties like weight, color and alpha. I'd like to make the line dotted... This is what I have now: <mx:LineChart id="linechartDays" width="100%" height="100%" dataProvider="{dayData}" showDataTips="true"> <mx:backgroundElements> <mx:GridLines horizontalChangeCount="1" direction="horizontal"> <mx:horizontalStroke> <mx:Stroke weight="1" color="0xcccccc"/> </mx:horizontalStroke> </mx:GridLines> </mx:backgroundElements> </mx:LineChart>

    Read the article

  • Scrolling with CSS

    - by Jordan Trulen
    I have 4 tables that need to scroll, they are set up as follows: Table1(static) Table2(Horizontal Scrolling) Table3(Vertical Scrolling) Table4(Horizontal and Vertical Scrolling) Table1 Table2 Table3 Table4 The tricky part of this is that Table 3 and 4 need to keep in sync as this is a listing of data broken out into two tables. Table 2 and 4 are in the same situation. Any ideas? No Javascript please as we have a script that works, but it is far too slow to work. Thanks.

    Read the article

  • Modelling a checkable treeview in the MVVM model

    - by Stephen Stranded
    Hi, I am trying to create a checkable treeview control to list hierarchical data but it does not seem to work. I used the MVVM model example used by in codeplex simplified Treeview using ViewModel but it shows nothing. Here is my code. Please help. I am a newbie to WPF and the MVVM model but i very much want to use it in an urgent application. </UserControl.Resources> <Grid> <StackPanel Height="166"> <TextBlock Text="Please Display this" /> <TreeView ItemsSource="{Binding Classifications}" Height="141"> <TreeView.ItemContainerStyle> <!-- This Style binds a TreeViewItem to a TreeViewItemViewModel. --> <Style TargetType="{x:Type TreeViewItem}"> <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" /> <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" /> <Setter Property="FontWeight" Value="Normal" /> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="FontWeight" Value="Bold" /> </Trigger> </Style.Triggers> </Style> </TreeView.ItemContainerStyle> <TreeView.Resources> <HierarchicalDataTemplate DataType="{x:Type local:PropertyTypeViewModel}" ItemsSource="{Binding Children}"> <StackPanel Orientation="Horizontal"> <CheckBox Focusable="false" IsChecked="{Binding isSelected}"></CheckBox> <TextBlock Text="{Binding Classification}" /> </StackPanel> </HierarchicalDataTemplate> <HierarchicalDataTemplate DataType="{x:Type local:PropertyViewModel}" ItemsSource="{Binding Children}" > <StackPanel Orientation="Horizontal"> <CheckBox Focusable="false" IsChecked="{Binding isSelected}"></CheckBox> <TextBlock Text="{Binding PropertyName}" /> </StackPanel> </HierarchicalDataTemplate> <DataTemplate DataType="{x:Type local:LeaseViewModel}"> <StackPanel Orientation="Horizontal"> <CheckBox Focusable="false" IsChecked="{Binding isSelected}"></CheckBox> <TextBlock Text="{Binding TenantName}" /> </StackPanel> </DataTemplate> </TreeView.Resources> </TreeView> </StackPanel> </Grid>

    Read the article

  • Stripe suppression algorithm needed

    - by maximus
    I have images with text. There are dark stripes in image that still exists in binary image too. That makes characters connected with that stripe - it can be vertical or horizontal (or at some angle) I need to remove them from image at first, and then to binarize. I've seen bandpass filter in ImageJ program that have some options like - suppress horizontal stripes, and it works good, but it also apply a bandpass filtering. So any idea please how to do it. I think it should be done in frequency domain.

    Read the article

  • Android RadioButton like Behaviour

    - by monxalo
    Greetings, I'm trying to create a single-choice android control, in a horizontal layout, by making use of the RadioGroup behaviour. I can assign the drawable just fine, but i would like to position the label of each RadioButton inside the drawable, is this possible using the standard APIs? <RadioGroup android:id="@+id/switchcontainer" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" android:checkedButton="@+id/RadioButton02" android:padding="3dip"> <RadioButton android:text="id RadioButton02" android:id="@+id/RadioButton02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:button="@drawable/radio_button" android:paddingRight="2dip" /> <RadioButton android:text="@+id/RadioButton03" android:id="@+id/RadioButton03" android:layout_width="wrap_content" android:layout_height="wrap_content" android:button="@drawable/radio_button" android:paddingRight="2dip" />> </RadioGroup>

    Read the article

  • How can I create a JTable where the first column is always in the JScrollPane viewport?

    - by voodoogiant
    What's the best way to set up a table in a JScrollPane such that the first column is always on the screen in the same position regardless of horizontal scrolling and overlaps columns that pass underneath? When the scrollbar is at the farthest left, the columns look normal, but as the user scrolls to the right, the secondary columns (2 and on) move underneath the first until the last column appears on the far right of the viewport? I found a sample taken from Eckstein's "Java Swing" book that sort of does this, but it doesn't allow resizing of the first column. I was thinking of some scheme where one JPanel held a horizontal struct and a table holding the secondary columns and another JPanel which floated over them (fixed regardless of scrolling). The struct would be to keep the viewport range constant as the first column floated around. Ideally I could do it with two tables using the same model, but I'm not sure if the whole idea is a naive solution.

    Read the article

  • How can I force my checkbox's text to not wrap?

    - by B. Clay Shannon
    This is what my LinearLayout (horizontal) row looks like: I want the text of the checkbox to be on one line; The buttons don't have to be that wide - they'll still have plenty of space with the checkbox text lengthened a bit. What in my XML: <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <CheckBox android:id="@+id/ckbxAllow_New_Items" android:layout_width="0dip" android:layout_height="fill_parent" android:layout_weight="1" android:checked="true" android:text="@string/checkbox_Allow_New_Items" /> <Button android:id="@+id/btnOK" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/button_OK" /> <Button android:id="@+id/btnCancel" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/button_Cancel" /> </LinearLayout> ...needs to change in order to force my checkbox text not to wrap? UPDATE Following Der Golem's suggestion by adding this: android:lines="1" ...and also changing layout_weight for the checkbox from 1 to 2 (set to 1 for the buttons) gave me what I wanted:

    Read the article

  • Large margin by long title

    - by Kevin Koenen
    I try to show a list of offers. When an advertiser insert a large title, the margin of an item (offer) will be showed what shouldn't. I've tried different layouts but that doesn't work. Link to image :) You see, some of the items has a large margin. Here's the code: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gallerylayout" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:gravity="left|center" android:layout_width="wrap_content" android:paddingBottom="2dp" android:paddingTop="2dp" android:paddingLeft="5dp" android:background="#20000000" android:cacheColorHint="#00000000"> <ImageView android:id="@+id/ad_image_small" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_marginRight="6dip" android:src="@drawable/ic_launcher"/> <LinearLayout android:orientation="vertical" android:layout_width="0dip" android:layout_weight="1" android:layout_height="fill_parent"> <TextView android:id="@+id/ad_id" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TextView android:id="@+id/ad_img_url" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/ad_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="3dp" android:gravity="left" android:textColor="#000000" android:ellipsize="end" android:singleLine="true"/> <TextView android:id="@+id/ad_km" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="3dp" android:layout_marginBottom="1dp" android:textColor="#000000" android:gravity="right"/> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/ad_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="3dp" android:textColor="#0099CC" android:ellipsize="end" android:singleLine="true"/> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="2dp" android:padding="5dp"> <ImageView android:id="@+id/ad_clock" android:layout_width="20dp" android:layout_height="20dp" android:layout_marginRight="5dip" android:src="@drawable/icon_clock"/> <ProgressBar android:id="@+id/progressbar" android:layout_width="match_parent" android:layout_height="8dp" android:layout_margin="5dp" android:paddingLeft="2dp" android:max="100" style="?android:attr/progressBarStyleHorizontal" android:progressDrawable="@drawable/color_progressbar" /> </LinearLayout> </LinearLayout> </LinearLayout> <ImageView android:id="@+id/overlay_image" android:background="#0000" android:src="@drawable/verlopen2x" android:layout_alignTop="@id/ad_image_small" android:layout_alignBottom="@id/ad_image_small" android:layout_width="fill_parent" android:layout_height="wrap_content" android:adjustViewBounds="true" android:visibility="visible" /> I can't see what i'm doing wrong. Thanks in advance!

    Read the article

  • Cross browser div center alignment using CSS

    - by Misha Moroshko
    What is the easiest way to align a div whose position is relative horizontally and vertically using CSS ? The width and the height of the div is unknown, i.e. it should work for every div dimension and in all major browsers. I mean center alignment. I thought to make the horizontal alignment using: margin-left: auto; margin-right: auto; like I did here. Is this a good cross browser solution for horizontal alignment ? How could I do the vertical alignment ?

    Read the article

< Previous Page | 11 12 13 14 15 16 17 18 19 20 21 22  | Next Page >