I'm trying to do a simple layout on bootstrap but I can't find a solution that doesn't involve javascript.
I need the template to be like this on medium / large desktops: http://jsfiddle.net/Xx3G4/1/
And it must stay like this on small devices: http://jsfiddle.net/Xx3G4/
If I wasn't clear enough, I need the block "p1":
<div class="teemo-block">p1</div>
to be right after the block "stuff" on medium / larges and after the news on small / x-small.
PS:
Do not forget to re size the jsfiddle to see it on the correct viewport;
The solution of this problem using javascript is pretty easy, the problem is finding one without the use of it.
Thanks for reply
If you are using twitter bootstrap and if you don't have problem creating 2 "p1" blocks, one before and the other after the block "stuff", then there is one solution with the bootstrap class name. Bootstrap has a class called hidden-phone(renamed as hidden-xs in version 3), which hides the element with this class names in phones. Check here
The other solution would be to create 2 blocks as said above, use media queries to display one block and hide the other block. But this is not a pretty good solution, just in case if you don't find any other way without involving javascript
Just reposting and translating the answer I got on Portuguese SO (https://pt.stackoverflow.com/questions/9508/posicao-dos-blocos-em-bootstrap/9721#9721)
I have removed the classes col-push and col-pull and replaced them to pull-left and pull-right, also from bootstrap.
<div class="col-xs-12 col-md-4 pull-right">
<div class="teemo-block">
p1
</div>
</div>
Since, by default, all the 'cols' on bootstrap has float left, if you want to change that you must change it manually, that's why the news block got the pull-left and the other blocks got the pull-right, forcing them to stay on the desired position.
Check the result:
http://jsfiddle.net/luckmattos/hsCw9/7/
Related
I am having difficulty fixing my layout using Bootstrap CSS with flexbox.
My layout should look like this:
English <rowdata>
French <rowdata>
Dutch <rowdata>
<rowdata>
<rowdata>
<rowdata>
However, one of the row data's contains a rather large element, with a lot of checkboxes (to indicate the different date parts), and because of this width the entire right side will cause my layout to shift completely below the language "tabs".
How do I solve this?
This is the JSFiddle that shows the issue:
https://jsfiddle.net/751pbsu3/
And here is the same fiddle, but without the checkbox field (that screws up the layout), to show how it should look like:
https://jsfiddle.net/j8e0th5g/
Here is the working example, you have to use bootstrap breakpoints.Check the class col-md-2 and col-md-10 that i have attached
This is the JSFiddle that resolved the issue: https://jsfiddle.net/mko72x6y/1/
I'm testing since severals month angular + ionic, and I used a lot the <ion-grid>. But since I'm doing an application that will be available on desktop AND on mobiles, sometimes I need VERY different layouts, and I find hard to achieve this sometime with the flexbox approach of the ion-grid component.
Is there a way to use instead the CSS Grid(https://css-tricks.com/snippets/css/complete-guide-grid/ ) inside of ionic? It would make some layout much easier.
Is this somehow supported directly by Ionic? Or does this require me to directly make it in CSS? What would be the downside of it not directly supported by Ionic?
In ionic there is nothing that force you to use only ionic elements, the point of using these elements is to make it easier for users for faster work.
So instead of using bootstrap to make a grid layout for example :
<div class="blabla">
<div class="row">
<div class="col-6 col-sm-12 ..."></div>
</div>
</div>
So ion-grid or ion-row or ion-col are just for faster use for a user, but if it comes for better performance between default elements in ionic and bootstrap, for sure it will be better in ionic elements, but if you can achieve your things without using library of bootstrap and just use css, then it will not differ at all since css is a part of ionic and not you who is adding the css file, so its very normal to use css and html normal elements like div to achieve tour results without ionic elemwnts.
In the Bootstrap 3 documentation they give the following example of using push and pull classes to change column ordering (http://getbootstrap.com/css/#grid-column-ordering):
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
I understand how this works but why would you not just write the order in which you want them to appear in your HTML, like this?
<div class="row">
<div class="col-md-3"> ... </div>
<div class="col-md-9"> ... </div>
</div>
I can't see any possible use case for the example they give, because whether the order is col-md-3, col-md-9, or col-md-9, col-md-3 you're still not going to gain any more or less width on any device - they still add up to 12. Therefore why not just define it in the HTML in the correct order?
I understand how the classes work technically. But I don't understand what the use case of them could possibly be since they don't appear to do anything you cannot do already by defining things in the order you want? Essentially you can't gain any more or less viewport width on a given device, so where would you ever want to do something like this?
Column ordering classes allow us to change the order of our grid system based on different browser sizes. This means that on a large screen, you can have a different grid than on a mobile screen.
You can check this for example,
https://scotch.io/tutorials/reorder-css-columns-using-bootstrap
why would you not just write the order in which you want them to
appear in your HTML
It's because when we write markup we're supposed to think of its semantics too.
For example you have a page which has a sidebar on the left side, and an article on the right side. In your markup hierarchy the article should comes before the sidebar because the article is the main page content.
But then if you float them left, the article will be on the left side and sidebar will be on the right side, which is the opposite of what you want to achieve. So to fix this you will use push and pull classes, you get the idea.
This is just an example. Of course other options are available to achieve the same result such as float them right, or place the sidebar markup before article but wrap it with <aside> element.
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 have the problem with the form-group class of bootstrap
On https://jsfiddle.net/oursgris/7s2pgthy/#&togetherjs=9SHsiHc4oj
I extracted the problem
When I'm a small or medium device with that code. the line between "Statut" and "Etat" is smaller because I don't use the form-group class.
on medium device I have the wanted result (and large also)
When I add
<div class="form-group">
between statut and etat, there is the space of from-group (a margin-bottom of 15px)
https://jsfiddle.net/oursgris/t4dt9avw/embedded/result/
but in that case the md and large add a line, how can I correct that behaviour ? I imagine that I missuse a css class
After reviewing your JFiddle, I noticed a few things wrong with your form such as improper use of the form-group class. I also reworked your classes to get the desired view I think you are looking for. If all you were looking for a was a inline form through out all the views, all you had to do was stay away from a 12 span class.
I worked out a DEMO for you in a Code Pen
p.s. you didn't need that empty column div (unless you are using that to programmatically display something in it via JQuery. Other than that, the use of form-group takes care of isolating that label and input field in its own row.