There's a solution on js -
codepen.io/skovtun/pen/VwLvXPB
Can't make an analog for Angular8+.
I need the center block to have a fixed width (1200px), and it is evaluated and compressed by the left, right and both sidebars immediately when they are opened. They should not overlap with the content.
I seen content overlapping when closing sidebars. May be you want to stop overlapping during open and close sidebar. It can be fixed by css. You can use transition in .wrapper class. see bellow code:
.wrapper{
height: 100%;
transition:all .25s;
}
You can achieve this with pure CSS.
You haven't specified what the requirements are, but you can use flexbox like the below example to achieve a max-width main container flanked by 2 compressing sidebars.
body {
margin: 0;
}
.wrapper{
display: flex;
}
main {
width: 1200px;
padding: 20px;
background-color: #f1f1f1;
}
.sidebar {
flex-grow: 1;
height: 100vh;
padding: 0 15px;
}
.sidebar-left {
border-right: 1px solid #06A52B;
}
.sidebar-right {
border-left: 1px solid #06A52B;
}
<div class="wrapper">
<aside class="sidebar sidebar-left">
<h2>Left sidebar</h2>
<p>Add content here</p>
</aside>
<main>
<h1>Max width of this block is 1200px</h1>
</main>
<aside class="sidebar sidebar-right">
<h2>Right sidebar</h2>
<p>Add content here</p>
</aside>
</div>
You Can Dynamic every css class Using [ngClass] Depending on your logic ..it will render when the value will change..
Related
I am using ReactJs to learn to build a site
<div>
<div className = "Home">
<div className = "wrapper">
<div className= "one" >
<img src={image} alt="clock" height = '590px' width='590px'></img>
</div>
<div className="two">
<center>
<p>Perfect tool to get your </p>
<p> service on <mark className = 'ser'>Word</mark></p>
</center>
<div className = 'btn_see'>
Explore
</div>
</div>
</div>
this is the code on js page
and here is css code for div:
.wrapper {
border : 2px solid #000;
overflow:hidden;
}
.wrapper div {
min-height: 200px;
padding: 10px;
}
.one {
float:left;
margin-right:20px;
width:50%;
border-right:2px solid #000;
}
.two {
overflow:hidden;
margin:10px;
border:2px dashed #ccc;
min-height:170px;
}
/*mobile*/
#media screen and (max-width: 800px) {
#one {
float: none;
margin-right:0;
width:auto;
border:0;
}
}
while on desktop, it works as intended but on mobile, it should go one below the another which it does not instead it stacks on one another is something wrong with my code.
How it should and is looking on desktop
side by side div
How it should look on mobile but isn't
top bottom div in responsive
is something wrong with my code, please help I am new.
I'm not seeing any element with ID one in your html, so i'm assuming you want to select the class name, in which case your selector in the media query should be .one as you've written above and not #one. # is used to select IDs . is used to select classes.
There are different approaches to make this happen.
1. Flex Box System
2. Grid System
Hint: You can do it with flex box and when it turns into its mobile version, all of the blocks must be in a horizontal direction.
You can use either Grid or Flex. They are both ways to make a layout responsive and with a lot of features that will make this task easy. Below is a snippet on how you could make it stack on mobile using flex. Also, here's some references on both grid and felxbox. Use whichever seems more fitting to your needs:
Grid: grid
Flexbox: Basic concepts of flexbox
#wrapper{
display: flex;
flex-direction: row;
}
#one {
background-color: #808080;
}
#two {
background-color: blue;
}
#wrapper div{
min-height: 200px;
padding: 10px;
}
#media screen and (max-width: 800px) {
#wrapper {
flex-direction: column;
}
}
<div id="wrapper">
<div id="one">
I'm the first
</div>
<div id="two">
I'm the second
</div>
</div>
I am having an issue with the position-fix; top 100px;. when I use position-fix; top 100px; and run the program, the result will be "google scroller doesn't show up on the screen". when I don't use when I use position-fix; top 100px; then google scroller shows up on the screen.
Here is the HTML code.
<body>
<section class="container">
<div style="position:fixed; top:180px" class="First">
<ul id="ListName" class="">
<li><a style="text-decoration:none" href="interest.html"> Interest </a></li>
</ul>
</div>
<div style="position:fixed; top:180px;" class="Second">
<h1 align="center"> sport</h1>
<p>
<ul>
<li> soccer and,</li>
<li> football </li>
</ul>
</p>
</div>
</section>
<div id="" class="" style="clear:both;"></div>
</body>
Here is the CSS code.
<style>
.container {
width: 99%;
height: auto;
margin: auto;
padding: 10px;
font-family: Verdana,Geneva,Tahoma,Arial,Helvetica,sans-serif!important;
}
.First {
height: auto;
width: 20%;
background: white;
border:1px solid #666;
float: left;
}
.Second {
margin-left: 21%;
height: auto;
width:640px;
border:1px solid #666;
background: white;
}
</style>
Your requirement is bit confusing, it's not clear that whether you want to make the second div inside the section element scrollable then you can do it by adding a height or max-height property to the Second class.
Same holds true for any container scroll bar appear only when the content inside a div or any container exceeds the height specified.
If you want to make second div scrollable, you need to do following.
.Second {
height:100px !important;
overflow-y: scroll !important;
margin-left: 21%;
height: auto;
width: 640px;
border: 1px solid #666;
background: white;
}
If you want to make body element scrollable then you can set a height property or when your content increases the automatically body will be scrollable.
checkout the fiddle here.
I have added a width property to the second div in order to make it fit in the fiddle window.You may remove it. Also pasted some sample text inside body to demonstrate that body is scrollable when it has enough text or if you want a set a fix height you can do that as well.
NOTE: you need to set the property value with !important so that it overrides and forces browser to apply that css.
height:100px !important;
Hope it helps!!
I have inherited somebody else's problem. The HTML is all DIVs with floats, displays and positioning tweaks. The one thing I cannot change is the structured of the HTML DIVs. Nor do I wish to add any new javascript libraries. But I can add all the CSS I need to the existing DIVs.
Currently 3 DIVs are embedded as:
<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow">
<DIV> 2 </DIV>
<DIV> 3 </DIV>
</DIV>
Take a look at the graphic below. The problem with this is that as DIV1 grows down, the DIV3 gets bumped down. I wish to keep DIV3 fully justified from the top to bottom (as if STRETCH).
Without getting into how the current code combines DISPLAYS, FLOATS, and POSITIONING -- I think I need to erase all the CSS and replace with some FLEXBOX. But I cannot seem to get the right combination of FLEX properties to make DIV3 behave to stretch (instead of getting bumped down).
Fortunately, this only has to work for Chrome on Desktop (no mobile nor other browsers).
There you go IF width of div 3 is known and fixed value:
https://codepen.io/AugustinF/pen/qYBpmR
.wrapper {
position: relative;
border: 2px solid black;
}
#firstrow {
height: 100px;
margin-right: 200px;
background: green;
}
#secondrow {
}
#div2 {
float:left;
background: blue;
}
#div3 {
width: 200px;
position: absolute;
top:0;
right:0;
height: 100%;
background: red;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
HTML:
<div class="wrapper clearfix">
<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow clearfix">
<DIV id="div2"> 2 </DIV>
<DIV id="div3"> 3 </DIV>
</DIV>
</div>
Using #Pete solution you can modify the HTML structure using javascript by placing this code at the end of the body tag:
<script>
document.getElementById('firstrow').appendChild(
document.getElementById('div2')
);
</script>
I can align two div's by simply setting their display to inline-block and using same line-heights like shown in the below:
However, what I want is that aligning two nested divs according to the baseline of the inner divs like this:
I can achieve this also using jquery by taking the longest heading's height and set all the headings' height to this value.
var fitSizes = function () {
var h = 0;
$('h1').each( function(){
if(h < $(this).outerHeight()) h = $(this).outerHeight();
// select biggest height
});
$('h1').each( function(){
$(this).outerHeight(h);
// set all h1 heights to the biggest height
});
};
fitSizes();
But for some reasons I don't want to use js or jquery. Is there any "CSS only" way to achieve something like that?
Any solution I can think of here seems hacky, as are usually problems of this nature. There is ALWAYS a scenario where they will break. A programmatic approach, however bloated and ugly, will definitely give you exactly what you want.
I'm going to make an assumption that both the header and the content are of varying lengths and there may be more than just 2 on page either on a single line or multiple.
TOP DOWN APPROACH // fixed header height
There's no reason why your approach above won't work for a nested div. I would wrap the h1 if you're applying styles to it though. Setting a line-height on a h1 if it breaks across lines will cause each line in the multiline to have that line height. Wrap the header in a div and give that a static height, that way if the has styles such as a background won't be affected by the "margin".
<style>
.wrapper {
height: 2.5rem;
line-height: 2.5rem;
text-align: bottom;
// flex approach works too
}
h1 {
line-height: 1rem;
}
</style>
...
<div class="container">
<div class="wrapper">
<h1>title</h1>
</div>
<div class="content">
<p>lorem ipsum....</p>
</div>
</div>
"BOTTOM UP" APPROACH // fixed content
This would work better if the "anchor" for these components is the bottom of the page. If your content varies in length you could fix the height of the container and content.
<style>
.container {
text-align: bottom;
}
h1 {
line-height: 1rem;
}
.content {
height: 15rem;
overflow: elipsis;
}
</style>
...
<div class="container">
<h1>title</h1>
<div class="content">
<p>lorem ipsum....</p>
</div>
</div>
You could do it with flexbox, you could set make the outer div's siblings by making a container around them and do something like this:
.container {
display: flex;
align-items: flex-end;
}
If this does not fulfill your needs you could also try and see if align-items: baseline; fixes it. Just have a look at flexbox.
What You are looking for using flexbox.
.root {
display: flex;
height: 300px;
border: 2px solid black;
}
.container {
display: flex;
/* position at bottom of container */
margin-top: auto;
/* spread inside container */
flex-grow: 1;
/* align items in row and center it verticaly */
flex-direction: row;
justify-content: center;
}
.column {
display: flex;
margin: auto 5px 5px;
padding: 20px;
/* spread inside container */
flex-grow: 1;
/* align items in column, and position content at the bottom */
flex-direction: column;
justify-content: flex-end;
border: 2px solid blue;
}
.row {
margin: 5px;
padding: 10px;
border: 1px solid red;
text-align: center;
}
<div class="root">
<div class="container">
<div class="column">
<span class="row">row one</span>
</div>
<div class="column">
<span class="row">row one</span>
<span class="row">row two</span>
</div>
</div>
</div>
Flexbox is something up and coming that would be really useful to use. It's only growing in popularity.
This can answer many different problems. Such as your justification issue.
Here's a simple fiddle with little code that shows the answer to your problem: https://jsfiddle.net/hkLk53c6/
HTML:
<div class="container">
<div class="flex-item">
Item
</div>
<div class="flex-item">
Item
<br>
Item
</div>
<div class="flex-item">
Item
<br>
Item
<br>
Item
</div>
</div>
CSS:
.container {
display:flex;
justify-content: space-between;
border: 1px solid #333;
}
.flex-item {
width: 33%;
text-align: center;
background: #120321;
color: #fff;
}
Here's a link to Chris Coyier's explanation about Flexbox Properties:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've personally found it very useful in learning more about flexbox.
You can styled based off of the baseline, you can reverse elements, justify them to be the same height both vertically and horizontally. Etc. It's very exciting because now we can get past some hacky fixes. (Like using JS which trust me, you're not the only one to do so far!)
I have a div with other 3 divs inside.
<div id="buttons">
<div id="button1"></div>
<div id="button2"></div>
<div id="button3"></div>
</div>
The width of the main div (buttons) is 100%. If my 3 buttons are visible the width of each button will be 33%, if 2 are visible will be 50% and if only one so 100% the same of the parent...
I know how to modify this values with javascript... but its possible modify only with javascript the display and css modify the width
SORRY BY MY ENGLISH
You can achieve that layout using table & table-cell props, OR via flexbox (or maybe some other methods, but these ones come in mind atm).
Both these methods have pros & cons, but depending on what you're going with you're layout, these should help you out.
According to http://caniuse.com/, flexbox doesnt go to well with older browsers, mainly IE9 and bellow that, check it out: http://caniuse.com/#search=flex
As for the table trick, it has a much better support with older browsers, http://caniuse.com/#search=table, but it has its own little quirks depending on what you want to accomplish using this.
Option 1 - Table Trick:
set the container to display: table & width: yourwidth;
set the children of the container to display: table-cell, this rule will make sure theyll stretch evenly across their parent
done.
View demo here or snippet bellow:
/*option 1*/
.buttons {
display: table;
width: 100%;
}
.buttons > div {
display: table-cell;
}
/*styling purposes*/
.buttons{
margin: 10px 0;
text-align: center;
}
#button1{
background: red;
}
#button2{
background: green;
}
#button3{
background: cyan;
}
<h1>Table trick</h1>
<div class="buttons">
<div id="button1">1</div>
<div id="button2">2</div>
<div id="button3">3</div>
</div>
<div class="buttons">
<div id="button1">1</div>
<div id="button2">2</div>
</div>
<div class="buttons">
<div id="button3">3</div>
</div>
Option 2 - Flexbox:
set the container to display: flex
set the childrent to flex: 1 100% so that theyll stretch evenly across their parent
View demo here or snippet bellow:
.buttons-flex {
display: flex;
}
.buttons-flex > div {
flex: 1 100%;
}
/*styling purposes*/
.buttons-flex {
margin: 10px 0;
text-align: center;
}
#button4 {
background: red;
}
#button5 {
background: green;
}
#button6 {
background: cyan;
}
<h1>Flexbox trick</h1>
<div class="buttons-flex">
<div id="button4">1</div>
<div id="button5">2</div>
<div id="button6">3</div>
</div>
<div class="buttons-flex">
<div id="button4">1</div>
<div id="button5">2</div>
</div>
<div class="buttons-flex">
<div id="button6">3</div>
</div>
Hope this help you out!
Try using the following CSS...
<style type="text/css">
#buttons
{
width:100%;
display:table;
}
#button1
{
background:red;
width:34%;
display:table-cell;
}
#button2
{
background:green;
width:34%;
display:table-cell;
}
#button3
{
background:blue;
width:34%;
display:table-cell;
}
</style>
As the buttons are hidden, the remaining buttons take up the remaining space of the #buttons container.
Think of this as displaying a set of tds in a table