Good morning,
for purpose of sizing problem and element's positions on the screen between several devices, I want to display a grid as background (like a chess Grid) like this pic, for after that, displaying items like Text and Images on it.
The problem, is that the grid must be dynamical for each differents screen devices (like flex:1). That s why I don t want to use an image. Any idea about how to do it using code ? :/
I think I understand the problem and I'll explain how I would do this.
Firstly I would be using grid: https://css-tricks.com/snippets/css/complete-guide-grid/ if you aren't familiar.
I would set the parent's width and height to be dynamic and depend on the device.
Then set parent to display:grid; grid-template-rows:repeat(#,1fr) and grid-template-columns:repeat(#,1fr) where # is number of rows or columns. The fr unit basically evenly splits the available space between all of the columns/rows it needs to make. Put simply, 100px wide parent with 2 divs each with 1fr means both divs get 50px.
Put the right amount of children divs in the parent, it should auto fill the grid for you, if not then you would have to go through and put a grid-area:rowNum/colNum/span 1/span 1; on them.
Id give all divs in a row a class and then do .rowOne:nth-child(even) to style with chess pattern, so white and black.
If you needed to select a particular tile do .rowOne:nth-child(tilenumber) and go for your life.
Let me know if this helped or I did not understand the question at all :)
There is a library called [react-native-bgimage][1] which allows you to create a tiled background image, so I think this could help you do the trick. If you provide an image of 100x100 pixels with 10px tiles, I would assume the library would repeat that image for you.
Disclaimer: I have not yet tested this out!
Related
I have this ui-grid containing a random number of rows, but sure thing, it contains a great number of columns.
That said, I have a someway responsive-related problem: I want the grid to fill the remaining space of the page, in both width and height.
Apart from look-and-feel reasoning, the logic behind this is, on large screen devices, to allow the user to look at as much columns as possible and to extend the ui-grid height to the bottom, even if there are few rows displayed (btw, the page has no footer).
So, using a media query, I set width: 100% to the grid and manage to do the first part of the trick, but I'm struggling for the second part: the height.
I can't really make the gridWrapper height to expand the grid to the bottom, even if his width behaves correctly, without using Bootstrap but... the css struggle is real.
So I managed to have something near to what I want, but:
it's a ridicoulusly complicated, weak and un-reusable solution;
the row selection icon layout (the one on the left side of the rows) messes up as the row number grows, and i can't get rid of the selection feature by now;
the height of the grid is greater than the height of the page. I could set it to 90% instead of 100% to make it work... close, but not responsive, still.
Even if this scenario is the subject of many issues on the GitHub of the project, I'm asking you:
Is there a way to obtain what I want in a responsive, maybe bootstrap-inclusive way before I delve in a swamp made of display: table;, display: flex; & Co.?
give grid height: auto either in css or once grid is ready i mean once you have assigned array to gridOptions.data after that
$(".ui-grid").css("height", "auto");
I am affraid that only way how to achieve this is use of JS and setting css height and width programatically.
You have to set it when:
grid is created
window size changes
Using Angularjs Material framework, I aligned the content (containing cards) to the center, the problem is when I increase the height of one card, the height of the adjacent card also increases. Example code http://embed.plnkr.co/eaLjJDbjL1KnOI4jLYyO/preview
The cards will have dynamic height, and should align one after another both horizontally as well as vertically.
I am trying to achieve some thing like this:
https://lh3.googleusercontent.com/-6ocJpsXmVLU/VTgSj9wd_CI/AAAAAAAAACs/PavEWs9wiGM/s1600/cardLayout.png
I don't think this has anything to do with Angular. It looks like your example is using flexbox CSS, which is the cause of your columns having equal height. Remove all the flex attributes and your cards will take take the height of the contained content. If you are looking for a masonry tile layout you'll likely need JavaScript to help with that since elements float left and clear one another. Take a look at this and see if this helps http://masonry.desandro.com/
I asked for help earlier which was amazing and I am grateful for it, but I'm in need of your guys' expert assistance.
http://www.mrandmrsmagic.com is the site I'm working on and after simplifying the code and not having the positioning be an absolute, the menu bar for some odd reason isn't scaling with the site. Also the testimonials tab is cut off, which I'm guessing is due to the width not being long enough?
Also, on smaller monitors (15 inches+), they're saying that the video gallery and photo gallery are off to the right three inches, is there a way I can add padding or a margin to make them stick to the middle like they do with a larger screen? Any and all help would be appreciated.
Ok...
Your Gallery is in a div that has been given a specified position.
e.g
#gallery {
position: relative;
left: 950px; /* This needs to be removed */
top: -560px; /* This needs to be removed */
}
That will always force the div off to the side.
What I think you want and correct me if I'm wrong is two columns.
That's actually quite easy to do and I've set up an example here to get you going.
In my example the two columns are floated left and right to give them space in the middle and the two divs with the class .placeholder provide the hight and width.
If you create something similar replacing each .placeholder with your image and gallery respectively then you should be able to keep videos within the main content.
Hopefully this helps.
Edit
I'll try my best to explain everything properly.
The content div in the example I linked was just there to wrap around the floated columns in that example. You do not need to duplicate it.
The columns are floated left and right to separate the content and place it side-by-side. Adding a float simply means that they are to position themselves as far in the given direction as possible within their parent container.
Floating content breaks the flow of the page though so the parent needs to have the class .clearfix added to prevent any content below the column from being disrupted. It also allows the parent to have height.
Positioning the gallery differently for different monitor widths will only work with browsers that understand media blocks within css which ie7 and ie8 do not. You are much, much better off with a two column layout.
I am currently working on a new website and I want to have a div ID to fit 100% of the screen, however I want to have something as a width of 250px to the right of this div. I am trying to do width: 100% - 120px but doesn't seem to make any difference. How can I do this.
Thanks for any help you can provide.
If you want a div with 250px to the right, then you don't want the first div to be 100% of the screen. Set the second div width to 250px and the first div width to auto and it should fill the remaining space.
You can't subtract pixels from percentages, this isn't your answer, but I suggest learning the basics of css first, otherwise you will have no idea why things work the way they do.
Here is a good website with a lot of layout examples and tutorials: http://www.maxdesign.com.au/articles/css-layouts/
And http://www.w3schools.com/ for css standards.
As far as your particular situation is concerned, you are taking the wrong approach. If you want to be able to subtract width from 100% you can use javascript to accomplish this goal. with jquery you can do something like this:
$("#div").width($(window).width() - 125);
This will not work once the window resizes however. You can add resize events to resize your div when the window resizes but this is cumbersome and can seem laggy. Your best bet is to use a css implementation, your question is quite vague though, you seem to be describing a two column layout with a side panel, but I could be wrong. Just for a two column layout there are different options such as whether you want your main content to be liquid or static.
I'm assuming liquid because it is more useful.
I would like to recommend jquery layout for creating layouts. Uses javascript and it's very easy to use to make quick layouts. http://layout.jquery-dev.net/
Here is your solution: http://jsfiddle.net/Z3nfv/1/
I have this website.
The div container contains a background with a grungy look, and the body contains another background that is repeated on the x coordinate.
If you view the site you'll see whitespace on the left and right side. I am wondering how I can set the background images to expand based on the screen resolution. Would it work to set a width based on percentage for each div?
To my knowledge, CSS does not support scaling background images, which is disappointing to say the least. Long story short, you'll probably have to fake it with a fixed-position, z-indexed img tag. That, or what you did: a large image with a background-repeat.
I dont see any issues with what you've got in FF3/IE6/IE7 and chrome. only issue i see is the transparent png in ie6 with the ugly gray behind it.
ie6 I gotta fix but what the customer wants is for the with of the page to size up based on the users computer resolution
Unfortunately, you can't scale the image itself.
What you could do would be remake the div structure so that the inner div contains the center of the grungy background and the sides were tiled through two separate divs. You could then recut the center piece to tile both vertically and horizontally and give it a width that is a percentage of the window size. You could keep it from getting too small via javascript.
This is not an optimal solution, but if the client is set on having it scale with the browser window, this might accomplish it for them.
thanks for all your answers, when i said white space i didnt mean actual white space what i was refering to was that the entire container div wasnt sizing (width wise) towards what the users computer resolution was. and since allot of the divs are set with a background image there is no css code for setting the width on the image but i guess it would work on the divs. but thankfully after talking with the customer he changed his mind and doesnt want it anymore :)