Questions tagged [layout]

The layout tag is for questions about the placement, alignment and justification of objects with respect to a containing element.

Filter by
Sorted by
Tagged with
-1 votes
1 answer
60 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 ...
Rusurano's user avatar
  • 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 ...
timlwsk's user avatar
  • 91
3 votes
1 answer
120 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 ...
dcorking's user avatar
  • 321
2 votes
0 answers
40 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 ...
HoussamDev's user avatar
1 vote
0 answers
44 views

Custom view to select a value

I created a Custom view to select a value. I use horizontal Recyclerview to select an integer value and 2 buttons that decrease or increase the values. Could you consider the code and tell how it can ...
Destroyer's user avatar
  • 477
6 votes
1 answer
258 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. ...
Dehalion's user avatar
  • 163
2 votes
0 answers
43 views

Optimize animation, use parameters for different types of objects and work with VBox

...
Michal Rama's user avatar
4 votes
1 answer
615 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 ...
user204713's user avatar
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 ...
Android Developer's user avatar
3 votes
0 answers
382 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 ...
Priyanka's user avatar
  • 211
1 vote
1 answer
228 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 ...
Gourav Thakur's user avatar
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 ...
mazen's user avatar
  • 155
4 votes
1 answer
6k views

window.innerWidth - workaround for when it returns the wrong value

Some JavaScript libraries relies on window innerWidth and innerHeight to do their calculations ...
buzatto's user avatar
  • 141
6 votes
2 answers
99 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 ...
Sam's user avatar
  • 197
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 ...
darcher's user avatar
  • 724
1 vote
1 answer
164 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. ...
John Joe's user avatar
1 vote
2 answers
78 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 ...
madprops's user avatar
  • 141
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 ...
mrmadhat's user avatar
  • 148
3 votes
2 answers
79 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? ...
clickbait's user avatar
  • 266
3 votes
2 answers
824 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 ...
qazwsx598's user avatar
  • 141
0 votes
1 answer
51 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 ...
Xetrov's user avatar
  • 111
3 votes
0 answers
444 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 ...
Nae's user avatar
  • 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 ...
user7977775's user avatar
5 votes
1 answer
1k views

Plotting text from a dictionary with Matplotlib

I have the following dictionary: ...
sheldonzy's user avatar
  • 407
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 ...
USer345738380's user avatar
0 votes
2 answers
659 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. ...
clestcruz's user avatar
  • 141
2 votes
1 answer
365 views

Function to determine the appropriate dimensions for a close button

How can I reduce the cyclomatic complexity of this CloseButtonDimensions function? ...
Abhishek Sharma's user avatar
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 ...
Elfayer's user avatar
  • 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 ...
Larpee's user avatar
  • 143
1 vote
1 answer
56 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. ...
QuickSilver's user avatar
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 ...
Josh Hallow's user avatar
  • 1,305
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 ...
Sean Camden's user avatar
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 ...
RedDragonWebDesign's user avatar
3 votes
0 answers
38 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 ...
Kramb's user avatar
  • 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 ...
Alexiz Hernandez's user avatar
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 ...
user2138520's user avatar
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 ...
user123855's user avatar
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 ...
googabeast's user avatar
4 votes
1 answer
184 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 ...
RayaSem's user avatar
  • 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 ...
Areeb Beigh's user avatar
0 votes
1 answer
47 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 ...
Ayan's user avatar
  • 231
3 votes
0 answers
790 views

Tablayout code for Android

I am using Tablayout for an Activity in my app but for some reason icons for each tab using ...
Shafayat Mamun's user avatar
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 (...
Damien's user avatar
  • 33
3 votes
1 answer
306 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 <...
Ohsik's user avatar
  • 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 ...
Robin's user avatar
  • 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 ...
Mikey Harris's user avatar
3 votes
1 answer
60 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 ...
Christopher Hill's user avatar
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 ...
DCDC's user avatar
  • 233
2 votes
2 answers
63 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 ...
Charris11's user avatar
1 vote
1 answer
88 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 ...
Guruprasad J Rao's user avatar