I have a table with 3 columns.
The width of the cable is 100%, so it fills the full viewport with the cells as wide as they need to be.
However, if I have a really long cell that makes the table too wide to fit in 100%, the entire table scales down until eventually the text is too small to read.
Instead, I want the long cell to begin scrolling with overflow-x: scroll. I cannot get this working.
My code:
<style>
table {
width: 100%;
border: 1px; solid;
border-collapse: collapse
}
td {
border: 1px solid;
}
td.long-cell {
overflow-x: scroll;
}
</style>
<table>
<tr>
<td>Short String</td>
<td>Short String</td>
<td class="long-cell">Loooooooooooooooooooooooooooooooooooooooooong String</td>
</tr>
</table>
JSFiddle
If you make the viewport smaller with dev tools, the table starts shrinking.
I've tried using table-layout: fixed, however this then means that I have to set fixed widths on the columns, which I can't do as the content is of unpredictable lengths.
Essentially I want a table that is always 100% wide, never scales, and the cells can be scrolled horizontally only if needed.
I solved this by setting max-width: 40vw on the cells that might get too long.
You can try different vw values, however anything between 1 and 99 seems to work somewhat.
Related
My PWA in a desktop browser is not really cool (because i don't have a lot of information to show).
And I would like to limit the width to 768px.
I tried many solutions, but i can't to change elements in position "fixed" like v-navigation, v-footer, v-dialog, ...
they are always 100% of the width of the browser.
I tried this in app.vue or in index.html:
html,body,#app {
max-width:768px !important;
overflow: hidden;
}
and last time I tried this in index.html:
#mytable {
width: 100%;
overflow: hidden;
}
#mytable td{
width:50%
}
<table id="mytable">
<tr>
<td>
<div id="app"></div>
</td>
<td>other half</td>
</tr>
</table>
But no solutions works.
Thanks for your help
Marco
Your problem seems you need different layout in function of screen size. You have several solutions from media queries to simple margin. Here I will explain how to do what you want with just margin.
I advise you to use a div to wrap your content and do not apply all your style in your #app container. Why ? Because you can imagine for instance that you want a top bar that take all the width and a content that take only 768px. If you make your layout in only one block this will be very complex. Separation in several block is a good strategy to have a modulabe UI. So we will use this template. You can make whatever you want in the .content div.
<div id="app">
<!-- Here we can imagine a top bar -->
<div class="content">
<!-- Display whatever you want -->
</div>
</div>
First you need to prepare your app container to display your application in all screen. I suggest this css :
html,body,#app {
overflow: hidden; // If content is large it will display scroll bar
height: 100vh; // Tell to your browser to take 100% of the available viewport height
}
Then you can define the css of the .content block :
.content {
max-width: 768px; // Max-width you want
height: 100%; // Take all the height available
margin: 0 auto; // Display div at the center
}
Here is an example: jsFiddle
If you are very interested in layout design, I strongly advise you to look into flex box and css grid.
I want to create a CSS grid with columns that have auto widths so that it fits the data in a way that makes the most sense automatically.
My problem is that I don't know have the same automatic columns widths for each column when looping through a list of items that produces a grid with 4 columns.
Temporarily, I set the first 2 columns to a set pixel amount, but I would like them to all be matching automatic widths.
HTML
<div repeat.for="milestone of milestoneHistory">
<div class="grid">
<div>${milestone.statusDescription}</div>
<div>${milestone.quantity}</div>
<div>${milestone.milestoneDate | dateTime}</div>
<div>${milestone.createDate | dateTimeFromUtc}</div>
</div>
</div>
SASS
.grid {
display: grid;
grid-template-columns: 100px 75px auto auto;
//grid-template-columns: auto auto auto auto; //This is how the first picture is styled
border-bottom: 1px solid lightgrey;
&.header {
font-weight: 600;
border-bottom: 2px solid #black;
margin-bottom: 3px;
}
}
I want it to go from this:
To something more like this this:
THERE IS AN EDIT AT THE BOTTOM - look for "===== EDIT ===="
I am putting a fixed division at the top of the page. No problem with positioning it, but a problem comes up when I test the page by scrolling up and down.
Everything is fine with Chrome and IE but FF has a problem. The problem is that lines are "lost" under the fixed division. That is, the page is scrolled too far.
Here is the test page The entire source for the page is at the bottom of this question.
The division on the test page has width: 80%; margin-left: 50px; and opacity: 0.5 This allow you to see the lines underneath the division.
Go to the test page and highlight the last line at the bottom of the viewport. Highlighting the last line makes it easy to spot when you PgDn.
Now PgDn (or click the scroll bar - the bar, not the slider)
You can repeat the highlighting and PgDn and it should behave the same way.
With Chrome and IE, the highlighted line will still be visible, more importantly the lines following it will be visible.
With FF, the highlighted line, and one or two of the lines after it, winds up underneath the fixed division. The lines after the highlighted line are lost - not visible.
I've see this done successfully on other sites but I can't figure out what they are doing to make it work.
This page works correctly with FF, Chrome, and IE. There are others but I can't seem to find them right now.
Here is a page with the same problem as my test page It is different in that it "floats" the division until it is scrolled to the top and then it "fixes" it at the top. I've done this same float/fix thing and it also has the problem with FF. The test page I pointed you at, above, simply fixes the division to start with.
The funny thing about that page which has the same problem as mine is that it is a demo of how to put a fixed division at the top of the page and it doesn't work for FF
Another page with the problem of losing lines under the fixed division is yahoo.com. Lines are lost under the fixed division pretty much as is happening on my test page, but yahoo "loses" more lines than my test page.
Does anyone have any idea how to fix a division at the top and not lose lines underneath the division, lines which should be visible after the scroll? My test works for Chrome and IE but not for FF.
AND - wasn't there a code snippet link on the question page which you could use to provide demonstration code? I don't see it on this page where I'm typing the question.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Scroll Test</title>
</head>
<body style="margin-top: 0px;">
<div style="clear: both; opacity: 0.5; margin-left: 50px; width: 80%; background-color: red; top: 0px; position: fixed; height: 50px;"></div>
<div>
<script type="text/javascript">
for (i = 0; i <201; i++) {
document.writeln("*** " + i + "*************************************************************************************<br>");
}
</script>
</div>
</body>
</html>
By the way - the division (with the pink background) at the right hand side of this page has a problem when it get's fixed to the top of the viewport - the top is cut off. The only way to see the top is to scroll back up to the top of the page. This happens in FF, IE, and Chrome.
Where should I report this problem - about the "ask question page" - and provide the details?
===== EDIT ====
Thanks to user3137702, who told me to change the division to 100%. When I did that, the scrolling worked but initially when the page is loaded, lines #1 and #2 were under the fixed division.
I had the body set to margin: 0px; I changed that to margin-top: 50px; to make the first lines visible. I wasn't worried about the other margins - left, right, bottom, that's why I just changed the margin: 0px; to margin-top: 50px; - easiest to type.
but that through me back into the original error. After playing with it for a while, I found that unless margin-left: 0px; is set on the body tag, the scrolling won't work.
So, the complete solution is to have the fixed division set to width: 100%; and the body set to margin-left: 0px; and margin-top: nnpx, where nn is the height of the fixed division.
I'll add some JavaScript to set the body top margin based on the height of the fixed division so I don't have to mess around with it if the height of the fixed division changes.
I originally had width: 80px; on the division because I want the fixed division to show as less that the body width and centered.
I took the code that solves the problem and added a second division under the fixed division. The fixed division has background-color: transparent; and width: 100%. The nested div is where the content is and is set to width: 80% margin-left: auto; margin-right: auto to center it.
Now the it displays as I want it to and it scrolls properly.
Here's the new definition of the body down to the close of the fixed division's tag:
<body style="margin: 0px; margin-top: 50px;">
<div style="width: 100%; background-color: transparent; top: 0px; position: fixed;">
<div style="width: 80%; margin-left: auto; margin-right: auto; background-color: red; height: 50px;">
Contents of the child division within the fixed division
</div>
</div>
<div>
Here is a page incorporates all of the changes
Again, thank you user3137702, I'll select your answer.
Hold everything
I just played with the fixed page and have found that IE, FF, and Chrome all start to have problems with the scrolling as the viewport becomes shorter - as would happen if you resize the browser window or pull up something like FireBug.
I'm not going to spend any time figuring out the size that causes the browsers to start misbehaving, it would be a waste of time. Suffice to say IE and Chrome start having problems at larger heights than does FF. But the sizes are something that it is unlikely anyone will ever encounter. The viewport has to get pretty short to start the problems.
I can't explain exactly why it's happening, but it's the width that's messing up firefox; If you set the width of your fixed div to 100%, it works as you would expect.
<div style="background-color: red; top: 0px; left: 0px; position: fixed; height: 50px; width: 100%;">
</div>
Update: I have found out that this is a very specific problem with <div>'s with the combination of overflow: hidden and anchors. There seems to be no solid way around it. I now deleted the overflow: hidden. This solves my anchor problem, but creates extra space below my columns. This is not such a big problem, but if anyone knows how to get rid of the overflow without using overflow: hidden, suggestions would be really welcome. End update
I have a fairly simple website with a header in a <div> over two columns. The header and the columns are in one container. The header is NOT fixed; when scrolling down, the header goes out of view.
Now, my problem is with the anchors I want to add in the right column. The anchor itself works properly; when I click on the link on the top of my page, it jumps to <h2> just fine. It puts the title in the top of the screen just like I want it to. The problem is, however, that when I scroll back to the top, the upper part of my content in the columns has shifted behind the header. At first I thought it shifted all the way up to the top of the page, but now I see that that is not the case. I don't understand what the amount of pixels corresponds to. The columns themselves seem to keep the proper length; there is now extra empty space below the text.
I have read several questions of others on this website, but they all dealt with fixed headers, and their problem was that the anchor tag itself disappeared behind the header. I have tried the solutions proposed to this problem, but that causes my anchor tag to appear too low on the page and doesn't solve the problem that the upper part of my columns ends up behind the header.
Does anyone know how to fix this...?
My HTML for the page-setup:
<div id="container">
<div id="header">
</div>
<div id="columns">
<div id="leftcolumn">
</div>
<div id="rightcolumn">
</div>
</div>
</div>
My CSS for the header and the columns:
#header {
width: 738px ;
height: 298px ;
padding: 0px ;
position: relative;
}
#container {
width: 738px ;
margin-left: auto ;
margin-right: auto ;
margin-top: 0px ;
margin-bottom: 0px ;
padding: 0px ;
}
#columns {
position: absolute;
margin-top: 0px;
margin-bottom: 0px ;
width: 738px ;
background: #b43232 url(fauxcolumns.jpg) ;
overflow: hidden ;
}
#leftcolumn {
float: left;
width: 254px ;
margin-top: 0px ;
padding: 0px ;
}
#rightcolumn {
margin-left: 254px ;
margin-top: 0px ;
padding: 0px ;
}
And, finally, my HTML for the anchor:
Text
<p>Text in between the top and the anchor.</p>
<a name="text"><h2>Text</h2></a>
<p>This is the text the anchor wants to take you to.</p>
So, to summarize: the anchor works, but when I scroll back to the top, the upper part of my content has now shifted behind the header. So I guess I want the content of my columns to align with the top of the column, instead of in some random place behind the header, but I can't imagine how to do it. Setting top or margin-top to either #columns or both columns separately doesn't work. I can't think of anything else...
Anyone have any ideas?
Here is the css code I am using:
#wrapper{
position:relative;
width:950px;
margin-left:auto;
margin-right:auto
}
#content {
text-align: left;
padding: 0px 25px 0px 25px;
margin-left: auto;
margin-right: auto;
position: absolute;
left: 50%;
/*half of width of element*/
margin-left: -450px;
height: auto;
}
And this is the site: http://projectstratos.com/31-01-11/
Please ignore the social icons and the height issues.
To see what I mean make your browser smaller and bigger. The text moves to the right while the background image stays centered. How can I fix this?
I don't believe there's an actual 'fix' for the problem you're presenting.
When you say that the text 'moves to the right' in reality- the text is not moving at all.
Your background image is just trying to maintain itself in the center of the horizontal axis- which you're changing.
For example.. If you got Bungie's website http://www.bungie.net/Projects/Reach/default.aspx and you perform the same action. You'll get the same 'effect' that you are. The only difference is that the background of the text in their website isn't a part of the background image.
Here's what you need to do in order to 'fix' you're problem.
Separate the background (planet, space, etc..) from the logo, purple box etc.
Keep the space, planet, etc.. in the same spot as the background image that's there now.
Take the purple box and put it in it's own div that wraps around all your content
You're code will look similar to this:
<body>
<div id="purpleboxbackgroundimage">
<div id="contentandtext">
<h1>jhkljhlkjhlkj</h1>
</div>
</div>
</body>
I hope this helps.