Questions tagged [layout]
The layout tag is for questions about the placement, alignment and justification of objects with respect to a containing element.
81 questions
-1
votes
1
answer
75
views
Bootstrap card component [closed]
I am using Bootstrap v5.3 to create a card layout, and I want it to be SEO-friendly (see this link for my SEO-friendly criteria).
Below is my card component I wish to optimize and, if possible, to ...
- 109
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
3
votes
1
answer
229
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
2
votes
0
answers
42
views
Utility classes to control word breaks
I want to know if my SCSS code looks correct.
Note: Everything works as I expected. The Main Idea of this code is to generate Word Break Utilities for controlling word breaks in an element.
using SCSS ...
- 21
6
votes
1
answer
301
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
2
votes
0
answers
44
views
4
votes
1
answer
623
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
1
vote
1
answer
1k
views
Grid of radio buttons in Android
I want to display multiple radio buttons in a layout with multiline style as an item inside a RecyclerView. Look at the code I provided below and suggest how I can ...
3
votes
0
answers
386
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
1
vote
1
answer
235
views
blueBox dashboard Dribble design challenge
I have coded an UI from dribble design as a challenge and completed it but I think The CSS I wrote is really bad. I am a beginner. How can I improve my CSS?. One of the main problems is that I am ...
- 121
3
votes
1
answer
182
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
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
6
votes
2
answers
105
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
90
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 ...
- 714
1
vote
1
answer
167
views
Sign Up layout in android
I have created a sign up layout as image below.
Does this part of code looked bad since the dp I used for the floating button are quite large.
...
- 63
1
vote
2
answers
107
views
Code to make elements fit within their container while keeping their aspect ratio
This function receives the id of an element (frame) and calculates the correct height and width so it fits inside its parent element, while keeping its aspect ratio. Before I had a way to calculate ...
- 141
4
votes
3
answers
108
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
3
votes
2
answers
101
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?
...
- 204
3
votes
2
answers
890
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
0
votes
1
answer
52
views
Large poster with positioning elements
Ignoring the text inside, what is there to be improved?
This is supposed to be a poster for my Food Technology homework, but after getting some review from the informational side, I'd like some ...
- 111
3
votes
0
answers
450
views
JustifiedCombobox, a subclassed combobox
In an attempt to answer How to justify the characters in the drop-down list of a Combobox? I've come up with this code.
JustifiedCombobox justifies the pop-down ...
- 407
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
6
votes
1
answer
2k
views
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
0
votes
2
answers
669
views
onResize and onLoad handlers to toggle mobile layout
I'm currently using onResize and onLoad in javascript code. Both events are coded identically so I was wondering if there is a way I could combine both into just one.
...
- 141
2
votes
1
answer
366
views
Function to determine the appropriate dimensions for a close button
How can I reduce the cyclomatic complexity of this CloseButtonDimensions function?
...
- 123
2
votes
2
answers
1k
views
RTL management HTML & CSS
I've been working around a solution to easily manage LTR and RTL on the same interface.
The different solutions I knew at first:
Override CSS according to direction.
Use a program to transform your ...
- 303
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
1
vote
1
answer
58
views
Change page formatting for all worksheets to fit on paper
I have the below code that will loop through all worksheets of the workbook and will format each sheet by deleting, change page orientation, page margins and be able to print each sheet on 1 paper.
...
- 299
3
votes
2
answers
77
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,363
5
votes
1
answer
94
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
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,405
3
votes
0
answers
39
views
Responsive layout for showing/hiding 4 panels
I have 4 panels that will contains tables for data. There will be instances where a panel will contain no data, so I have combated wasted space with the code below. I'm relatively new to both jquery ...
- 141
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
1
vote
1
answer
7k
views
Login page without header/footer bars
I'm creating an app where the login page doesn't have the header/footer bars that the pages, after being logged in, would have. I've created an example that works, but I'm unsure if I am using the ...
- 11
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
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
188
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
3
votes
0
answers
5k
views
A BaseActivity to render toolbar and navigation drawer
I'm new to Android programming and this is my first project so I'm not sure if this is the correct method of rendering the toolbar or the navigation of the drawer on the screen:
So I have a ...
- 131
0
votes
1
answer
49
views
File listing layout
I am designing a very basic file listing layout in HTML and CSS. Although its working but I would like to know if the following code could be improved upon so that its more good and follows the best ...
- 231
3
votes
0
answers
791
views
Tablayout code for Android
I am using Tablayout for an Activity in my app but for some reason icons for each tab using ...
- 131
3
votes
1
answer
122
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
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
1
vote
1
answer
56
views
Product information overlaid on a large image
I've created some full-width divs containing images and text to exposure products.
It did take a lot of trial and error (I do not have any kind of education).
However, it feels a bit clumsy and i'm ...
- 13
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
3
votes
1
answer
63
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 ...
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
2
votes
2
answers
64
views
Ruby OOP convention/layout
I am new to programming and I have just written my first program. It takes files from an SD card and copies then into a new named folder and has the option to name the files themselves or simply move ...
- 21
1
vote
1
answer
95
views
Adjusting the height of a div to match that of another column
This code checks whether an image whose parent is .papers.left has completely loaded into DOM and if yes then the background of ...
- 113
3
votes
1
answer
646
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 ...