I'm currently having an issue using the ngx-bootstrap sortable component.
I want to be able to use the sortable component horizontally instead of the stacked vertical examples from the doc examples. ngx-bootstrap sortable
Would anyone be able to help out here by providing a potential solution or be able to explain why this may not be possible using ngx-bootstrap.
bs-sortable creates divs internally to show the draggable elements. Now by default the display property of div is block, thats why it is arranged in vertical stack.
To make it horizontal you just need to add the css property display to inline-block in class sortable-item.
Demo
Template
<div class="row">
<div class="col">
<bs-sortable
[(ngModel)]="itemStringsLeft"
itemClass="sortable-item"
itemActiveClass="sortable-item-active"
placeholderItem="Drag here"
placeholderClass="placeholderStyle"
wrapperClass="sortable-wrapper"
></bs-sortable>
<pre class="code-preview">model: {{ itemStringsLeft | json }}</pre>
</div>
</div>
<div class="row">
<div class="col">
<bs-sortable
[(ngModel)]="itemStringsRight"
itemClass="sortable-item"
itemActiveClass="sortable-item-active"
placeholderItem="Drag here"
placeholderClass="placeholderStyle"
wrapperClass="sortable-wrapper"
></bs-sortable>
<pre class="code-preview">model: {{ itemStringsRight | json }}</pre>
</div>
</div>
styles.css
.sortable-item {
padding: 6px 12px;
margin: 4px;
font-size: 14px;
line-height: 1.4em;
text-align: center;
cursor: grab;
border: 1px solid transparent;
border-radius: 4px;
border-color: #adadad;
display: inline-block;
}
EDIT:
Rather than making changes in global style.css (which will apply changes globally), if you want to make changes in particular component only, you can use ng-deep pseudo selector in particular component.
app.component.css
bs-sortable::ng-deep .sortable-item {
padding: 6px 12px;
margin: 4px;
font-size: 14px;
line-height: 1.4em;
text-align: center;
cursor: grab;
border: 1px solid transparent;
border-radius: 4px;
border-color: #adadad;
display: inline-block;
}
Related
Style is same but inside form button size and outside form button size is not same. Outside form button text-content apply extra padding around it. Same issue with a tag. Why this is happening? How to solve it? Also for button user agent stylesheet override my font. How to fix it?
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#400;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body,
html {
font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
color: #333;
}
.container {
margin: 30px auto;
padding: 25px;
border: 1.5px solid #e6e6e6;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
border-radius: 6px;
}
a {
text-decoration: none;
}
.btn {
background-color: #fff;
font-size: 0.9em;
font-weight: 700;
padding: 10px 22px;
border-radius: 5px;
}
.btn--orange {
color: #e99d0f;
border: 1px solid #e99d0f;
}
.btn--red {
color: #ff2727;
border: 1px solid #ff2727;
}
.section-info {
width: 60%;
}
.section-info img {
width: 100%;
margin-top: 10px;
}
.section-info__nav {
display: -webkit-box;
display: flex;
margin-top: 10px;
}
.section-info a {
margin-right: 10px;
}
<section class="container section-info">
<div class="section-info__nav">
Edit
<button class="btn btn--red">Delete</button>
<form action="#" method="POST">
<button class="btn btn--red">Delete</button>
</form>
</div>
</section>
In the first look, it could be a bit confusing but if you look at the style inheritance with more attention you will find out a little difference between them.
Lets get into it step by step
As we can see there is display: flex; attribute within the provided style.
.section-info__nav {
display: -webkit-box;
display: flex;
margin-top: 10px;
}
As we know flex will only affect the direct children of a div, so here what we got:
Edit
<button class="btn btn--red">Delete</button>
<form action="#" method="POST">
...
</form>
There are three direct children to the provided div (a, button, form). The other button within the form won't take effect of the flex display since the form itself got display block by default.
Why this is happening at all?
As we know flex display in the default situation will stretch the content to match the exact height (There is 44px available in section-info__nav, so each button height with display flex will be 44px). But when we got a display block, all items with this kind of display will put in the document just by their normal form and size, so since the button class is:
.btn {
background-color: #fff;
font-size: 0.9em;
font-weight: 700;
padding: 10px 22px;
border-radius: 5px;
}
the sum of the padding, border, and font-size will be 34px (10px lower than actually available height in the div). So the button will add at the beginning of div and in comparison with other buttons, it will look likes a dumb.
NOTE: In order to prevent items from fitting the entire available space in your div you can control them by align-items attribute. But in your particular case, since <a> don't have a default line-height attribute you should add specific line-height attribute to your .btn class in order to align all of your items properly.
How to fix this?
Simply add flex display to your form like this:
form {
display: flex;
}
because your form is not flex.you should just add cod below in your form css:
display: flex;
I have a problem with styling a textarea, i use bootstrap 4 css
i was trying to styling by my self but if i using a padding or margin it's make the textarea height to big
.comment-box {
padding: 0.8rem 1rem;
border-radius: 30px;
}
<textarea class="form-control comment-box" rows="1"></textarea>
i want this textarea look like input field with button in inside just like this image
textarea input
Here
is the complete explanation about overriding bootstrap style. I am sure you can follow that rule and solve that issue.
Edit:
Also you don't need to implement his first and second step. You can follow only 3 and create new style that override the bootstrap style
https://www.w3schools.com/howto/howto_css_contact_form.asp">here is a link to your answer
that should solve your issue, check out the css they use and play with it.
input[type="text"],
select,
textarea {
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 10px;
}
input[type="submit"] {
border: none;
background: #4aaaa5;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
color: #ffffff;
font-size: 16px;
}
I would like to make this shape for the title.
What HTML and CSS should I use to make this shape?
For creating a shape like you asked for, you can use any html tag (in my case I used h1 tag).
I've given my tag a class .title, you can give any. To this class I've only assigned basic and required properties to achieve what you asked for, you can give any set of properties as you desire together with these.
Below I'm attaching a snippet please go through.
.title {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
border-width: 0 0 1px 5px;
border-style: solid;
border-bottom-color: #ababab;
border-left-color: #000;
}
<h1 class="title">This is my title</h1>
You can achieve this using border property (border-left & border-bottom), like:
.title {
border-left: 5px solid #444;
border-bottom: 1px solid #444;
padding-left: 15px;
line-height: 1.4;
}
<h1 class="title">This is a title</h1>
Hope this helps!
I can't figure out what is causing the uneven spacing that you see in the image http://i.imgur.com/AZoXzYf.png (can't embed images yet ... sorry)
which comes from http://playclassicsnake.com/Scores. My relevant CSS is
.page-btn { background: #19FF19; color: #FFF; border: 0; border: 3px solid transparent; }
.page-btn.cur-page { border-color: #FFF; cursor: pointer; }
.page-btn + .page-btn { margin-left: 5px; }
and I've inspected the elements to make sure there's nothing fishy. What's the deal?
You have a new line character in your HTML just after your first button:
<button class="page-btn cur-page">1</button>
<button class="page-btn">2</button><button class="page-btn">3</button>
Make it all in 1 line and it will start to work without any extra spaces:
<button class="page-btn cur-page">1</button><button class="page-btn">2</button><button class="page-btn">3</button>
Your CSS is perfectly fine and doesn't need to be altered as mentioned by others..
Hi now try to this css
#page-btns-holder {
width: 80%;
margin-top: 12px;
font-size: 0;
}
div#page-btns-holder * {
font-size: 14px;
}
.page-btn {
background: #19FF19;
color: #FFF;
border: 0;
border: 3px solid transparent;
display: inline-block;
vertical-align: top;
font-size: 14px;
}
Define your btn display inline-block and remove space to inline-block element define your patent font-size:0; and child define font-size:14px; as like this i give you example
Remove Whitespace Between Inline-Block Elements
Try to make the font-size of the parent content 0, also try setting letter-spacing to 0.
At the moment, I have page headings which I want to style like this:
<div class="page_header">Categories</div>
My style looks like this:
.page_header {
font-family: markerfelt-thin-webfont;
text-shadow: 1px 1px 2px #000000;
font-size: x-large;
color: #bbbb75;
padding-bottom: 10px;
}
But I have been asked to add a small image to the left of the text.
So, I could go an edit every page header:
<div class="page_header"><img src="http://www.clker.com/cliparts/W/e/S/a/V/m/push-pin-th.png" />Categories</div>
But I was hoping I could edit the CSS to accomplish this for me. Is there a way I can add an image to the CSS, left of the text (With a (missing) gap between the image and the text)?
I have attempted the ::before in the css (New to me, so I am doing something wrong), like this:
.page_header {
font-family: markerfelt-thin-webfont;
text-shadow: 1px 1px 2px #000000;
font-size: x-large;
color: #bbbb75;
padding-bottom: 10px;
}
.page_header::before{
content: url('~/images/pushpin.png');
}
But all that happens is I get a huge gap before the heading. But if I use http:// to reference the image, it works. Using ~\images\myimage.png fails.
you try with code below maybe can help you:
.page_header {
font-family: markerfelt-thin-webfont;
text-shadow: 1px 1px 2px #000000;
font-size: x-large;
color: #bbbb75;
padding-bottom: 10px;
position:relative;
padding: 30px 0 0 120px;
}
.page_header::before{
position:absolute;
left:0;
top:0;
content:url('http://www.clker.com/cliparts/W/e/S/a/V/m/push-pin-th.png');
}
Working Demo
Here's how you can style all headers with the same image:
.page_header {
background: url('http://www.healthylivingjunkie.com/wp-content/uploads/2014/10/bulletPoints.png') left center no-repeat;
background-size: 14px;
font-family: markerfelt-thin-webfont;
text-shadow: 1px 1px 2px #000000;
font-size: x-large;
color: #bbbb75;
margin-bottom: 10px;
padding-left: 20px;
}
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
There's a few ways to achieve this. Either by use of the :before selector or by setting the background of the div to your image and pushing the text across using padding.
You could set the background image of the div and pad the left side to move the text over
padding-left:120px; // width of image + spacing
background: url("http://www.clker.com/cliparts/W/e/S/a/V/m/push-pin-th.png") no-repeat;
Yeah, you don't have to go to code part and you can do this with css using pseudo element before as you have to insert it before the element.
.page_header:before{
content:url('http://www.clker.com/cliparts/W/e/S/a/V/m/push-pin-th.png');
}
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>