How can I maximize the size of the div that plays the role of "content"?
I recognize that this may simply be a basic CSS question, but it feels like it is tied to CSS in jQueryMobile.
I'm placing a Google Map in the content div and I'd like the map to fill the available verticle space on the mobile browser. Instead, it's a fixed size of about 10px (give or take).
<div data-role="page">
<div data-role="header" class="ui-header ui-bar-a">Header</div>
<div data-role="content" class="ui-body ui-content">
<div id="divMap">google map via javascript</div>
</div>
<div data-role="footer">footer</div>
In this case, jQueryMobile always creates the minimal size for its contents, and I always want it to be 80% of the available page.
You could probably use jQuery (I haven't worked with jQuery mobile, though, so this might not work directly):
$(document).ready(
function(){
$('#content').height($(window).height()*0.8);
}
);
JS Fiddle demo
Related
I'm creating a page where I have a parent div which encapsulates multiple child divs from different components in a NextJs project.
I have a preview option where my customers can preview their changes in mobile and desktop view.
I'm able to switch to mobile view using iframe. I want to achieve this without using an iframe.
Even though I change the parent div max width, because the rest of components have sm md lg xl which are taking the values from the view port instead of the parent div I'm unable to solve it.
What should be the approach to solve this?
The simplest way to access children in Tailwindcss is to class [&>] to the parent div. For example, let's say you have 5 child divs. If you want to give an attribute to the last of them [&>div:last-child]:bg-blue-500 , if you want to make it responsive, max-md:[&>div:last-child]:bg-blue-500 you have to express. I have prepared a demo for you to make it more meaningful, you can check it from the link below. If you expand the preview screen on the right a little, you will see that the colors have disappeared. I hope it can solve your problem.
Demo Code
Not sure what you meant complelty
<div class="max-w-full sm:max-w-full md:max-w-3xl lg:max-w-4xl xl:max-w-5xl">
<div class="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl">
For small screen sizes
</div>
<div class="flex-sm-row sm:flex-row md:flex-col lg:flex-col xl:flex-col">
<div class="w-sm sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
This for 50% width
</div>
<div class="w-sm sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
This for 50% width
</div>
</div>
<div class="hidden sm:hidden md:block lg:block xl:block">
For large and extra-large screen sizes.
</div>
</div>
Media breakpoints allows you to change content appearance based on viewport size. Tailwind's media variants like md:, lg: etc based on them. In order to change content based on parent's size you should use CSS Container Queries. Be aware - they are not production ready - about 75% browser support (actual at December 2022)
Container queries allow us to look at a container size and apply styles to the contents based on the size of their container rather than the viewport or other device characteristics.
Tailwind has official plugin which may help you with it. Install it configure within tailwind.config.js
module.exports = {
plugins: [
require('#tailwindcss/container-queries'),
],
}
You need to add #container class to a parent container and use size modifiers on element you need like #md:bg-blue-500.
<div class="#container max-w-full resize-x overflow-auto">
<div class="p-16 #md:bg-blue-500 bg-amber-400">
Resize me
</div>
</div>
This way element should be yellow unless container size is bigger than 28rem and it will become blue no matter viewport size
Produced CSS is
#container (min-width: 28rem) {
.\#md\:bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
}
Check other modifiers here. Please note md:flex and #md:flex are different sizes which may confuse at first
#containers supports labels so you can name containers and specify different CSS for them. Let's say you have reusable component (common situation) you include within loop
<div class="#4xl/aside:bg-red-500 #3xl/primary:bg-yellow-500">
</div>
So within #container/aside element your card will be red after #4xl (56rem) size, while within #container/primary - yellow after #3xl (48rem).
<div class="#container/aside">
<div class="#4xl/aside:bg-red-500 #3xl/primary:bg-yellow-500">
YELLOW
</div>
</div>
<div class="#container/aside">
<div class="#4xl/aside:bg-red-500 #3xl/primary:bg-yellow-500">
RED
</div>
</div>
As I said it's not production ready. The way you want to handle unsupported browsers is up to you. First one - use polyfill. Just add
<script src="https://cdn.jsdelivr.net/npm/container-query-polyfill#1/dist/container-query-polyfill.modern.js"></script>
and it should be enough. However read full docs to improve user experience. I didn't fully tested it myself so cannot guarantee it is 100% solution
Second way is to check does browser supports container queries or not. You can check it via JS
if (!("container" in document.documentElement.style)) {
console.log('No support')
// Do something in that case
}
Another way - via CSS #supports rule
#supports (container-type:inline-size) {
/** Container queries supported */
}
Tailwind has supports: variant for that needs so something like this would work
<div class="supports-[container-type:inline-size]:hidden">
Your browser does not support container queries
Maybe show iframe element as backup (?)
</div>
<div class="supports-[container-type:inline-size]:block hidden">
Here is my cool feature which will be hidden if browser does not supports container queries
</div>
I've created this demo playground without polyfill to check different cases depends on container and window size plus different types of container and browser support
A solution to this can be adding a w-screen to parent div.
Use w-screen to make an element span the entire width of the viewport.
Documentation
Given some very basic html using flexbox, I can achive a screen with a header, footer and a content area that fills all the space in between:
<html>
<body style="display:flex;flex-direction:column;flex-grow:1">
<div style="display:flex;flex-direction:row">Header</div>
<div style="display:flex;flex-direction:row;flex-grow:1">Content Area</div>
<div style="display:flex;flex-direction:row">Footer</div>
</body>
</html>
Header displays at top, footer at the very bottom.
+++++++++++++++++++++
+ Header
+ Content Area
+
+
+
+
+ Footer
+++++++++++++++++++++++++
However, if I try to achieve the same thing within Aurelia (using the webpack starter kit) the grow seems to be ignored on both the body and the content elements.
index.ejs -- comes with starter kit I added styling to original file
<body aurelia-app="main" style="display:flex;flex-direction:column;flex-grow:1">
app.html -- changes to original starter kit file
<template>
<div style="display:flex;flex-direction:row;">Header</div>
<div style="display:flex;flex-direction:row;flex-grow:1">Content Area</div>
<div style="display:flex;flex-direction:row;">Footer</div>
</template>
I also tried adding flex to <template style="display:flex;flex-direction:column;flex-grow:1">
Everything looks good when you inspect the page -- in fact, looks almost exactly like the basic html example. However, the body and the div containing the Content Area do not grow to fill the height of the page.
I tried to get an example working in Plnkr but it actually has the same problem as Aurelia. I noticed that it is using shadow element just like Aurelia does -- I'm guessing that may have something to do with it?
For it to work with Aurelia (or alone), you should layout the markup like this
<body aurelia-app="main" style="height:100vh;margin:0;display:flex;flex-direction:column;">
<my-template style="display:flex;flex-direction:column;flex-grow:1">
<div style="display:flex;">Header</div>
<div style="display:flex;flex-grow:1">Content Area</div>
<div style="display:flex;">Footer</div>
</my-template>
</body>
where the <template>, if it gets rendered, needs to be <my-template> for it to work, as the <template> tag has a special meaning and won't render visually, see MDN; https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template.
Then the body (or any main element) needs a height, and here I used height:100vh.
Also do note, the flex-grow you had on the <body> won't apply if not its parent, the <html> also has display: flex
Hy, I have the following situation:
I am trying to change the design of my feedly-index page. (I can not change the HTML)
And I am facing a problem I coulnd't solve the past two hours.
In the HTML there are some div elements with random IDs and '_content' at the end.
Within these div's there is an img tag - what I want to do is to wrap this img-tag with an anchor-tag to make it clickable.
Situation:
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<img src='LINK_TO_AN_IMAGE'>
</div>
What I want as outcome:
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<a href='LINK_TO_AN_IMAGE'>
<img src='LINK_TO_AN_IMAGE'>
</a>
</div>
Is this even possible with CSS?
I could make it work with JavaScript, but the div's are loaded dynamically via AJAX:/
So the JavaScript Script would just run for the current div's but not the one which are loaded dynamically.
It's not possible with just CSS because CSS is meant or styling the page and not or adding dynamic elements to the page.
But we can do it using JS.
As you are creating those elements using ajax call. On the success callback of the ajax call, you can wrap the image with a tags.
for example:
$.ajax({
url : "/make.php"
}).done(function() {
var images = $("div img");
$.each(images, function() {
$(this).replaceWith($("<a href=''>"+this.outerHTML+"</a>")); //construct url dynamically via some variable
});
});
DEMO
If you are not able to edit the html this could be tricky.
It can't be done with pure css... css can't create links.. I mean it could be possible with js i suppose, besides that if the ids are random it makes it even more difficult.
--edit additional--
If you could wrap the whole area that holds the divs inside a div then you might have a chance with jquery...
e.g:
<div id="holderdiv">
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<img src='LINK_TO_AN_IMAGE'>
</div>
</div>
You can then use jquery to make all instances of #holderdiv > div > img a link to the image path?
I think my last question was misunderstood. I have pasted below, the HTML of the page I am having troubles with, but you can see it here: http://jsfiddle.net/wCZYU/6/
Basically I would like a fixed header (pageHeader) and a colored div that fills the browser window, NOT the entire page background. I then would like a div under this that the user will be required to scroll to see
<header class="pageHeader">
<div class="setWidth">
<div class="navMain">
Home
Work
Blog
Contact
</div>
</div>
</header>
<div class="secFill">i want to be below the navigation</div>
<div class="content">i want to be below secFill</div>
This is the image that I posted earlier that I want it to look like
http://i.stack.imgur.com/jZgMb.png
The navigation must be fixed and compatible in ie7/8.
Thanks alot (again)
If I'm understanding correctly, you just need to define .secFill as height:100%.
.secFill {
height:100%;
background-color:red;
}
http://jsfiddle.net/wCZYU/7/
I read about semantic HTML online...
Semantic HTML means using HTML tags for their implied meaning, rather than just using (meaningless) div and span tags for absolutely everything.
If you use <h1> instead of <div class="header">, and <h2> instead of , et cetera, Google and other search engines will interpret your headers as being important titles in your page. This way, when people search on the words in your headers and sub-headers, your page will be considered more relevant (and rank higher). Plus, it's much shorter and cleaner.
So, below is semantic,
<h1>My Website Name</h1>
<h2>My Website Tagline </h2>
What about this below?
<div id="header">
<h1><span class="hide">My Website Name</span></h1>
<h2><span class="hide">My Website Tagline</span></h2>
</div>
I tend to combine h tags with div and span tags like above - is this practised considered as the lack of semantic?
The reason why I have the span with the hide class is that I want to display the site logo instead of text. So use CSS to set the background of h1 as image and then hide the text. is this incorrect practise?
Then, if I don't use div, what can I use to make a box around the h1 and h2?
As far as I know, html 5 is not fully ready yet, we must not use <header> yet, must we??
Thanks.
I would do something like the following if I was going to use HTML5:
<header>
<hgroup>
<h1>My Website Name</h1>
<h2>My Website Tagline</h2>
</hgroup>
</header>
Remember to add display: block; to the HTML5 elements and createElement for IE in the CSS though. The header element shows the block is a header and the hgroup element is there to show that the second h* element is a sub heading, so shouldn't be taken into account when calculating the header levels in the document.
If you don't want to use HTML5 yet then you could use divs instead of the new elements, and use the HTML5 element names as the class value. This will make it easier to switch over when you feel comfortable using HMTL5 on a live site.
You don't really need to use the span elements. You can use tricks such as using a large negative text-indent in the CSS to hide the text off the screen.
If you want to display a logo instead of text, use an image. Google say so (even if they don't know the difference between a tag and an attribute). Taglines, BTW, are not subheadings (and the site name (and thus logo) is usually only a heading on the homepage).
<div id="header">
<h1><img src="foo.png" alt="My Website Name"></h1>
<p><img src="foo.png" alt="My Website Tagline"></p>
</div>
Unfortunately, Internet Explorer 8 does not recognize many HTML5 tags, and when I've tested it, I was unable to set CSS values for the <header> tag, for example. So for now I would recommend that you continue to use div tags to group your semantic meaning.
As a sidenote, Google does not like hidden text, and if you have a lot of it, it will consider it deceptive coding. One is probably fine, but you'd be better off using the alt attribute on the image tag.
Nobody suggested that you should not use DIVs at all... semantic HTML does not mean there cannot be div or span tags in your code. It just only means that whenever possible (there is a specific tag available for a specific semantic meaning) you should try to give semantic meaning.
h2 is not to be used for taglines, as somebody else already suggested.
Also, in my interpretation (some will argue), h1 is not for the name of your website. It is the title for the content on a specific page.
I agree with #David Dorward, the tag line should be in a p tag.
Your example (wrapping the header elements with a div) is perfectly acceptable, though I would like to raise a small caution: Be careful that you do not get in the habit of wrapping everything in div tags. For example:
<div class="content">
<div class="list">
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
</div>
Since a ul tag is already a block element, the above markup would be better off like this:
<div class="content">
<ul class="list">
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
And then just style the ul to look like the div.
On the matter of displaying the logo as an image:
If your logo is text-based, or has text in it, you would be better off doing the following:
HTML
<div id="header">
<h1 class="logo">My Logo Text - My Website Tagline</h1>
</div>
CSS
.logo { text-indent:-9999px;background-image:url(thelogo.jpg) no-repeat;}
/* Also add height and width based on your logo height and width */