I have 2 columns on my page... my issue is that I want the right column to stack underneath my left column if browser size is made smaller. I am using angular material but don't mind using custom styling to fix this. Any help will be appreciated.
HTML:
<div layout="row" layout-align="center center" flex>
<section layout="row">
<div id="nav" flex="20" layout="column" layout-align="space-around">
<md-calendar class="fixed-calendar" ng-model="myDate"></md-calendar>
</div>
<div id="content" flex>
<h2>Right Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
</div>
</section>
</div>
CSS:
.datepickerdemoBasicUsage md-content {
padding-bottom: 200px; }
.datepickerdemoBasicUsage .validation-messages {
font-size: 11px;
color: darkred;
margin: 10px 0 0 25px; }
.fixed-calendar {
width: 340px;
height: 340px;
display: block;
}
.fixed-calendar .md-calendar-scroll-mask {
width: 340px !important;
}
.fixed-calendar .md-virtual-repeat-scroller {
width: 340px !important;
height: 308px;
overflow: hidden !important;
}
JSFiddle Demo
Something like this on your parent layout="column" layout-gt-xs="row"
<div ng-app="sandbox">
<div>
<section layout="column" layout-gt-xs="row">
<div id="nav" flex>
<md-calendar class="fixed-calendar" ng-model="myDate"></md-calendar>
</div>
<div id="content" flex>
<h2>Right Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
</div>
</section>
</div>
</div>
This says stack child elements into a column.
Then if the browser width gets to greater than or equal xs (>= 600px), make child elements into a row.
Fiddle
Related
My titles are very long I want them to look like this:
This is a title of...
This is my code
<CardContent>
<Typography gutterBottom variant="h5" component="div">
<Link href={`/${encodeURIComponent(data.slug)}`}>
<a>{data.title}</a> // This is a string of title text
</Link>
</Typography>
</CardContent>
How to limit them to 18 characters only and add ... at the end?
Usually you solve this with CSS.
Set a max-width together with text-overflow: ellipsis;.
The advantage is better SEO and the browser is able to use the available space more efficiently than just counting characters.
For example a M character is larger than a l character.
But you can also limit it with JS:
<CardContent>
<Typography gutterBottom variant="h5" component="div">
<Link href={`/${encodeURIComponent(data.slug)}`}>
<a>{data.title.length <= 18 ? data.title: (data.title.substr(0, 18) + "...")}</a> // This is a string of title text
</Link>
</Typography>
</CardContent>
You can use simple custom css to limit this
span {
display: inline-block;
width: 200px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
<span>
rem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Donec vitae arcu. Nullam eget nisl. Etiam commodo dui eget wisi. Praesent vitae arcu tempor neque lacinia pretium. Aenean fermentum risus id tortor. Proin mattis lacinia justo. Integer vulputate sem a nibh rutrum consequat. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit.
</span>
I want to create a div of max width 200px; how can i auto increase the height in my div? can some help me which css properties should i use ?
my use case is my width of box should be constant but the text i keep in the box should not come out of the box and if excess is there height of the box should increase dynamically ?
This can be easily done. You can use below code :
min-height: 100px;
overflow: hidden;
Let me know if it doesn't resolve, I will help you with this.
If you set width of your div, it's height will automatically adjust to fit the content. There is nothing you need to do for this to work.
div {
max-width: 200px;
/* For clarity */
border: 1px solid black;
}
<div>Hello</div>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam quis nulla. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Cras pede libero, dapibus nec, pretium
sit amet, tempor quis. Vestibulum fermentum tortor id mi. Mauris dictum facilisis augue. Etiam quis quam. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Curabitur sagittis hendrerit ante. Integer vulputate sem a nibh rutrum consequat. Nulla quis diam. Mauris elementum mauris vitae tortor. Aenean placerat. Nunc tincidunt ante vitae
massa. Pellentesque sapien. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Cras elementum. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Itaque earum rerum hic tenetur a sapiente
delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Mauris elementum mauris vitae tortor. Integer imperdiet lectus quis justo. Duis risus. Etiam egestas wisi a erat. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi scelerisque luctus velit.
</div>
I am making a blog Component with React.
By giving createContext to a separate blogData.jsx, the contents of data.JSON were brought as it is. (It was put in a variable)
Since the value of the "thumbnail" key is '/assets/post-img1.jpg' and in my Local it is '../../assets/post-img1.jpg', So I wrote the following in Post.jsx.
// Post.jsx
<img
className="postImg"
src={`../..${thumbnail}`}
alt=""
/>
<img src={`../..${profileImg}`} alt="" />
The results confirmed in Developer Tools Elements are as follows. Path is correct.
// in Developer Tools Elements
<img class="postImg" src="../../assets/post-img6.jpg" alt="">
<img src="../../assets/profile.jpg" alt="">
However, the image is not rendered and an alternate image(x box?) is displayed.
react-blog
├── package-lock.json
├── package.json
├── node_modules
├── public
│ ├── data.json
│ ├── index.html
│ └── reset.css
│
└── src
├── assets
│ ├── post-img1.jpg
│ └── ...
│
├── components
│ ├── banner
│ ├── footer
│ ├── post
│ ├── posts
│ ├── sidebar
│ ├── thumbnail
│ └── topbar
│
├── contexts
│ └── blogData.jsx
│
├── pages
├── App.jsx
└── index.js
blogData.jsx ↓
import { createContext } from 'react';
const blogData = createContext(
{
"blog": {
...
},
"posts": [
{
"id": 1,
"thumbnail": "/assets/post-img1.jpg",
"title": "Dipisicing elit. Inventore illum nostrum perferendis.",
"mainBg": "/assets/post-background1.jpg",
"category": ["Life", "style"],
"profileImg": "/assets/profile.jpg",
"contents": [
{
"type": "p",
"text": "Adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel."
},
{
"type": "img",
"src": "/assets/post-background1.jpg"
},
{
"type": "p",
"text": "Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel."
}
],
"userName": "Chilli",
"created": "2022.04.01"
},{...},{...},{...},{...},{...}
],
"users": [
{...},{...}
]
}
);
export default blogData;
Post.jsx ↓
import "./post.css";
export default function Post({data}) {
const {id, thumbnail, title, category, contents, profileImg, userName, created} = data;
return (
<div className="post">
<img
className="postImg"
src={`../..${thumbnail}`}
alt=""
/>
<div className="postInfo">
<dl className="postCats">
<dt className="hidden">Category</dt>
<dd className="postCat">
{category}
</dd>
</dl>
<h3 className="postTitle">
{title}
</h3>
<dl className="authorWrap">
<dt className="hidden">Author</dt>
<dd className="author">
<img src={`../..${profileImg}`} alt="" />
{userName}
</dd>
<dt className="hidden">post date</dt>
<dd className="postDate">
{created}
</dd>
</dl>
<p className="postDesc">
{contents[0].text}
</p>
</div>
</div>
);
}
Posts.jsx ↓
import React, { useContext } from "react";
import Post from "../post/Post";
import "./posts.css";
import blogData from "../../contexts/blogData";
export default function Posts() {
const { posts } = useContext(blogData);
const postArray = [];
for (let i = 0; i < posts.length; i++) {
postArray.push(<Post key={i+1} data={posts[i]} />);
}
console.log('postArray', postArray);
return (
<div className="posts">
{postArray.reverse()}
</div>
);
}
I have a text that has a lot of characters, and I need to limit what is displayed on screen to 20 chraracter only, what do I do?
Example: if I wish to display only 20 character of the following text, what should I do?
function App() {
return (
<>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
accusamus nostrum harum! Tenetur incidunt saepe explicabo rerum et
cumque architecto reiciendis, deleniti asperiores animi? Perspiciatis
vel nemo vitae nulla iure itaque iste pariatur aliquam unde quis magni,
quasi culpa in quisquam, sunt, corrupti ipsa! A sunt consectetur
aspernatur porro, exercitationem quasi, quibusdam mollitia numquam, aut
veniam voluptate? Esse, animi quibusdam voluptatem eligendi aliquam
minima nam impedit eum dignissimos praesentium, quae consequuntur,
deserunt neque? Tenetur, quae nihil. Sit, iure, itaque placeat beatae
distinctio nesciunt quisquam fugiat illo quod eius, architecto optio.
Rerum repudiandae perferendis vero laborum obcaecati vel aliquam quod
distinctio in id similique, quisquam odit accusantium quos veritatis
animi autem iste possimus, odio corrupti. Perferendis tenetur, non quis
animi rerum earum error sed officiis sint expedita et ipsum? Omnis nihil
non, tenetur veniam officiis repudiandae nobis, ab commodi inventore sed
maxime. In porro quo perspiciatis facilis. Maxime saepe, ipsa autem
eligendi cumque delectus provident vel aliquam fuga aut laborum facere
beatae repellendus, minus in quae exercitationem porro! Quod nesciunt
libero natus exercitationem beatae, accusamus maxime sint aliquam
voluptate aspernatur in dignissimos perferendis quo minima odio omnis,
officiis neque ullam, et commodi perspiciatis. Explicabo error ea
necessitatibus reprehenderit consequuntur inventore reiciendis!
</p>
</>
);
}
export default App;
You can use CSS using the ch unit I believe.
.Twenty_characters{
font-family: monospace;
width: 20ch;
overflow: hidden;
white-space: nowrap;
}
That being said I think you have to use a monospace font for this to work. Which might not be something you want to do.
I'm facing cross browser layout issues using angular material v1.0.6.
I'm aiming at having a header, a footer, and two equally wide panes in between covering all available space. The left pane must be scrollable.
This is the basic layout:
<div layout="row" style="height:100%;">
<div layout="column" flex>
<header flex="nogrow">
<h1>HEADER</h1>
</header>
<section flex layout="row">
<div flex id="pane-one" layout="column">
<md-content flex>
<md-content layout-padding>
<p>I am the scrollable content.</p>
</md-content>
</md-content>
</div>
<div flex id="pane-two" layout="column">
</div>
</section>
<footer flex="nogrow">
<h2>FOOTER</h2>
</footer>
</div>
</div>
Now while everything works as expected in Chrome (48.0.2564), Firefox (44.0.2) does not make the left pane scrollable. It just gives it as much hight as it needs. Safari (9.0.2) behaves even differently still, but it's not that far of from Chrome.
I have prepared a little codepen to illustrate the problem:
http://codepen.io/creimers/pen/pyJGpm
Am I applying the angular material grid in a wrong way?
It seems to me that you need to replace the section with another md-content. I cannot really say why, but it yields the desired behavior.
I forked your codepen here: http://codepen.io/anon/pen/vGLgmR
I was having similar issues so I created a new project based on John Papa's HotTowel Angular.
https://github.com/aaronklaser/hottowel-materials
It's also worth noting that flex is still relatively young and not fully supported everywhere.
check this
<body ng-app="MyApp">
<header flex="nogrow" id="c1">
<h1>HEADER</h1>
</header>
<div flex id="scenario" layout="row" style="height:100%;">
<md-content flex=50 id="noscroll"><p>noscroll</p></md-content>
<md-content flex=50>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
</md-content>
</div>
<footer flex="nogrow" id="c3">
<div layout="row" layout-padding>
<h3>FOOTER</h3>
<md-button class="md-fab"></md-button>
</div>
</footer>