I'm trying to dynamically render a set of questions and an image (positioned next to each other) each time a button is clicked.
I'm using bootstrap and here is my code.
<div v-if="!submittedAnswer" class="row text-center" id="questions-container">
<div class="image-holder col-sm-5">
<img :src="questions[questionIndex].imgUrl" class="img-responsive" />
</div>
<div v-for="(item,index) in questions[questionIndex].choices" class="col-sm-7 text-center choice">
<p class="shadow-effect
" :class="{'active': activeChoiceId == index}" :id="index" #click="chooseAnswer">{{item}}</p>
</div>
</div>
As can be seen both the image and the question set are rendered in their own respective columns. The issue im facing is that they load in a weird order which in turn creates a glitchy looking affect. I've managed to screenshot what happens.
Even though they are split in two separate columns. The second column seems to partially render in the area of the first column. Then when the image renders, it pushes them over, creating a buggy looking effect.
I've tried creating larger space between them with margins, padding. Or using flexbox instead but the issue still persists.
When your view renders, it renders like this:
<div class="image-holder col-sm-5">{{ image }}</div>
<div class="col-sm-7 text-center choice"">{{ answer }}</div>
<div class="col-sm-7 text-center choice"">{{ answer }}</div>
<div class="col-sm-7 text-center choice"">{{ answer }}</div>
.
.
.
Since the bootstrap grid has 12 spaces, the "col-sm-7" div blocks after the first one are rendered in a new line, because they have no more space to render.
What you need to do is to wrap all the answers inside a <div class="col-sm-7"> block, so they would render correctly. Something like this:
<div v-if="!submittedAnswer" class="row text-center" id="questions-container">
<div class="image-holder col-sm-5">
<img :src="questions[questionIndex].imgUrl" class="img-responsive" />
</div>
<div class="col-sm-7">
<div v-for="(item,index) in questions[questionIndex].choices" class="text-center choice">
<p class="shadow-effect
" :class="{'active': activeChoiceId == index}" :id="index" #click="chooseAnswer">{{item}}</p>
</div>
</div>
</div>
Related
Good evening,
I have a question regarding the Bootstrap 4.1 Grid. I built a normal website with multiple "containers" and "columns".
<div class"container">
<div class"row">
<div class="col-12">
CONTENT
</div>
</div>
</div>
<div class"container">
<div class"row">
<div class="col-12">
CONTENT
</div>
</div>
</div>
On normal displays, this works perfectly fine as both containers are showed underneath each other.
But on very large screens the containers are besides each other.
How can I adjust my code, so that independently of the screen size, the containers are always showed below each other.
Thank you in advance!
I can't really reproduce your issue but you might be missing an equal sign in your classes.
class="container"
class="row"
You are missing equals
<div class="container">
<div class="row">
<div class="col-12">
CONTENT
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
CONTENT
</div>
</div>
</div>
I am trying to create number of boxes using div (each div having different number of contents) and each 2 div should be in a row.
But the problem is if one div has more content then it gets bigger than the other one. This creates a space below the other div and the next div comes after that.
i am using angular js ng-repeat for creating all the divs.
The code i used is as below:
<div id="form" ng-controller="JobApplicationFormController">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" ng-repeat="x in categorylist" style="margin-bottom:10px">
<div class="card1">
<div class="container1">
<div style="border-bottom:1px solid #ccc;padding: 5px;margin-left: -16px;margin-right: -16px;font-size:20px !important;color:black">
<img src="~/Images/form.ico" style="height:50px" /> <b>{{x.categoryName}}</b>
</div>
<div ng-repeat="y in formlist" ng-if="y.categoryId==x.id" id="{{y.id}}" onclick="return popitup('../../Applications/Form/' + this.id)" class="formlist" title="click to upload" style="cursor:pointer;padding: 5px;margin-left: -16px;margin-right: -16px;border-bottom:1px solid #ccc;">
{{y.formName}} </font>
{{y.formName}} </font>
</div>
</div>
</div>
</div>
</div>
I've tried this[Auto adjusting div based on inside content for reference but it doesn't works properly. there is overflow of content.
Edit1: I did try this [CSS-only masonry layout but with elements ordered horizontally already but it is not getting me near to anywhere what I want to achieve. the div part is what is causing a lot of trouble.
I am attempting to access an image in vue.js and render to the DOM, but it is not working.
This is the code :
<template lang="html">
<div>
<h1 class=""> {{ Tex }}</h1>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h3><b>Connect Soft documents</b></h3>
<p class="lead">Allow documents that feed into each other to provide a consistent, untainted view of the financial, operational and social behaviour of the institution.</p>
</div>
<div class="col-sm-4">
<img src="ConnectDocuments.png" alt="Documents" class="pull-right img-responsive imG" width="250" height="250">
</div>
</div>
<hr>
<div class="row">
<!-- position image to the right when on desktop,, but allow image to occupy the whole webpage when the device is less the 768px-->
<div class="col-sm-5">
<h3><b>Improve decision models</b></h3>
<p class="lead">Use statistical modelling to identify patterns and anomalies in the data that can help in
making better decisions.</p>
</div>
<div class="col-sm-6">
<img src="./assets/Statistics.png" alt="Statistics" width="350px" height="270px" class="pull-right img-responsive imG">
</div>
</div>
</div>
</div>
</template>
This is an image of the project folder to see how I am referencing the image path.
I think you misspelled ../../assets/Statistics.png
I'm trying to make custom gallery grid using bootstrap. All goes well but im stuck on last step.
I'm posting HTML structure since i belive it's problem in here somewhere but my code cotains some css (paddings/margins mostly) and JS (explained why below).
HTML:
<div class="about_gallery">
<div class="col-xs-9 pd-9">
<div class="row">
<div class="col-xs-8 pd-8">
<div class="color1"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
</div>
<div class="col-xs-4 pd-4">
<div class="color2"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
</div>
<div class="row">
<div class="col-xs-4 pd-4">
<div class="color3"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color11"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
<div class="col-xs-8 pd-8">
<div class="color4"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
<div class="row">
<div class="col-xs-6 cl-5">
<div class="color5"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
<div class="color12"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
<div class="col-xs-6 cl-6">
<div class="color6"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-3 pd-3">
<div class="color8 "><img class="pion-rect" src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color9"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
<div class="color10"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
</div>
Here is fiddle: http://jsfiddle.net/y6co8e5u/
The goal is to have grid like here: Grid example
As you can see on bottom left corner instead of 1 horizontal rectangle i have two squares and i don't know how to "connect" them since it's in different columns. It's my first time with bootstrap so it's probably a little bit messy. (I'm also not sure if my JS is needed here but when i added spaces between pictures i needed to extend the pictures) I'm open for any other solution too.
Thanks for help!
I will assume you are trying to add the .color7 div, append it to <div class="col-xs-4 pd-4">, just after the .color3 block. The block will look like this:
<div class="col-xs-4 pd-4">
<div class="color3"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color7"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
</div>
then on the css, set .color7 {width: calc(200% + 10px);}
here is the updated fiddle: http://jsfiddle.net/y6co8e5u/3/
no change to the js code.
You need to restructure your HTML a bit, have to put
<div class="color10"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
inside the <div class="col-xs-4 pd-4">
of second row. Hope this is what you want.
Check updated jsfiddler: http://jsfiddle.net/mayankN/y6co8e5u/1/
The codes can be viewed at
http://www.bootply.com/LUNqVTU2nj
<div class="container">
<div class="row">
<div class="col-md-3" >
<img class="img-square" alt="140x140" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA0Njg3NSIgeT0iNzAiIHN0eWxlPSJmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MTBwdDtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xNDB4MTQwPC90ZXh0PjwvZz48L3N2Zz4=" data-holder-rendered="true">
</div>
<div class="col-md-3" >
<h2> First </h2>
</div>
<div class="col-md-3" >
<img class="img-square" alt="140x140" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA0Njg3NSIgeT0iNzAiIHN0eWxlPSJmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MTBwdDtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xNDB4MTQwPC90ZXh0PjwvZz48L3N2Zz4=" data-holder-rendered="true">
</div>
<div class="col-md-3" >
<h2> Second </h2>
</div>
<div class="col-md-3">
<img class="img-square" alt="140x140" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA0Njg3NSIgeT0iNzAiIHN0eWxlPSJmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MTBwdDtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xNDB4MTQwPC90ZXh0PjwvZz48L3N2Zz4=" data-holder-rendered="true">
</div>
<div class="col-md-3" >
<h2> Third </h2>
</div>
</div>
</div>
As can be seen in Bootply, the third image are not rendered at the correct place..
I thought it is wrong because a row can't contain columns whose total width is larger than 12, but on Bootstrap3 official sites, I saw codes like this:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
Is this wrong? If not, why can't my codes work..
Moreover, is it possible to write all columns (for example, 30 columns) in one row and expect bootstrap to layout them correctly?
Your code is OK and a row can content more than 12 cells (a gallery for example) but your problem is that your divs has not the same height and you need to apply a "reset". To avoid this problem you need to insert a div class clearfix when you reach 12 cells.
I mean, in your example:
...
<div class="col-md-3">
<h2> Second </h2>
</div>
<div class="clearfix visible-md-block visible-lg-block">
...
Doc about Bootstrap clearfix: http://getbootstrap.com/css/#grid-responsive-resets.
Also you could add javascript to apply same height to all your cells.
.col-md-3{width: 25%;}
.col-sm-4{width: 33.3333333%}
So obviously only 4 elements could be contained in a single line, while you've placed 6. You can use class .col-xs-2 instead.
Whatever code you have seen on bootstrap site is correct, but meaning is different. In a row only 12 columns are there, i think you are telling about xs having addition (xs-12 and xs-6) but meaning is that when you make it as xs then xs-6 will go to next line as shown in screen show, so use only 12 columnss in row
It's because in the example Bootstrap code you've posted they use different classes for different viewport sizes. Also anything over 12 will just "stack up".
So for example in this particular row:
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
The md viewport adds up to 12 and will stay within one row with a size of 8 and 4.
The xs viewport adds up to 18 and 2 rows will be created where they stack up, where the first row will be 12 and the second will be 6.