Bootstrap remove content: " " - css

I am using twitter bootstrap, and in the .row class, they add
content: " ";
How can I remove it from my application? It is adding a line to the edge of the screen. I have tried this:
.main-content .row{
content: "" !important;
}
But it doesn't work. If I use chrome and inspect the element and uncheck the box it fixes the issue. What can I do?

have you tried this?
EDIT: To remove clearfix completely changed to content: none;
.main-content .row:before,
.main-content .row:after {
content: none;
}

You're looking for content: none.

Related

Rendering 2 blocks as a single element

I have a bunch of html output that I receive like this
<div>
<h4>This</h4><p>Value 9.6 m.</p>
<h4>That</h4><p>Value 9.6 m.</p>
<h4>The other</h4><p>Another 7.69 m.</p>
<h4>And yet</h4><p>Another value 4.8 m.</p>
</div>
and I want to have it rendered something like this
This: Value 9.6 m.
That: Value 9.6 m.
The other: Another 7.69 m.
And yet: Another value 4.8 m.
I think it probably should have been created as a definition list, but i don't control the html generation.
I can get the first h4 p 'block' to render correctly with the following but I can't seem to get subsequent 'blocks' to render as desired.
h4:after {
 content: ": ";
 display: inline;
 white-space: nowrap;
 } 
h4 {
 display: block; }
h4~p {
 display: block; }
 
h4:first-child { 
display: inline;}
h4+p {
 display: inline;
 }
Any suggestions on how to achieve the desired output?
TIA
If you don't need a tidy column or grid layout for these, I found Ye Olde Floats worked best:
// normalize the spacing and stuff between the h4 and p
h4, p {
display: block;
line-height: 1.4;
padding: 0;
margin: 0;
}
h4 {
// honestly, this got the most sturdy result
float: left;
// add the colon and a little space
&:after {
content: ": ";
margin-right: 10px;
}
}
// break the line after each P
p {
&:after {
display: block;
clear: right;
content: "";
}
}
I also threw this into a CodePen.
Also if you would like a more tabular or column-y version, I had some luck with flexbox and css grid.
Hope this helps, happy coding!

typeahead on bootstrap 3

Currently I'm using this typeahead but it display like this:
Ist possible to display the typeahead, same width as the input?
What I tried so far is:
.dropdown-menu {
display: block; position: static; width: 100%;
}
But this break the lower fields
Check my fiddle
UPDATE:
I tried both of #neel shah and #shin solution and this is the result. I don't know why in the fiddle is not looking this way
Try this. Hope it helps.
.dropdown-menu { width: 100%; }
UPDATE:
Check this out.
The problem is with position: static you just need to remove it from the css
Check this FIDDLE
.dropdown-menu { display: block; width: 100%; }
$('.typeahead').typeahead({})
on('typeahead:opened',function(){$('.dropdown-menu').css('width',$('.typeahead').width() + 'px');});

#page css media does not work for Chrome and IE

I've got some question about #page css media tag.
So I read some documentation written by w3 and Microsoft, but anyways no effect with it.
Following the link http://msdn.microsoft.com/en-us/library/ie/ms530841(v=vs.85).aspx when I use the parameters like they say, it does not work for me.
I even can't find any other example how to numerate pages in browser print media.
Can anyone help me?
Updated
here is my snippet for it. Margins work correctly, but counting dont.
#page {
margin-top: 15mm;
margin-bottom: 25mm;
margin-left: 30mm;
margin-right: 30mm;
#bottom-center {
content: "page " counter(page);
}
}
CSS3 Counters have to be reset before they can be used
Try This once
#page {
margin-top: 15mm;
margin-bottom: 25mm;
margin-left: 30mm;
margin-right: 30mm;
#bottom-center {
counter-increment: page;
counter-reset: page 1;
content: "page " counter(page);
}
}
More info

How do I override CSS set on a pseudo element?

I know that has been asked before, but I find no clean way of overriding this CSS:
.ui-input-search:after {
content: "";
height: 18px;
left: 0.3125em;
margin-top: -9px;
opacity: 0.5;
position: absolute;
top: 50%;
width: 18px;
}
I need to leave ui-input-search on the element, but can add my own class, like:
.ui-input-search-no-pseudo:after {
content: "";
}
Question:
Is there an easy way to remove "pseudo-css" without having to overwrite the CSS line by line?
Thanks!
As far as I can tell there is no other way than to override all properties. The styles are defined on the element, they won't just disappear because of another selector that targets the element.
If you only want to remove the pseudo element from the page you can do content: none.
Added from comments below:
The difference between content: "" and content: none is that content: "" produces a pseudo-element with no content (i.e. an empty pseudo-element), whereas content: none prevents the pseudo-element from being generated at all.
Here content: ""; doesn't affect at all if you want to remove that pseudo you have to use content:none; it will remove previously added pseudo content.
content:none;
If that doesn't help you can also try :
display:none;
if still, it doesn't work then you could try the below, but I never suggest you use !important
display:none !important;
here is working jsfiddle
https://jsfiddle.net/ganeshswami99/52duu0x8/1/

Using :target and adjacent sibling selectors to make a toggle botton

Anyway, I'm trying to create a toggle link, which is basically two buttons on top of each other. One of them would become display:none when it is clicked, and vice-versa.
Currently, my CSS is like this
#main-nav:target + .page-wrap {
position:absolute;
left:-80px;
#open-menu {
display: none;
}
#close-menu {
display: block;
}
}
...but the #open-menu and #close-menu display options don't seem to be showing. Any help?
EDIT:
Alright so I need a preprocessor okay ._.
EDIT AGAIN:
Got it working, thanks guys! Just wondering, is there a way for my entire page div (excluding the menu) to slide out of the page? Or is it some simple overflow-x:hidden?
If you're not using a preprocessor and you don't want to, I suspect you can rewrite your CSS like this, assuming your HTML structure actually corresponds to the selectors:
#main-nav:target + .page-wrap {
position: absolute;
left: -80px;
}
#main-nav:target + .page-wrap #open-menu {
display: none;
}
#main-nav:target + .page-wrap #close-menu {
display: block;
}
Of course, if #open-menu and #close-menu aren't descendants of .page-wrap, then this won't work at all, even if you do use a preprocessor to support writing nested style rules (as a preprocessor can't do something if it cannot already be done with plain CSS).
As mentioned, if these elements aren't related in a way that can be expressed with descendant and sibling combinators, you'll have to make use of JavaScript to achieve what you're trying to do.
As a demonstration, I tried the following:
<div class="page-wrap">
<a id="close-menu" href="#open-menu">Close</a>
<a id="open-menu" href="#close-menu">Open</a>
</div>
with the following CSS:
.page-wrap #open-menu {
display: block;
}
.page-wrap #close-menu {
display: none;
}
.page-wrap #open-menu:target {
display: block;
}
.page-wrap #open-menu:target + #close-menu {
display: none;
}
.page-wrap #close-menu:target {
display: block;
}
.page-wrap #close-menu:target + #open-menu {
display: none;
}
Fiddle Reference: http://jsfiddle.net/audetwebdesign/5aSdW/
Demo Link: http://jsfiddle.net/audetwebdesign/5aSdW/show
Every time you click the Open or Close link, the alternate link is displayed.
I am not sure if this is overly useful, but it can be done.

Resources