Questions tagged [layout]
The layout tag is for questions about the placement, alignment and justification of objects with respect to a containing element.
82
questions
39
votes
3
answers
4k
views
Displaying courses in an HTML calendar
I'm struggling for a while now with the readability of my code, I after I tried to get as much insight as possible (for my standards). On my level, I think I understand and use it all right for my ...
- 505
29
votes
2
answers
30k
views
Is nesting grids a good idea?
I find myself nesting a lot of grids inside grids in WPF. I just found myself 3 Grids deep, and stopped to think: "Should I be doing this?" Is there some kind of performance cost? Is it unmaintainable?...
- 1,294
16
votes
3
answers
2k
views
HTML page listing product characteristics
I am using below code in site. i am using lot of html "br" tags. Is this the proper way? or may i add css class for those lines instead of ...
- 381
11
votes
7
answers
2k
views
Overlap detection for laying out elements on a page
How would you simplify/improve the readability of this code? Because even after my attempt to improve the readability I think it still looks messy.
...
- 467
8
votes
1
answer
197
views
Honey I shrunk the view
Going down the rabbit hole, I wanted to be able to change the size of a form, and not have to worry about the layout of the controls.
vba doesn't support user-resizeable forms, but forms still have a ...
- 75k
7
votes
1
answer
381
views
Incrementing letter-spacing of one line of text
I was asked to create a script which will increment the letter-spacing of one line of text, until its width matches that of the first line; for use in headline/subheadline text to maintain a block ...
- 185
7
votes
1
answer
10k
views
HTML form using <table> or <div>
I read that, in HTML, it is better to display non-tabular data using the <div> tag instead of the <table> tag. I ...
- 1,385
7
votes
1
answer
29k
views
Dividing the screen in two halves using LinearLayout
I want to divide the screen in two halves. The layout is locked on portrait mode. The top half will have one button and the bottom half will have many buttons. That's why I choose this division, since ...
- 761
7
votes
1
answer
1k
views
Button-clicking UI for a game
I've been working on this game for a couple weeks now as a purely personal project to help myself learn Java. I'd like to know if I'm on the right track with my project.
Items I'd like specific ...
- 73
7
votes
1
answer
120
views
Positioning a container next to its menu
I'm a beginner in CSS and need help with a suggestion.
I'm working on a project, in which I managed to position container_main right next to ...
- 71
7
votes
1
answer
1k
views
Adapting layout for various iPhone and iPad screens using constraints and multipliers
My experience with autolayout tells me that it's very difficult to make app look good on whole variety of devices (from iPhone 4s to 6s especially). Size classes are useful with device position and ...
- 233
6
votes
1
answer
5k
views
Alternative to a Grid in a StackPanel form for an easier way of inserting new rows
In my real life example I am at a layout stage and before I actually move any further I would like to review my current approach. I am still learning about UI, XAML on WPF technology and I guess I ...
user28366
6
votes
2
answers
101
views
Position logo in middle of nav
I've recently migrated away from floats and have started using flexbox to build my grids.
My navigation has 4 menu items. I'd like my logo to sit in the middle of these. To maintain a good page ...
- 197
6
votes
1
answer
2k
views
6
votes
1
answer
275
views
Group list items into pages, rows and columns
I have a list of labels for printing. Now I have go over the list and print the labels. The layout is specified by how many labels per page and per row on a page I can print.
...
- 163
6
votes
1
answer
88
views
Ultra-simple, automatic, non-float, 1-4 column, grid system
Has everyone moved over to CSS Grid and/or Flexbox? If not, I've maintained and evolved this system over a fair amount of time, the concept was derived originally, I believe, from Mary Lou, although I ...
- 724
5
votes
1
answer
48k
views
Android layout with equal spacing between elements [closed]
I am trying to make a nice set of items, which are equally spaced from each other.
On example below, I set buttons between empty textview. Every button and text view has ...
- 255
5
votes
1
answer
556
views
Vertical-align in Nested Column
Requirements:
There are two columns. The left column is fixed width.
The height of two Column should be the same.
Left column contain a title (can be multi-line) and an Image (limit max width to ...
- 51
5
votes
2
answers
555
views
Periodic Table generator
I've been playing around with Jekyll and CoffeeScript the last few days and made a Periodic Table to learn those two.
Now, to create the Periodic Table, I take an array of ...
- 151
5
votes
1
answer
196
views
JFrame with four sliders
I am writing a control panel with Sliders but I think my code is messy and cumbersome, what can I do to improve it?
...
- 483
5
votes
1
answer
93
views
Flexbox layout, columns, rows, multiple heights
I wanted everything to just snap into place, but found I had to add spacing to some of the items in order to line them up. It's still neater than trying to float things, and Grid isn't ready yet. But ...
- 51
4
votes
4
answers
362
views
Improve HTML structure?
I am not new to html however would like to know about best practices. I need to develop a layout like this:
This is what I have proposed:
...
- 924
4
votes
3
answers
107
views
Breaking group of items into rows then ensure consistent height of each row element
I'm working on a product category page where the product images have inconsistent heights so I've been asked to improve the page appearance without changing the images.
The page contains x number of ...
- 148
4
votes
1
answer
421
views
Should I split code into smaller functions? Advice on layout
I have the following code. I was wondering if anyone can give me any pointers on how to make this more concise and neater? Should I be splitting this down into smaller functions?
...
- 341
4
votes
3
answers
471
views
4
votes
1
answer
420
views
Am I over using <ul> for layout?
I want to create a small web widget, you can see it at this jsfiddle. Right now it is organized by placing lists within lists and content within those lists. All of this is supposed to sit, as a bar, ...
- 345
4
votes
1
answer
5k
views
Randomly place Divs on webpage and make sure they don't overlap
Currently I am working on a project for which I want to have the different links (div elements) placed randomly on my webpage. To accomplish this, I first generate a set of coordinates and later check ...
- 91
4
votes
1
answer
727
views
GUI layout for a security camera app
I'm designing a security camera program. Right now, I am just trying to set up the GUI before receiving. I am using Kivy since, in the future, I plan on designing some programs for Android. I really ...
- 41
4
votes
1
answer
617
views
Grid layout component for VueJS
I'm working on a vue.js / nuxt.js project, applying the Atomic Design methodology, I need to do one to set the grid layout and using CSS Grid Layout.
I already did the component, but I think I did ...
- 41
4
votes
1
answer
48
views
Everything you might want to know about an element
I am working with a lot of DOM manipulation and need to know several values of an element to determine its position within the DOM and I have written the following to help scrape several of the bits ...
- 123
4
votes
1
answer
395
views
Optimizing pagination of HTML tables
I'd like to share my implementation to you to confirm if it's a correct way to solve my problem. I have a list of products which have an attributes table and a description table (both in html_encoded ...
- 141
4
votes
1
answer
7k
views
window.innerWidth - workaround for when it returns the wrong value
Some JavaScript libraries relies on window innerWidth and innerHeight to do their calculations
...
- 141
4
votes
1
answer
1k
views
Layout for a Tkinter form
I am making a GUI application for a class. I have made the form layout (make_form()) using both Frame and grid, but I am not exactly sure that one should be mixing ...
- 41
4
votes
1
answer
186
views
Responsive video embedding
I figured out a alternative way to make embedded videos responsive and I like to have some feedback on it.
Would this be considered a hack or just bad coding to add a extra piece of html to make this ...
- 41
4
votes
1
answer
130
views
Webpage Template
Introduction
I am designing a website as a hobby. As you can probably tell from the code below, I am an absolute beginner. The first thing I'd like to do is to create a nice webpage template that I ...
- 547
4
votes
0
answers
4k
views
Creating Android layout with GridLayout
I'm trying to create a Layout with two columns which are next to each other (I'm accomplishing this behavior with a LinearLayout).
Inside each column, I have two TextViews and two Buttons, which I ...
- 143
3
votes
1
answer
180
views
Splitting a long string based on its graphical presentation
I got a long string, let's call it Story.
I fetch this story from a database so I don't know how long it is.
I want to display this story in a view, but what if ...
- 155
3
votes
1
answer
121
views
HTML and CSS template of "Free .psd layout"
I have coded a free .psd layout for the first time. I did not make it responive because I would like to know if the code is correct.
The layout's appearance in Firefox and Chrome seems to be ok (...
- 33
3
votes
2
answers
848
views
Rearrange page numbers for printing a book
I didn't want my title to be too long so to clear up any confusion I'll explain better here what my code does.
It asks for the total pages of a book(PDF file in my case), and returns the page numbers ...
- 141
3
votes
2
answers
76
views
Better way for many components?
I have coded a system where each 'Player' class requires 5 components (could be more in the future, up to 10, 20 maybe even 30, once we add more and more features). What I want some advice on is a ...
- 1,325
3
votes
1
answer
61
views
OOP and non-OOP versions of layout and page animation code
I am trying to learn how to write more object oriented javascript code, but I am having a hard time understanding the correct way to do it, and how it is useful for front end development. As you can ...
3
votes
1
answer
620
views
Swing Component Resizer Class
I've created a class to help resize Swing components while maintaining their aspect ratio within a container.
The class works by creating an instance and adding a container's components to it, then ...
3
votes
2
answers
1k
views
Align text (left, center, right) without additional packages
I wrote this short subroutine to left, center, right-align a multiline string.
How can I make it better (shorter, prettier, optimized)? Can you offer some suggestions?
...
- 1,099
3
votes
1
answer
170
views
Text centered in a circular component
I have surrounded my initials with a circle. This is intended to be a re-usable component in a responsive layout. (When it is re-used the text will always be two letters, and the font won't change. It ...
- 321
3
votes
2
answers
86
views
Making the font as big as possible without overflowing each div
I made a function that makes font sizes in <div>s as big as possible without overflowing. It takes a long time to run. How do I optimize this?
...
- 266
3
votes
1
answer
2k
views
Android Authentication Activity with Fragments
I have an Activity called AuthActivity and I would like all of my authentication Fragments to be in this ...
- 315
3
votes
1
answer
2k
views
wxPython Form Builder - Sizer Automation
Presented for critique are a pair of classes which automate Sizer Creation and Layout in wxPython.
...
- 493
3
votes
1
answer
307
views
CSS flexbox responsive grid system
I'm using the flexbox for the first time for a responsive grid system. It seems to be working as far as I tested but want to make sure it works on others too and see ways to improve this.
Please see <...
- 193
3
votes
1
answer
653
views
HTML and CSS markup for flexible form layout
I'm trying to have a HTML / CSS structure for flexible layouts for forms. I tried to look at Bootstrap codes for help with this (without actually using Bootstrap itself). I've gone with something ...
- 473
3
votes
0
answers
383
views
Reusable grid layout for React.js
I have taken someone else's HTML and CSS code for grid layouts and reactified it. When converting the code to React, I tried to make it as simpler. I would like to learn from community, if any ...
- 211