I'll try to be very modest on this one because I've been stuck in this problem for an hour already. I created my very own header-bar sort-of and here is the normal view of it in my own resolution. But whenever I try to view it on my friend's netbook (which has lower resolution), it will display something like this.
Here's my CSS:
#header_table {
width: 100%;
min-width: 100%;
height: 55px;
margin: auto;
background-color: #EEEEEE;
color: #FFFFFF;
}
And on the left cell of the table I put
<td width = 70%>
I tried putting
<td style="width:70%; min-width:70%;">
but still it won't work.
How can I make that table cell on the right adjust or move so that the button won't be under the textbox?
Related
I have a page which contains a table. On the same page, there is a footer and side bar. I've manipulated the table such that the width is how I like it, however I cannot seem to use the same method for height.
This is what my page currently looks like:
There are many more table items that continue to go down, however as you can see, the items are being cut off by the footer. When I set the height to an explicit value such as 300px I get the effect that I am looking for:
where there is a scrollbar. The problem with this is that it is not dynamic. For example, if I make the window size larger vertically, the table height is not increased with it. I've tried using % values such as 80% but it does not seem to affect anything. I want to be able to resize the window and have the height of the table increase/decrease with the resize so that it fits over the whole screen except the footer. How can I achieve this?
EDIT
Here is my source code (ReactJS):
HTML
<table className='task-table'>
<tbody>
<tr className='tasks-header'>
<th>Store</th>
<th>Product</th>
<th>Size</th>
<th>Profile</th>
<th>Proxies</th>
<th>Status</th>
<th>Actions</th>
</tr>
{this.renderTaskData()}
</tbody>
</table>
SASS
.task-table {
margin-left: 85px;
margin-top: 30px;
border-spacing: 0 10px;
width: calc(100% - 107px);
user-select: none;
display: block;
overflow-y: auto;
overflow-x: hidden;
height: 300px;
tbody {
display: table;
width: 100%;
}
}
.tasks-header {
font-family: 'Muli', sans-serif;
font-size: 12px;
font-weight: $extra-bold;
color: $text-light;
letter-spacing: 1px;
text-align: left;
th {
padding-left: 36px;
}
}
Would you like to share your source code? Meanwhile, perhaps you should try nesting the table in a div since divs are block-level elements and then control the size of the div with % or vh. Your table should reflow according to the height of this container div.
I have 2 images left and right from center which are placed nicely, but when the screensize is < 1920px, a scrollbar is created because the right image is going "out of the Site". I just want it to be cut to the screensize / go over the side of the screen without widening it.
CSS of the images (simply placed in the body):
#fans_l {
position: absolute;
text-align: left;
margin-left: -955px;
margin-top: -228px;
z-index:3;
}
#fans_r {
position: absolute;
text-align: left;
margin-left: 399px;
margin-top: -228px;
z-index:3;
}
Body css:
body {
height: 100%;
width: 100%;
margin: 0px;
background-image:url(p/back.jpg);
background-repeat: repeat; text-align: center;
}
In this case, there are a few things you can do. The first two that come to mind are as follows:
You can declare in the body css that the overflow-x property be set to either none or hidden, effectively cutting off your excess pixels. Though, at a fixed image size, this may not be desirable on smaller browsers. Keep in mind that many people have monitors smaller than 1920px.
You can use a nifty little tool present in CSS3 called Media Queries. With them, you can change css rules based on a monitor width or height. Using this method, you can ensure that it appear full on all sizes of browser windows.
I'm trying to do a fluid design, so the images will resize down, when browser windows is resized.
I used max-width, and that worked well for Chrome, Safari and opera, but in IE and FireFox it does not work (the images are shown with their full size, which is much bigger than width of page itself).
I know some people might tell me to use just width: 100%; but that resizes small images to size of parent element, which is not ok.
Does somebody have any solution to this? It has to be pure HTML & CSS, no JS.
img {
max-width: 100%;
height: auto;
line-height: 0;
border: 0;
}
The image is basically in Table thats inside of a div, thats inside of a div.
Not actual code (but simplified version of how it is), as it would take a lot more space:
<div class="blabla">
<div class="blablabla" style="max-width: 1110px;">
<table><tr>
<td> Text, random, ladida, text
<img src="random_source.lol"/></td>
</tr></table>
</div>
</div>
The thing is, I wan't all images to scale down if needed, not only some.
Thanks.
Ps.: I already googled a lot and red topics here without success.
Your code works just fine across browsers.
See this demo: http://jsfiddle.net/abhitalks/mxmzjnaL/1
Problem is with your table. Give your table and/or td some size and a table-layout:fixed; to your table.
See this: http://jsfiddle.net/abhitalks/mxmzjnaL/2
Relevant CSS:
table {
table-layout: fixed;
width: 50%;
}
td {
width: 100%;
}
img {
max-width: 100%;
height: auto;
line-height: 0;
border: 0;
}
Note: Use percent units for the width of table to keep it fluid.
.
I am a 3D artist by profession, however I have recently been trying to create a website for myself from scratch. My needs are very simple - a widescreen website which consists of a background image and thumbnails which once clicked load a overlay pop up showing further information on that particular content. The pop-up overlay is not the issue here.
My current problem is that I need my page to always be 100% of the browser width, so that means it must scale - along with all the content (thumbnails) in it. I created my first attempt on a screen which is 1920x1080 and the result was perfect, however - when I loaded it on my laptop which has a 1366 screen, it resulted in only showing me a slice of the full page, and gave me scroll bars to view the rest.
I am placing the thumbnails via px as I have got the values from Photoshop but I understand that my needs can only be accomplished via % - how can i overcome this?
Here is a visual of my setup http://i.imgur.com/ZdgTRYk.jpg
Grey is browser window
Red is background
Green is content
Everything should scale at the SAME rate.
Here is my HTML
<body>
<div id="background">
<img src="images/background.png">
<div id="box3thumb">
img src="images/box3thumb.png">
</div>
</div>
</body>
and my CSS
#background {
position:relative;
left:0px;
}
#box3thumb {
position:absolute;
left:514px;
top:117px;
width:92px;
height:200px;
}
I really appreciate any help I might recieve on this.
Thanksm
Elliott
ok, for your #background, you can use this css to scale the browser:
#background{
width: 100%;
background: red;
}
and for your thumbnails, I don't understand very well how you want them placed, but according to your image, you'll need to put them inline:
#thumbnails{
display: inline-block;
margin-left: 15%;
}
The % of the margin may vary depending on what you want.
If you set the body and html elements of your page to
CSS:
html, body
{
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
This will prevent scrollbars from appearing, while maintaining the full width and height of the screen, regardless of resolution. As for your thumbnails, if you have a set number of thumbnails then you can set the widths of your thumbnails to say, 10% width and height with a margin: 1%;, this will allow you to fit roughly 64 thumbnails, but they will get small if the user has a shitty resolution.
.thumbnail
{
position: relative;
display: inline-block;
width: 10%;
height: 10%;
margin: 1%;
}
EDIT ------------------
With large thumbnails like that you could make it more like this:
.thumbnail
{
position: relative;
display: inline-block;
width: 20%;
height: 20%;
margin: 5%%;
}
Use in style.css
#background{
width: 90%;
background: red;
}
/*thumbnails*/
#thumbnails{
display: inline-block;
margin-left: 10%;
vertical-align:text-bottom;
}
I've spent a great deal of time and effort on toying and researching this, but I cannot figure out how to perfectly align the column headers with a scrollable table body in HTML. There are other solutions and techniques posted on here and at random places on the web, but they all yielded inconsistent results, especially with random amounts of data.
Here's the JSFiddle.
Note that I have custom CSS applied, but also Bootstrap's CSS. Please expand the result panel to be big enough for the HTML headers to not wrap.
To summarize the HTML, there are two tables - one for the column headers, one for the data cells. Each is wrapped in a <div>, which allows the cells to be scrollable and sets the width of the columns. To account for the scroll bar sometimes showing up (the data is dynamic and I have no idea how much data there will be), the <div> wrapper around the table cells is set to always show the scroll bar, and the wrapper around the table headers has this CSS applied:
.grid-container .column-wrapper {
width: calc(100% - 16px); /* 16px is the approximate width of the scroll bar */
}
This works on my monitor when the zoom is 100%, but on other monitors, the grid lines are not aligned perfectly - off by maybe 4px. The application that uses these grids uses them extensively, some of which align perfectly while others are off. I unfortunately have not found a pattern for which render correctly and which do not.
I do not want a JavaScript solution - these grids have a lot of JavaScript applied already to make them interactive and sometimes render huge amounts of data (over 7,000 rows) and I don't want to do something funky like looping through the each row, detecting widths, then apply fixes.
Thanks guys, let me know if you need any more information.
EDIT -------------------------------------------------------------------------------------
Our users use Chrome 35.0.1916.153, and I've begun explicitly setting the width of the scrollbar to make sure it's 16px:
::-webkit-scrollbar {
width: 16px;
border: 1px solid #ccc;
}
Again, this works on my monitor, but at the moment I cannot tell the results on others. Here's the updated JSFiddle.
Here is my solution to achieve a perfect alignment of the columns between the header and the scrollable body of a table.
We don't know the exact scrollbar width so :
We make the table header scrollable so that its width is now exactly the same than the body
table.scrollable thead {
width:100%;
overflow-y: scroll;
position: relative; /* for the absolute positioning of 2.*/
}
we mask the header scrolling arrows under 2 pads
table.scrollable thead:before {
position: absolute;
right: 0;
width: 16px; height: 20px; content: ''; background-color: menu;
margin-top: 0em;
}
table.scrollable thead:after{
position: absolute;
right: 0;
width: 16px; height: 20px; content: ''; background-color: menu;
margin-top: -1.2em;
}
Here is a sample fiddle using flex css: https://jsfiddle.net/vyp5j257/2/
Or here your fiddle updated: http://jsfiddle.net/9g6xo8L6/1/
calc() can be iffy with cross-browser testing when you need pixel perfect rendering. Try changing the .grid-container .column-wrapper style to something like this:
.grid-container .column-wrapper {
width: 100%;
padding-right: 16px;
}