So in my .container I see that there is 1px padding on the top and bottom of the <div> which is coming from my Bootstrap include in my RoR project. Even a band-aid solution would be desirable.
The css from Bootstrap that matches these :before and :after selectors are the following:
media="all"
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
media="all"
.container:before, .container:after {
content: " ";
display: table;
}
What would be the inverse of these operations? Or how could I simply overwrite them before I load them in my application.css.scss file?
This is due to the clearfix that Bootstrap adds to the .container and other elements like .row, see mixins/clearfix.less in Bootstrap's repository.
The :before part is used to keep the margins from collapsing and the :after part is used to contain for example the floating columns inside a .row element. See Nicolas Gallagher's clearfix hack post for a more complete explanation.
If you don't want to keep the top margin from collapsing you can overwrite it, probably by simply setting .container:before { display: none; }
Related
On a hover state I'm trying to remove the background color of an md-button when I hover, but I'm not able to affect it.
I'm using Material 2
In my html I have the following:
<div class="case-nav-container">
<div *ngFor="let item of nav">
<a md-button
routerLinkActive #rla="routerLinkActive"
class = "case-button"
[class.active]="rla.isActive">{{item.display}}</a> <br>
</div>
</div>
In my SCSS I have:
a.case-button{
min-width: 200px;
text-align: left;
&:hover{
border-left: solid blue 6px;
background-color: none;
}
}
My question is how do I remove the bg-color of the button?
The background color comes in the form of a focus overlay div. This will remove it,
template:
<a mat-button class="no-hover">Basic Button</a>
css:
.mat-button.no-hover ::ng-deep .mat-button-focus-overlay {
background: none;
}
demo:
https://stackblitz.com/edit/angular-material2-issue-dyck3s
I think you need to increase the specificity of your SCSS. Try .case-nav-container a .case-button. Your SCSS will need to address the element you are modifying more specifically than the Angular Material code is. In some instances where increasing specificity isn't practical for an element a !important SCSS attribute will work as well to override the Angular Material default background color.
Can't believe how much I'm struggling with this simple task. What is the correct way to place a jQuery Mobile data-icon on an element that the user does not interact with? What if I want a paragraph that just displays a message to the user like "No suitable lots were found" and I want that element to have the "info" icon?
I know this won't do it, but something like:
<p data-role="content" data-icon="info" class="my-message-block">No suitable lots were found</p>
Not a link. Not a button or checkbox or .... Just a plain old box displaying a message? All examples I see are an interactive element and not a static element.
Thanks in advance.
I do this by adding a span with some CSS as follows:
<p data-role="content" class="my-message-block"><span class="ui-icon-info ui-btn-icon-notext inlineIcon"></span>No suitable lots were found</p>
Then the inlineIcon class has these rules to place the icon:
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
The right margin controls the space between the icon and the text.
If you prefer a black icon with no gray disk behind it:
<p class="my-message-block"><span class="ui-alt-icon ui-icon-info ui-btn-icon-notext inlineIconNoDisk"></span>No suitable lots were found</p>
.inlineIconNoDisk {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
.inlineIconNoDisk:after {
background-color: transparent;
}
ui-alt-icon on the span changes the icon color and background-color: transparent; on the :after pseudo element hides the disk.
Here is a DEMO
I am using simple form for bootstrap in my rails app. I am trying to figure out how to style radio buttons in my form. The radio buttons for Yes and No are right on top of each other (and very close to the button field). I'd like to add padding to each segment (so space in between the button and the label and then more space between the two options.
I have tried this (to see if I can even force CSS styling into my form. It isn't working at all (the text isn't even changing the font-weight - which is my test to see if it works).
<%= f.collection_radio_buttons :project_image, [[true, 'Yes'] ,[false, 'No']], :first, :last, {}, {:class => "create project"} %>
I have a css.scss file for projects with this class defined:
.createproject {
font-weight: normal;
padding-right: 20px;
}
My first question is how to I add CSS styling to Simple Form components (yes I have read the Simple Form documentation and I can't figure out the answer from that) and then, how do I add padding to each component of the attribute (so there will be padding between the button itself and the label and then more padding between the yes and no options)?
Thank you
First, change your CSS class from 'create project' to 'create-project'
Then try something like this:
.create-project {
font-weight: normal;
padding-right: 20px;
input {
margin: 5px 5px 0px 5px;
}
label {
margin-right: 20px;
}
}
To style just the radio buttons (and not all the inputs and labels in the form), you can do something like this:
.create-project {
font-weight: normal;
padding-right: 20px;
input[type=radio] {
margin: 5px 5px 0px 5px;
}
label.radio {
margin-right: 20px;
}
}
It sounds like you might not be using your browsers CSS editing tools to adjust element styling (F12, or right click -> inspect element). This tool should give you insight into how simple_form_for structures the DOM.
Your class name in your form element is "create project", but the CSS class is createproject. Have you tried removing the space in the former?
I'm using the default jQuery Progress Bar and I can't seem to figure out a couple of things:
Firstly, I've nested it in an AP div tag so that it fits perfectly with a certain area on my page, which is fine but the problem is that the percentage overlay comes up a bit short in that it doesn't cover the entire area of the bar, it doesn't reach the bottom border.
Secondly (not that much of a problem, merely a curiosity) how would I go about changing the colour of the progress bar?
The problem is in your default.css file:
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index:3;
}
box-sizing applies to the progressbar value, so fix it like adding to CSS:
.ui-progressbar-value {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
/* This way you can change the progress color */
background-color: #000000 !important;
}
On my site hiphopcanvass.com I added the blogroll in the footer. I want the height to be a certain size, right now its on auto. If the content of the blogroll gets to that height then it will display on the other side until its fully across. What i want can be seen in the image below.
I do something like this in the footer of my site to display my categories (although I'm only displaying them in two short columns).
To do this, I'm using the following CSS to manipulate the list elements:
#footer ul li.footercolumn{float: left; display: block; width: 210px; margin-right: 20px;}
#footer ul li.footercolumn ul li { float: left; width: 50%; margin-bottom:10px; }
(This will have to be customized to fit your application of course).
There are several ways to create multiple columns using CSS, I'd recommend checking out CSS Wizardry's and A List Apart's articles on this subject.
You need to float the <li> left and change the height of the footerwidget from auto to 50px