Simple reproducible of the browser behavior that causes this ![]() You can reproduce this with plain HTML like this: The combination of these rules (the flexbox, and the large table width stemming from elements with width - this is how the column Width parameters render) causes this behavior where the layout stretches to accommodate the entire table instead of producing a scrollbar. The Telerik Grid has table-layout:fixed so the column widths can actually take affect, and width:100% so it can stay within its container visually. ![]() The element has display:flex by default (or some other element has it in the layout, does not matter which). The origin of this behavior is the way elements with display: flex handle elements with large width set in % and table-layout:fixed. The simplest way you can reproduce this is to add some layout that you expect to be 100% wide, and a grid with columns wider than that - it will stretch the layout and the scollbar will come out on the main app element or the body, instead of the grid/layout container: Sample layout that stretches unexpectedly when you add the grid (Expected to fit the screen and layout, but adding the grid stretches The Width=100% is important Very wide column to showcas the issue class SampleData In addition, it appears to be expanding the entire page horizontally to fit itself, as it is increasing the size of all of my bootstrap columns so that it fits within the bootstrap container. Instead of doing this, however, the grid just expands horizontally to fit all of the columns, no matter what I try. Setting the width of the grid to 100% and providing widths for the columns which exceed that of the width of the grid/page should cause the horizontal scrollbar to appear. Just expands own width/page width even when static widths are set for columns and Grid Width set to 100%Īdding a TelerikGrid with more columns than will fit into the allotted space, the grid ends up expanding beyond the bootstrap column, compressing other parts of the page and causing the horizontal scrollbar to appear. Sara Soueidan also has an excellent article on making SVG responsive.Įnjoy this piece? I invite you to follow me at /dudleystorey to learn more.Download free 30-day trial Grid is too wide under bootstrap column, or causes unexpected scrollbars in the layout Environment Productīlazor Grid won't show horizontal scrollbars. Note that all content inside the SVG will scale when it is responsive, including text. This provides a solution in which the SVG illustration can scale gracefully on the page without disturbing other content the same code will work on an tag used to embed the vector drawing: If the SVG image was wider than it was tall, say 1:2, the padding-bottom would be set to 50%.įinally, position the SVG inside the container with a little more CSS: Dividing the height of the document’s viewBox by its width gives a 1:1 ratio in this case, meaning padding-bottom should be set to 100%. The padding-bottom amount represents a ratio between the SVG illustration’s height and width. ![]() Note that the width used in the CSS assumes that you want the SVG image to be the full width of the page (or at least its parent container). To complete the presentation, we use a variation of the old absolutely-positioned-element-inside-a- relative-container trick, with an offset padding, rather like the approach used to make responsive video: That moves the SVG illustration to the top of its display container. We have to take three more steps to integrate the responsive SVG element with our page content to make it work in all browsers.įirst, surround the SVG code with a and add a preserveAspectRatio attribute and class to the root element: You might assume that the remaining viewBox attribute is the culprit, but it’s not: leave that alone. Removing most of the redundant element attributes makes the illustration responsive, but at the cost of adding space above and below the vector image in some browsers (IE in particular). With the root element cleaned up, the code is much more presentable: ![]() In that case, simply modifying the width and height of the element won’t work.Īfter being pasted into the of an HTML document, embedded SVG code will typically look something like this: While this works in many cases, sometimes it isn’t enough, especially if you’re trying to embed the SVG illustration by entering the code directly into the page. Make A Responsive SVG ImageĪs an image, you can make a SVG vector illustration scale with the page content as you would any other: For an image format that features infinite scalability, SVG can be a surprisingly difficult format to make responsive: vector images do not adjust themselves to the size of the viewport by default.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |