Today, while playing with new angular I faced problem as attached:
The "tags" are expanding throughout the parent container (the white div). They wrap, but badly, as you see.
I would like them to do not break in the middle of the word, but in this case the "software engineering" should be entirely in the second row.
The tags are encapsulated in div as follows:
<div class="menu-block">
<div class="menu-header">
<strong>» Tags</strong>
</div>
<div class="menu-content tags">
<tags></tags>
</div>
</div>
And the appropriate CSS classes:
.menu-block {
border-bottom: 1px solid #eeeeee;
padding: 1.2em;
border-left: 1px solid #eeeeee;
background-color: #fcfcfc;
}
.menu-block .menu-header {
margin-bottom: 1em;
font-size: 14pt;
}
.menu-block .menu-content {
font-size: 11pt;
/* See the specifications below */
}
.menu-block .tags {
font-size: 11pt;
line-height: 2.2em;
}
The .menu-block element is also encapsulated in bootstrap .col-4.
And the last thing: angular component (I think annotation is enough here):
#Component({
selector: 'tags',
template: `
<a *ngFor="let tagFeed of tagFeeds" class="tag" href="/tag/{{tagFeed.id}}">{{tagFeed.id}}</a>
`,
})
change in css
.tag {
display: inline-block;
white-space: nowrap;
word-wrap: break-word;
}
online demo http://codepen.io/tieppt/pen/WRyMVZ
Related
I am trying to create a button that has an icon, but when I add the icon the text isnt centered vertically. How can I fix this?
This is the code in HTML & CSS:
<a href="#">
<button class=" account signUp"><span class="icon-profile</span>button</button>
</a>
.signUp {
background-image: var(--orange-background);
border-image: var(--orange-background);
font-family: poppins;
font-weight: 600;
color: white;
}
but when I add the icon the text isnt centered vertically
Put the following two properties on its parent
.parent-of-icon-and-text {
display: grid;
place-content: center;
}
Please don't use a button and a link, choose one that best fits your scenario.
To use a button as a link, you can put it in a form.
.signUp {
background-image: var(--orange-background);
border-image: var(--orange-background);
font-family: poppins;
font-weight: 600;
color: white;
}
<form onsubmit="#">
<button type="submit" class="account signUp"><span class="icon-profile"></span>button</button>
</form>
Corrections
It is invalid HTML to place a <button> inside an <a>nchor. They are both interactive content and should never have inertactive content as a descendant node. <a>nchor has been removed. For more details refer to Can I nest a <button> element inside an <a> using HTML5?.
Typo in HTML, "> missing:
<span class="icon-profile"></span>
In CSS the font-family value of Poppins was misspelt as poppins (font-family values are case-sensitive).
Solution
The OP was incomplete so what is suggested in the example is as generic as possible. In the OP, span.icon-profile needs these two styles:
display: inline-block;
vertical-align: middle
vertical-align will set the tag's contents to a vertical position by either a pre-set value or a legnth value.
display: inline-block or table-cell is required by vertical-align
Further details are commented in the example below
/*
The actual CSS to resolve alignment issues explianed by OP is marked with a ✼ which are `display: inline-block` and `vertical-align: middle`
*/
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
/*
Global default for font
*/
:root {
font: 2ch/1 Poppins;
}
/*
Any rem unit measurements will reference 1rem to 2ch
*/
body {
font-size: 2ch;
}
button,
b {
display: inline-block; /*✼*/
font-weight: 300;
}
.sign-up {
font: inherit;
border-radius: 4px;
color: white;
background: #333;
}
.btn-link:hover {
outline: 1px solid cyan;
color: cyan;
cursor: pointer;
}
.btn-link:active {
outline: 2px solid cyan;
color: black;
background: white;
}
.icon-profile {
font-size: 1rem;
vertical-align: middle; /*✼*/
}
/*
content: '⚙️'
in HTML it's ⚙️
*/
.icon-profile::before {
content: '\002699\00fe0f';
}
<button class="account sign-up btn-link"><b class="icon-profile"></b> Profile</button>
I have managed to put the placeholder plus the dd/mm/yyyy together. When I click in order to key in or select the date, the box resets to its default state. Styles like padding, width, and color disappears but when I click outside the box, it returns to default with the styles in place. I would like it to remain the same when selecting the date. Kindly help.
input {
border: 1px solid #ecf0f1;
color: #00A79D;
}
input[type=date] {
text-align: right;
}
input[type="date"]:before {
color: lightgrey;
content: attr(placeholder) !important;
margin-right: 0.3em;
padding: 11px;
}
input[type="date"]:before {
color: lightgrey;
content: attr(placeholder) !important;
margin-right: 0.5em;
}
input[type="date"]:focus:before {
content: '' !important;
color: #00a79d;
}
<div class="col-sm gutters-19">
<div class="form-group">
<div class="form-select-custom">
<input type="date" placeholder="Departure" onchange="this.className=(this.value!=''?'has-value':'')">
</div>
</div>
</div>
This style content: '' !important; is causing the problem:
input[type="date"]:focus:before {
content: '' !important; /* THIS IS THE PROBLEM */
color: #00a79d; /* This is ok */
}
You are removing all the content (i.e. the placeholder word "Departure") and that is what is adding the width and padding.
FYI you are also duplicating the input[type="date"]:before rule, I've combined them into one.
Snippet with that line removed, and you can see it is working:
input {
border: 1px solid #ecf0f1;
color: #00A79D;
}
input[type=date] {
text-align: right;
}
input[type="date"]:before {
color: lightgrey;
content: attr(placeholder) !important;
margin-right: 0.5em;
padding: 11px;
}
input[type="date"]:focus:before {
color: #00a79d;
}
<div class="col-sm gutters-19">
<div class="form-group">
<div class="form-select-custom">
<input type="date" placeholder="Departure" onchange="this.className=(this.value!=''?'has-value':'')">
</div>
</div>
</div>
You shouldn't use ::before on input date elements, since it's heavily browser-specific
Your styles don't disappear : you make your ::before vanish, and it's the thing making the space inside your input. So your input naturally shrinks. Just play with your input[type="date"]:focus::before content, you'll see what i mean.
Not tested, but you could perhaps avoid your javascript toggleClass by using the :empty state. https://developer.mozilla.org/fr/docs/Web/CSS/:empty
simply set width and height to input tag
input{
height: 39px;
width: 237px;
}
My code currently looks like this:
.data-title {
font-weight: bold;
}
.data-content {
color: gray;
}
<p class="data-title">
Title
</p>
<p class="data-content">
Content
</p>
The result is how I intended it to look:
However, I would like to make the following two changes:
Decrease the margin between the elements.
Have a single class on a parent element instead of the two classes on the paragraphs that automatically identifies the first line and second line and applies the current styles.
<div class="my-class">
<p>Title</p>
<p>Content</p>
</div>
You can use the :first-child selector to select the first element, and then combine this with the + * selecter to get the element following it. To decrease the margin, simply set margin: 0 (or whatever value you see fit) to all paragraph elements in your div (or you could add them to only the ones you already selected, depending on whether there are any other paragraphs that should retain their margin).
.my-class span {
display: block;
}
.my-class :first-child {
font-weight: bold;
}
.my-class :first-child + * {
color: gray;
}
<div class="my-class">
<span>
Title
</span>
<span>
Content
</span>
</div>
If i am right then you are asking for this may be:-
1st method:-
You can use span tag
p {
color: blue;
font-size: 40px;
margin-bottom: 10px
}
p span {
color: red;
display: block;
font-size: 15px;
}
<p>Title<span>Content</span></p>
2nd Method :-
div.main p {
color: blue;
font-size: 40px;
margin-bottom: 0px
}
div.main p+p {
color: red;
font-size: 20px;
margin-top: 0px
}
<div class="main">
<p>Title</p>
<p>Content</p>
</div>
3rd Method:-
div.main p {
color: blue;
font-size: 40px;
margin-bottom: 0px
}
div.main p:nth-child(2) {
color: red;
font-size: 20px;
margin-top: 0px
}
<div class="main">
<p>Title</p>
<p>Content</p>
</div>
Make sure the p-element in the title block loses its margin.
After that: style all elements by their own html class.
<div class="title_block">
<p>Title</p>
<span>Subtitle</span>
</div>
<style>
.title_block p {
margin: 0;
font-size: 28px;
font-weight: bold;
}
.title_block span {
font-size: 20px;
}
</style>
I am using less css for a basic website when i was trying to use &extend of less its showing no matches element when the element do exists.
I created a dummy environment same problem exists. Here is my code
style.less
#import 'style1.less';
#colorgreen: #00ff00;
#colorred: #ff0000;
#fontsize: 20px;
#bsolid: solid;
#bdash: dashed;
.container {
border: 1px#bsolid #ccc;
padding: 10px;
.myclass {
border: 1px#bdash #ccc;
padding: 10px;
h1 {
color: #colorred;
font-size: #fontsize;
}
p {
color: #colorred;
font-size: #fontsize;
}
}
}
.extend {
border: 1px solid #ccc;
padding: 10px;
h2 {
color: green
}
p {
&: extend(h2);
font-style: italic;
}
}
<div class="container">
<div class="myclass">
<h1>Second Heading</h1>
<p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
</div>
<div class="importClass">
<p>This is imported CSS.</p>
</div>
<div class="extend">
<h2>First in extend</h2>
<p>Second in extend</p>
</div>
</div>
As the official Less Website indicates, the Less compiler looks at the compiled CSS selector when processing extend.
Essentially the extend looks at the compiled css, not the original less.
So, when trying to extend a nested selector, we should provide the full selector in the extend and not just the inner selector. In the example in question, the compiled CSS selector would be .extend h2 and so when the extend statement has only h2 provided as input, it wouldn't match and not output anything.
So, the below would compile successfully and work as per expectation.
.extend{
border: 1px solid #ccc;
padding: 10px;
h2{
color: green
}
p{
&:extend(.extend h2);
font-style: italic;
}
}
When compiled, it would result in the below CSS:
.extend {
border: 1px solid #ccc;
padding: 10px;
}
.extend h2,
.extend p {
color: green;
}
.extend p {
font-style: italic;
}
I would love to style my input field very similar to the divs I am building. However, I am unable to solve sizing issues.
Here is an example
http://codepen.io/anon/pen/kLwlm
And here is one more (with overflow:visible and fixed height)
http://codepen.io/anon/pen/Fxjzf
As you can see, it looks very different than the divs, and no matter what I tried, I could not make them look similar. First of all, I would love to make the input in a way that the text will pop put (overflow: visible? not working).
Secondly, the height should be similar to the divs. Setting the height and line-height properties does seem to effect the temporary text, but when it's clicked (and started to type) it breaks. (check second example)
Shortly, open to suggestions.
Try this solution here:
#import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);
body {
margin: 100px;
background-color: #f7f7f7;
}
input{
border:0;
}
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
line-height: 40px;
}
div {
padding: 1px 0px 13px 2px;
color: #999;
}
I tried placing the input in div and then making the input background to transparent. YOu can play with the spacing to you liking, but it works http://codepen.io/anon/pen/Brcpl
I came up with this JSFiddle. I removed the line-height and positioned text using padding instead (that fixed the aligning of the input text).I also styled the placeholder. Here is a part of your CSS which I changed (do read the notes in it).
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
padding: 5px 0px 5px 0px;/*use padding to adapt the size*/
}
/*Change placeholder properties*/
#s::-webkit-input-placeholder {
color: black;
}
#s:-moz-placeholder { /* Firefox 18- */
color: black;
}
#s::-moz-placeholder { /* Firefox 19+ */
color: black;
}
#s:-ms-input-placeholder {
color: black;
}
PS: I do suggest styling the input-box differently so the visitors of your website notice it is actually a input-box.
What about this one: http://codepen.io/anon/pen/lcgAD
css
div input {
border: none;
font-size: 40px;
width: 100%;
background: transparent;
color: #000;
font-family: 'Playfair Display', serif;
}
div input:hover {
}
div {
color: #000;
background-color: #892;
height: 41px;
}
html
<div>
<input placeholder="Enter E-Mail ayxml#gmail.com" value="Enter E-Mail ayxml#gmail.com"/>
</div>