I am developing struts2, Hibernate based web application, but its HTML, specially dynamic table, gets disturbed when it is accessed on different resolution systems.
I have already tried display tag, fixing headers of table and using percentage instead of pixels in CSS but still its happening, I want make a fixed design where all components should remain same on any resolution or it can auto adjust.
try using responsive tables these tables align according to devices and resolutions.
here is a plugin - LINK
or if you want to do it on your own look at media queries LINK
or take a look at the answer here LINK
Related
I am using React and I am trying to modify the content of a component based on the viewport of the device.
The solution I came up with is to wrap in 2 separate divs the content for mobile and the content for desktop, and then to use CSS "display:none" and appropriate breakpoints to display either one div or the other one. I am sure there is a better and more efficient solution, but I can't find it.
I much easier way would be to use media queries. These allow you to basically alter your CSS based on the size of the browser/device and as the size changes you can decide how your page looks by adding CSS within the media queries.
Take a look at this site for further clarity:
https://www.w3schools.com/css/css3_mediaqueries.asp
I am creating a website with form fields, tables with headers, etc...
My problem is that I am afraid that when I change the language, some of the formatting will be messed up. Such things like 1 lines becoming 2 and headers being cut off by the small width of a column will make the page look weird.
What are some options and paths to go down. Do they scale well for an application with almost 100 pages?
Well - you always should create websites with flexibility in mind. To solve the problem, you must ensure you aren't using fixed sizes (width, height and others).
No need to localize, just add more english words and see how the layout reacts. Resize the screen to mobile and you can also check the behavior.
To easily allow flexible content, I almost always end up using CSS flexbox and calc to create layouts based on relative units.
I have a question about bootstrap.
So basically, depending on the device, I want to show a different image. Using media queries, I was the changing the content of the depending on the device's size.
However, I just learned about the visible classes in bootstrap, and I tried them out, and they gave the same result, except that all images are loaded, and they are hidden. So I was wondering: which method is more efficient?
I would say the first method is more efficient because you only load the image that you need based on the device size. It would decrease the number of outgoing requests and allow faster initial page load.
Certainy the Bootstrap classes because it's faster mobile-friendly development. These can be used for showing and hiding content by device via media query, combined with large, small, and medium devices.
They make developers work more simple and simple and the feasibility to hide excess of ifo in smaller devices and vice versa
I'm kind of sure this is not possible but I ask because it seems unbelievable.
I have some elements styled for reponsive design
img {max-width:100%;height:auto;}
but the images have to be different depending on the device (I won't load heavy wide screen images on a phone device).
Since media queries aren't supported inline, I could go for a css background solution, but background-size is not perfectly supported and honnestly it would look more like a hack.
Can anyone confirm that "widely supported device related responsive images" are not properly possible ?
Thanks
If I understand your question correctly, you are looking for a way to deliver a different image depending on the viewpoint.
Adaptive Images could be the solution you are looking for. Easy enough to setup and confirm.
A second possiblity which might give you even more control is Adapt.js . I've used it with good success on several sites. You load a small javascript file in the head of your document. This tests viewpoint width and then dependending on the results, it will send the appropriate CSS file. It has wider browser support than #media requests.
If you could live with using background images, then it would work well, and since you could specify different images for different viewpoints, you aren't up the creek with browsers that don't understand background image sizes.
Good luck!
You could try the Responsive Img jQuery plugin.
It's made to automatically create and swap in different-sized images at different breakpoints, based on the container's width.
If you already have different versions on your image created and on your server, the plugin will just swap those in at the right breakpoint sizes.
Therefore, you can create new images for all the different breakpoint sizes you want, and the plugin takes care of the rest.
It's not CSS, but it gets the job done.
2014 update
There is a nice and new technique here :
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
It requires a small js, a 1x1px blank image, a few extra markup for img tags, and some .htaccess rules.
Seems to work fine so far.
How to change dimension of a webpage. I want to build a mobile website and thus the width should not be greater than 320. Is there any way to change dimension.
Also what should be the steps to build a mobile website.
I assume you are using a fixed width layout like the 960 grid system?
You have two options:
Build a separate 'mobile' version of your whole website, and switch to that by detecting the phone in the HTTP headers.
Use a fluid design, so your website design can squeeze into any space you put it into.
If you choose the latter, take a look at http://cssgrid.net/ - this allows your website to fit onto large widescreens and tiny mobile screens, with only one design!
Got the answer. By making a table of desired width. Working perfectly.