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/
Related
I wish to trick bootstrap rows somehow. I need to put many col-..-.. items in only one row (there are about 8 really complicated .js files that I'm afraid of altering - and it points to children of the div that I additionally used as a bootstrap row). No way to trick the HTML, I have tried many-many ways. In case you don't believe me, check out the specific problem.
Image here
*The red boxes are the images that I'm using and the striped space is left blank. If I align the element that is on the blank row, the next one goes there and the problem is still unsolved.
What's quite interesting that Firefox and IE show everything the way I them to
but Chrome and Edge do not.
Can anyone help me on this? I'm sure there must be some easy way that I missed out, like altering some of the default bootstrap row class properties, but I just couldn't get it. Any suggestions are appreciated.
Solved using CSS Grid layout.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
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'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/
I want to present dynamically generated (PHP, XML) questionnaires to the user in the browser like this:
requirements:
1. The left column will will always be a number, the middle and the right column may swap position in some questionnaires.
2. There will be questionnaires with 200 items or so over multiple pages.
3. The width of the container (rounded corners) is fixed at 800px at this time, BUT
4. it has to be flexible / fluid in the near future for being displayed on mobile devices like iPad and iPhone
what I've tried
I experimented both with a <table> based and a <div> based layout:
The <table> was clean and simple, but with lots of overhead and not very flexible, e.g. if I swapped middle and right column for item #2 only...
The <div> based layout was sleeker, I let the containers float, but have to set the divs to a fixed width in order to get them align in columns. In a fluid design, I do not know the widths in advance, which will be a mess then...
questions to the pros:
1. <table> or <div>, regarding my requirements above, what would you prefer?
2. is there some magic tool to make this nice and easy?
3. would you rather serve the raw data and let a client-side script (jQuery) do the positioning instead?
Here's a code example: http://codepen.io/anon/pen/inmwD
Either use a wrapping div or a list element
<div class="parent">
<div class="row">
<div class="col1">1</div>
<div class="col2">Content</div>
<div class="col3"><input type="radio"/></div>
</div>
</div>
In my opinion <table> is for tables <div> is for layout.
Yes there are some style templates usually named grid system or css grid take a look at this stack : https://stackoverflow.com/questions/76996/what-is-the-best-css-grid-framework
I wont arrange elements around with JavaScript unless it can't be done with css or is a special requirement from the marketing guys. The con about this is that you increase the page render time.
Take a look at this fiddle made with a custom 960 grid system that have 6 columns with the width 150px
Fixed width: http://jsfiddle.net/UjXPR/
Fluid width: http://jsfiddle.net/UjXPR/1/
960 gs customizer: http://grids.heroku.com/
Checkout bootstrap grid system
1. <table> or <div>, regarding my requirements above, what would you prefer?
div is specially used for layout of the page and table is specially used for placing tabular data. so in your condition I would choose the table layout for the questionnaire.
2. is there some magic tool to make this nice and easy?
First dream to design how should this row data look then only accomplish for the site.
3. would you rather serve the raw data and let a client-side script (jQuery) do the positioning instead?
This is not good idea but if the clients need so you could do that.
And one more thing, you are not asking for your problem with SO but asking what we like, this is not good practice for SO users.
I want to get 4 columns, with the text floating in all of them. I don't want to make 4 separate divs, because when the first column if full of text, the text should continue in the next column.
I also want to set the width of each column and the padding between. Additionally, the height should be flexible, depending on how much text there is.
Do you have any ideas?
This is very difficult to achieve, and is not how HTML is designed. The recommend approach would be to render all the text in a single HTML element (div or p, etc) and in the browser, dynamically alter the content and markup with respect to a pre-determined "preferred height" and number of columns. You can use the height() methods of jQuery to assist you in this.
Here is a script with some of the groundwork.
An article explaining future support available in CSS3.
This article (11 Classic CSS Techniques Mad Simple With CSS3) shows how to do this using Mozilla- and WebKit-specific properties. Columns like these are item number 9 on the list.
For IE you'll need to wait for CSS3 support or use a script, such as the Columnize jQuery plugin mentioned in the article.