There is a similar question here, but it pertains to ionic 1 where the ion-item still has ion-content. In ionic-2 there is not ionic-content. I've tried changing the height/padding/margin of the actual ion-item, and the class item-inner and can't seem to get a uniform "skinny-ing" of the ion-items.
Question: How do I make the ion-items in an ion-list skinnier/smaller/not as tall in ionic 2? Ps. this is using ionic 2 beta 10
I found that the main issue with this is in the app.ios.css file native to ionic that the .item class that gets assigned to the ion-item element gets a min-height assigned to it of 4.4 rem. I'm not sure where that value came from or why it's 4.4. So, in my .scss file pertaining to the list, I just added:
.item {
min-height: 3rem; /* <- this can be whatever you need */
}
This made it so any changes that I made to the margins( I ended up changing the margin to 0 8px 0 0 respectively ) of the inner elements actually changed the height of the list item because they weren't bumping up against a min-height setting. See other answer for where to change the margin.
Without changing the min-height of the list item, any changes to the margins of the inner elements didn't do anything (at least for me ).
Change the top-bottom padding on <ion-label>. The default is this:
ion-label {
margin: 13px 8px 13px 0;
}
Related
I try to do a carousel with Swiper.js but even after following a tutorial, I can't have 3 frames display. I end up with 3 plus a part of another one.
I think I must have a margin somewhere but can't find it
Here's the codepen to show what I mean : https://codepen.io/MakeThisWork/pen/jOKjPpK
I tried to change the width of my elements, to change the margin or the padding, but nothing seems to work
I've also tried to change slidesPerView to 2.9 (not enough) and 3.1 (too much)
Even this post, didn't help: Swiper JS - show part of next slide
The first thing, you don't need to set the slidesPerView to 2.9, you can keep it as 3 and it will work.
The second and the important part, is the problem here, all the problem is the border of the slides, the border property increases the width and height of the element, and when increasing the slide size, everything works wrong in your swiper.
You can handle that by just adding box-sizing to your slide set to border-box like that:
.swiper-slide {
border: 2px solid green;
height: 90% !important;
box-sizing: border-box;
}
Or just remove your border and put background for example.
I am trying to design a WordPress theme using Bulma.io; I'd like a page with tabs and content inside a container div element. When I apply Bulma CSS class is-marginless, three margins get overwritten, but margin-right is not applied from the class. Adding style="margin-right: 0px !important;", does not affect the visuals either.
To switch between tabs, I use code from The Internet which works seamlessly except the margin-right issue.
Considering the design is relatively complex already, you can see the page for yourself.
As you can see, due to the div element right margin, the border does not meet with the border of the tab lines. I am quite new to Bulma and CSS in general.
When I open Chrome Developer Tools and find a definition of is-marginless for a given div, I can see margin: 0px !important; is set, but when I click the expand arrow, I can see margin-right: 0px !important; crossed out, so it does not apply for some reason, but I can't find out why.
I've added is-fullhd to the class and it fixed the issue, the blocking piece of code has been max-width: 1152px; on container class, added class increased it to max-width: 1344px;
I'm creating a basic web layout in CodePen to better understand how grid areas work with the CSS Grid module. It turns out that using the . notation doesn't actually "hide" the items, when applied to the grid-template-areas property.
Please see my code here: https://codepen.io/isaacasante/pen/KZmyKV
You can see that I'm leaving the grid cells below my menu empty, but the section element on which I've added grid-area: random still shows in the bottom right corner of my layout (below my footer).
Do you guys have any idea how I can get rid of it without removing the HTML? I want to use Grid Areas only, to hide it. I noticed that an easy solution is for me to set the padding on the section element to 0, but this isn't a good solution, because it won't work the next time I'm trying to "hide" an element that has content.
You could reset the grid-templates-rows to grid-template-rows: 70px 40px 0px 290px 50px;
https://codepen.io/anon/pen/JMNpaJ and set display:none to section.item. position:absolute;right:100vwworks to to lay it out of screen. https://codepen.io/anon/pen/vpmdzj But that is when you know it is empty or is to be hidden any times.
Instead you can use :empty and auto. https://codepen.io/anon/pen/NXjyLV so it is hidden only when empty.
In fine, the grid-gap remains visible. It can be reset to 0 and margin on .item might help along the :empty selector and auto value for this specific row:
https://codepen.io/anon/pen/NXjyLV
Use display: none:
section.item {
display: none;
}
JSFiddle
I'm having trouble removing a margin in CSS .
I am working in a MVC .NET project and have implemented the summernote editor.
It uses the following CSS files:
summernote.css
font-awesome.css
bootstrap.css
as well as the default css files for an MVC application.
I have inspected the page and it states I have a margin to the right on the .note-editor class. I have then set the margin to 0 for that div (and class), but so far it has been impossible to remove it.
Here is the link to my screenshot (since I require 10 reputation to post images):
http://imgur.com/gallery/cNlqLTi
I would be more than grateful if someone could help!
It is not the margin it is just the empty space inside the container .col-md-10 which is shown in screenshot. For better understanding I created this fiddle
Here the parent element .container has some max-width and it is aligned center and the inner element .inner-container has max-width: 90%; and there is a remaining space of 10%. If you inspect it you will see it as orange same as your example, which you thought it as margin.
In your scenario, the parent element .col-md-10 has some width and the inner element .note-editor has max-width:95%. Here, there is a remaining space of 5% which you assumed it as margin.
To remove it, remove max-width or if you give max-width:100% or width: 100%, your issue will be resolved.
Ok so I found what the problem was. The .note-editor was displaying as a block.
I changed its styling to display:inline-block and width:95%. This fixed it nicely. Thanks to everyone for helping out!
The following css worked for me.
.note-editor{
display: inline-block;
border: none;
}
Try in Site.css file or try directly to type style="margin 0 0 0 0" or try to apply another class to current.
I'm trying to get the gold title box flush with the box below it. With margins set to 0, why aren't they butting up against one another?
http://www.craftonhills.edu/Testing/chctest/Tweets.aspx
update:
the ul.tweet_list has a default margin. Set it to margin: 0 and it should work.
Through margin-collapsing, the ul inside the container creates the margin.
(on a first glance I thought the .widget was creating the border...)
The margin on .tweet-lists is pushing it away. My suggestion would be to place the border on the containing div and this will get rid of the collapsing margin.
.tweet_list has a top and bottom margin of 14
The tag inside the div (with id "tweetlist") has a margin-top of 14 pixels (according to Google Chrome inspector). Setting this to 0 in the css fixes it.
It is your UL element that has a default margin on it. Set the UL to margin-top: 0px; and you should be good to go.