I am using the example mentioned here in my project. I want to stretch the table to fit the whole page.
So, I did:
html, body{
height: 100%;
}
#gridContainer {
height: 100%;
}
table{
width: 100%;
height: 100%;
}
The problem is, only the table header appears on the page and it is stretched properly. The rows do not show up. I also tried to place the <script> before the <style>, but no luck.
How do I fix this?
Make the below change.
table, div {
width: 100% !important;
}
.dojoxGridxBody, .gridContainer, table, #gridContainer {
width: 100% !important;
}
If you want to make no other changes you will have to use !important to override some of the original CSS. But you can use the chrome inspector to find out what this style is overriding, remove the widths that would be set without this in the old CSS and then remove the !important
This page is far from ideally laid out however, as when you change the column structure the page just gets wider and wider. You have multiple tables and divs within these when actually you only need one table.
Related
I am trying to freeze table header and need to make scroll only table body. I referred this link. But it is fine for minimal number of columns. If increases, then thus the table data text is overlapping each other. this is major bug in my project. I tried lots. But its become useless. if you have any solution please comment it below or help with your answer.
Screen Shot (For Example):
Maybe you must set up a horizontal scroll for the whole table as it became larger than screen width and set each cell with a wrap property to avoid its content pass uppon the next. Try this:
.outer-div {
position: relative;
width: 1024px; //Or any default value for you.
overflow: auto;
}
.inner-div {
position: absolute;
width: 100%;
}
.cell-content {
word-wrap: break-word;
}
Remember to change the classes' names with yours. Cheers!
I'm trying to adjust the images and size depending the page size to doesn't go outside the grid, but I couldn't make it.
I tried add theses lines below in CSS but it bugged the others images
img{
width: 100%;
max-width: 800px;
}
The content should adjust the size of the image, but it isn't working
The image going outside the grid:
You can see the live preview here
Just give max-width for image to 100%
img {
max-width: 100%;
}
do the exact opposite you are doing
img {
width:800px; /* this is optional */
max-width: 100%;
}
OP's comment:
I already dropped it (the width:800px), but it messed with the images at right sidebar.
Then create a class something like img-resposive and for that class apply max-width: 100%. And use that class in images you want/need to
I suggest if you are trying responsive design, use 50em; instead of 800px
They are both equal (except when window is resized.)
I can't find an answer and I'm truly baffled.
I have honestly spent 2 hours ++ on this researching, trialling and breaking this and I'm stumped... What the hell am I doing wrong...
I have a html page, "index.html" which links to a css sheet called "styles.css".
Every style element I incorporate is fine so far so I know the sheet is linked to correctly.
Within my html page's body tags, I have
<div id="bgimg"> <img src="img/EXAMPLE.jpg"> </div>
In my style sheet I have
#bgimg { width: 100%; }.
This doesn't work.
I've tried changing the display type, I've tried changing it to max-width and all sorts of other weird and wonderful things.
I'm not a website builder really (in case you couldn't already tell!!) but I even have another separate site where this works perfectly to resize the image based on the screen size.
I'm not getting any change in the image size what so ever.
Please, somebody either help me or kill me. Either way, I'm done. My head has exploded and I just can't anymore...
Cheers.
Did you try ?
#bgimg img { width: 100%; }
The #bgimg is already width 100% (it's a div), but the img on it is an auto-sized element.
I suppose what you are looking for is this:
#bgimg > img { width: 100%; }.
(the image is inside the container, as a direct child element)
you can apply css either directly on img tag like this :
img { width: 100%; }
or like this :
#bgimg img { width: 100%; }
My blog/website is iamdonle.com
An example of what I want is 13thwitness.com
The images on mine doesn't scale and a scroll bar will appear. On his website the images get smaller with the window. I'm sure it's simple but I'm a noob. Please help!
You images are scaling down, but your logo is not!
Try:
.logo {
max-width: 100%;
}
First, you'll need to make sure your container is able to scale. Right now it has a set width of 1150px, this needs to be either a max-width or percentage based.
First, remove the width declared on #container and add this CSS:
#container {
max-width: 1150px;
padding: 5px 30px 0;
}
Then you'll need to remove the width declared for your header. You can do this by either removing the line completely (line 82 of your CSS file) or by overriding it in your 'Custom CSS' field box in the Customization screen by doing:
#header {
width: 100%;
}
Then, as others have mentioned, you'll need to add a max-width to your logo as well.
#header img {
max-width: 100%;
}
Note: when I viewed the blog you were using the "Quite Big" theme, the code above only applies to that theme.
I'm certainly no CSS guru, but I am working on a problem where I'd like to make copying of images just slightly more burdensome for users. Sure, they can still easily be retrieved, but this makes it so you can't just drag/drop them on your desktop. Basically, I had a bunch of markup like this:
<img width="400" src="my image.png" class="foo" alt="foo">
Instead, I decided to put this into a background image and change the element to a div:
<div width="400" class="foo">
The problem I have is that the images have a fixed width, but a variable height. This worked excellent when I was using an img tag. It doesn't have the same behavior when I use a div tag. Instead, the CSS is requiring me to force a height property to display anything at all:
This doesn't work
.foo {
display: block;
margin: 0;
padding: 0;
width: 400px;
background-image: url(myimage.png);
/* height: 200px; */
}
This sorta does:
.foo {
display: block;
margin: 0;
padding: 0;
width: 400px;
background-image: url(myimage.png);
height: 200px;
}
The problem is the height for the images are all variable as I mentioned before. So it tiles over and over if I hard code a size. The container can be a placeholder for well over 5,000 images, so setting it by hand won't do it. If I can get this div to behave exactly like the img tag did, the problem is solved.
If you are just trying to prevent people from clicking and drag/dropping, I would say put each img into it's own div with position: relative. Add another div inside that relative div that has the following style:
div.img_box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: none;
z-index: 9999; /* or anything higher than your img's z-index */
}
That will cover up the image with a transparent div.
That way the image (which is part of your content) is still syntactically correct in the html.
Everybody is of course correct in saying that they have already downloaded the images to their computers just by visiting the site.
If you're trying to prevent users from reusing your content easily, some good methods are to:
1. Use images with lower resolution to limit reuse potential
2. Watermark your images
3. A combination of both, in an image sprite.
Hacking at it will just be ugly, ineffective, and difficult to maintain.
You are just setting the background of the div, you aren't adding an image to the div. The div can be resized to whatever it won't resize to what it's background image is. Just use the tag.
The only thing you could do with CSS is add a height which would work for all images. So if you're images range from 200-250px in height, set the div to 250px. Otherwise, you'll need javascript or server-side scripting to determine the height of the image and set the the CSS.