When using a CSS framework's grid system, like that of Bootstrap or Materialize for example, I find myself typing the following HTML very very often:
<div class="row">
<div class="col s12">
<!-- Some text/ a button / something -->
</div>
</div>
Essentially I need to put one item, say a paragraph or a button, on it's own row on the page, and in order to do so I need three tags instead of just one. This over time creates a lot of bloat in my HTML.
I have considered creating an angular directive to make it one extra tag instead of two, but I feel like that's a sloppy solution. Does anyone know of a better way to solve this problem?
One OPTION will be to create a code snippet so if you type, element it will expand in the full HTML, snippets are available in sublime text, atom text editor.
Another simple option is to use emmet, it is available in the two mentioned before and brackets, like this:
.row>.col.s12>element TAB
try something like this..
.parent {
display: flex;
}
.child {
flex: 1; /* will grow and shrink with the screen size
min-width: 20ems ; /* optional if you want the element to not fall below a certain width
}
This is just a small example..look into flexbox and see how you can style your rgrids better..
Related
I'm using Bootstrap and making a simple form with col-sm-4 grid. Now it looks as:
Also when I resize browser width to 507px, C1 and C2 elements slide down to the next line:
And by some reason my dropdown lists look as plain HTML without any styles, despite I add class="selectpicker" to them. I expect them to be like:
I want to get something like this:
This is my fiddle: https://jsfiddle.net/j96vaokc/
What Bootstrap classes should I use?
Thank you in advance.
You have a couple simple problems. First off, the selectpicker class is part of this Bootstrap jQuery plugin, bootstrap-select. You would have to download and include that script and stylesheet. Before that, you would also need to include the jQuery script.
Here's a working fiddle to demonstrate what it'll look like with your code and the included scripts. Go to the 'External Resources' tab on the left to see which scripts/stylesheets I included and in which order:
https://jsfiddle.net/j96vaokc/5/
I added
.dropdown-toggle {
width:60px !important
}
just to make the presentation neater on jsfiddle.
In regards to the wonky placement during window resize, that has a lot to do with your use of the bootstrap grid classes. In my fiddle you'll see that I removed alot of column classes since they weren't necessary. What I'm doing with the CSS is important because I have to override the default bootstrap-select styling for width in order to properly center. Also, in case you missed it I explicitly added a line break between the labels and select options.
I would like to have 2 different configurations of addthis on the same page.
Take note that I'm using the new Addthis, where the code looks like this:
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxxxxx" async="async"></script>
<div class="addthis addthisBlogue clearfix">
<div class="addthis_sharing_toolbox"></div>
</div>
What I'm trying to do is have 1 that have the share numbers tooltips and the other doesn't
Is it possible?
Since AddThis creates HTML elements that contain the count 'tooltip' (it's not actually a tooltip) with a single class or ID element, if you want to be really specific (i.e. choose what to hide exactly where you have two or more AddThis instances on a page) you could:
add the instance where you want to hide the count inside a div with a CSS ID or unique class;
use display: none to hide the parent social media count element only inside that div.
Target the AddThis where you want to hide the count elements
Seems obvious, but For example, on this page if you inspect (e.g. in Chrome) the rendered Facebook and Twitter AddThis elements and add 'display: none' to the .pluginCountButton and .count-o styles that contain the elements you want to hide, as expected: they vanish from the display.
So if you nest your AddThis instances inside a uniquely-identified div (or any parent element) then you could simply target the one you want to hide like this:
#hiddencount .pluginCountButton,
#hiddencount .count-o {
display: none;
}
You'd need to locate the equivalent .pluginCountButton and .count-o elements for your version and instance—each social media icon has it's own so you'd have to identify each, as in the above example. You may also need more specificity between #hiddencount and the count container to get the style to apply.
NOTE: without a working example with the count links showing, this is untested. If you have a working example, I'd be happy to test it.
Through some digging I discovered the answer.
You need to add the class addthis_toolbox to your divs like so:
<div class="addthis addthis_toolbox addthisBlogue clearfix">
<div class="addthis_sharing_toolbox"></div>
</div>
source: http://support.addthis.com/customer/portal/questions/5024966-multiple-share-button-on-same-page
I'm trying to configure a content section of my site but I'm having trouble with the bootstrap grid system.
See my bootly example: http://www.bootply.com/121304
In my website design, i use a column-lg-3 and a column-lg-9 within a row class. To serve as a Help section and Content Area. In the content area on the majority of my pages, i use the whole column-lg-9. However in a few of my pages, i use horizontally aligned forms, such as login page (dont know ajax to get login modal working..) and input forms. On the pages with the input forms i wish to keep the column-lg-9 at its proper size, but have the login/input fields centered into it.
I have attempted to do this with a small amount of success, after reading some of the bootstrap documentation, by adding 3 column-lg-3's inside of the column-lg-9. As you can see in my bootply example, this has not fully centered the login form inside of the larger column, and ideally I would also like to center this form inside its parent column.
You simply need to remove float: left from the CSS of the affected DIVS
Create a new class e.g. .col-centered and apply it to whatever column you want centered e.g.
<div class="col-lg-3 col-centered">
CSS
.col-centered{
float: none;
margin: 0 auto;
}
Also, by looking at your code, it seems like you are trying to use empty <div class="col-lg-3"></div> to offset. That is incorrect. You don't use empty divs to achieve this.
You use offset classes such as <div class="col-lg-3 col-lg-offset-6">...</div> Documentation
I have a unique design question. Basically I'm writing a chat script and would like to make the layout more uniform. Is it possible to have a unique set of columns per chat line without creating a new table for each line? For instance this is the design I am ideally looking for.
[TimeStamp] Me: I am writing a long message and this text will be
wrapped to the next line. See how the message text
is aligned perfectly when wrapped?
[TimeStamp] Them: When they write a message that requires wrapping
it aligns perfectly for them.
[TimeStamp] OtherPeople: I think this makes the concept clear if it
needs wrapping it aligns for each "poster"
If I create 1 table for all the messages it may make certain columns longer than they should be. I know creating a new table for each new post could accomplish this, just wondering if there is a more "Web 2.0" CSS way of doing this. Any help is appreciated.
Instead of using a table use divs for the poster name and the text.
so:
<div id="everything"><div id="everythingInside">
<div id="timestamp">[timestamp]</div>
<div id="poster">TheCoolGuy</div>
<div id="comment">I"m cooler than you!</div>
</div>
</div>
then use css to display it as a table:
#everything { display: table; }
#everythingInside { display: table-row; }
#timestamp, #poster, #comment { display: table-cell; }
Of course there are other ways using divs and further CSS as well.
Use code, pre, (and var, span, div) and friends. pre and code gives you whitespace-sensitive, fixed-width text, so the columns work just like above (in fact, you could just view source or inspect element). StackOverflow seems to use Google Prettify to do highlighting if you need that.
I'm having a little CSS problem with a list of thumbnails. Here's an example:
http://jsfiddle.net/22hs8/
The problem is that when the link is too long to fit in the 150px block it will push the image down. By using inline-block on the list elements instead of a float I could get the images to line up properly, but now I want to have the links at the same height as well.
One thing I tried is making the links itself a block (or surrounding it by a div) and giving that a height, but that would mean they are always the same height even if none of the links uses two rules. Also, if a link is so long it uses three lines the same problem would occur.
In short: how do I align the links to the top of the list items, without breaking the image alignment?
To address one issue, you can add vertical-align:top; to the <li> tag in order to align the content to the top of the element, but unfortunately, I don't believe there's a way to resolve the issue entirely without also implementing one of the following methods:
Placing all of the tags in a separate
Specifying a height on the tags
Using javascript to equalize heights
Options
1. Separate Div
By moving the anchor tags into a separate div, they could be given the same width as the images and floated or displayed inline accordingly, but your markup becomes less semantic when you separate the anchor from the content (and may also be programmatically more complex if these are being dynamically generated).
2. Specifying a Height
This option can be thrown out almost immediately because, as you've stated, the anchor lengths can fluctuate to multiple lines. You could specify the height the the largest know line length, but then you'll ultimately end up with unnecessary white space with groups of short links.
3. JavaScript (jQuery)
While It would be ideal to resolve this issue without the requirement of JavaScript, I think it may be the only option that would allow you to preserve the semantics of your markup, and also apply an equal height to each of the anchor tags.
Recommended Solution
I would recommend setting a default height on the anchors of the largest known line length, then applying a bit of jQuery to normalize the heights of the anchors. This way, if the JavaScript parsing fails or JavaScript is disabled, the user still sees a uniform layout (albeit with potentially more whitespace), and with JavaScript active the heights are normalized.
Apply vertical-align:top; to the <li>
Define default height for non-js users
Equalize heights using jQuery:
(function(){
$.fn.equalizeHeights = function(){
return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ))
}
$(function(){ $('li a').equalizeHeights(); });
})();
Example: http://jsfiddle.net/Eg7hy/
How is this:
http://jsfiddle.net/22hs8/3/
So you're saying that you want the links to not push the content down? I don't see that as being possible unless you don't allow your content to stretch at all. It's natural flow of a page for something above content to force the content down after it if it needs more space.
Have you thought about chopping off the text after a certain number of characters, with a '...' and providing the full text through a title, and providing the full text through a popup (since I assume you're creating some kind of photo gallery)?
The first answer that came to mind was:
"just use a table, it makes this really easy, and works everywhere"
Live Demo
However, I would probably get down voted into oblivion if I posted an answer only containing a <table> tag version, so here's a version using CSS display: table and friends:
Live Demo
Of course, that won't work in IE7 because that browser doesn't support display: table.
I can't think of a way to do this using code closer to your original and display: inline-block, which would also support an arbitrary number of lines. I'd love to see a better way to do this.
HTML:
<div id="container">
<div class="row">
<div class="cell">Some text</div>
<div class="cell">Some more text (too long)</div>
<div class="cell">Some text</div>
<div class="cell">Some text (seriously too long) text text text text text text text text text text text text text</div>
</div>
<div class="row">
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
</div>
</div>
(you could change some of those div tags into ul and li if you wanted to)
CSS:
#container {
display: table
}
.row {
display: table-row;
text-align: center
}
.cell {
display: table-cell;
width: 150px
}
.image {
width: 150px;
height: 150px;
background: grey
}
Add vertical-align:top; to the images.