I'm trying to display the details of an email side by side (this is only a section of the full page) but the details from the row containing the from/to and date/cc/bcc information overlap a lot before stacking when the page resizes and I'd like them to stack before this problem arises. The following is the simplified version of what I have:
<div>
<div class="row">
<div class="col-xs-10">
<span style="font-weight:bold;" data-bind="text:Subject"></span>
</div>
<div class="col-xs-2">
<button class="btn btn-default" style="float:right; height:30px;">
<img src="..." style="max-height:20px; border:none;" />
</button>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">FromName</div>
<div class="col-xs-12">email</div>
<div class="col-xs-12">ToName</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">Date: </div>
<div class="col-xs-12">Cc: </div>
<div class="col-xs-12">Bcc: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">date</div>
<div class="col-xs-12">Cc address</div>
<div class="col-xs-12">Bcc address</div>
</div>
</div>
</div>
</div>
</div>
<div>
Bootply Example
Columns overlap because the col-xs-2 is too small for the content in it:
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
Inspect with Dev tools the <div class="col-xs-2"> which contains From: to see that when the text overlaps the content area is smaller than the text length.
To solve it you can change the col-xs-NUMBER for a bigger NUMBER (try with 4) also changing the detailed column (to 8, if you replace the previous with 4).
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 1 year ago.
The code:
$('.del').click(function(e){
$(this).parents('.order-item').remove();
if($('.order-item').length == 0){
$('#order-items').append(Data.order_item_clone)
}
})
What am I doing wrong? As you can see, I am trying to remove the parent element '.order-item' based on the '.del' element clicked. Nothing is happening. This is what the html looks like:
<div class="col-md-3" id="order-items">
<div class="order-item">
<div class="col-md-1 nhp" id="side">
</div>
<div class="col-md-7 nhp">
<div class="col-md-3 obox-num obox">
</div>
<div class="col-md-9 obox-purity obox">
</div>
<div class="col-md-4 obox-info obox-price obox">
</div>
<div class="col-md-4 obox-info obox-weight obox">
</div>
<div class="col-md-4 obox-info obox-total-price obox">
</div>
</div>
<div class="col-md-2 nhp">
<button class="del" style="width:100%; height:77px"> Del </button>
</div>
<div class="col-md-2 nhp">
<button class="print" style="width:100%; height:77px"> Print </button>
</div>
</div>
</div>
For the most part, this html is generated dynamically with javascript/jquery. Can anyone help? Thanks in advance
Edit: When I do $('.del').eq(0).parents('.order-item').remove() things work find, so there is something wrong with $(this)
$(document).on('click','.del', function(e){
$(this).parents('.order-item').remove();
if($('.order-item').length == 0){
alert("append now");
// $('#order-items').append(Data.order_item_clone)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3" id="order-items">
<div class="order-item">
<div class="col-md-1 nhp" id="side">
</div>
<div class="col-md-7 nhp">
<div class="col-md-3 obox-num obox">
alpha
</div>
<div class="col-md-9 obox-purity obox">
beta
</div>
<div class="col-md-4 obox-info obox-price obox">
gamma
</div>
<div class="col-md-4 obox-info obox-weight obox">
yellow
</div>
<div class="col-md-4 obox-info obox-total-price obox">
blue
</div>
</div>
<div class="col-md-2 nhp">
<button class="del" style="width:100%; height:77px"> Del </button>
</div>
<div class="col-md-2 nhp">
<button class="print" style="width:100%; height:77px"> Print </button>
</div>
</div>
</div>
Since you mentioned, the html are loaded dynamically, you need to bind the click to document and capture the element.
$(document).on('click','.del', function(e){
thumbnail screenshot also attachedi have created thumbnail in my dashboard.but these thumbnails are collapsing each others and the last thumbnail in a row showing up full screen.kindly help me
<div class="container">
<h1>Trending Groups</h1>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
</div>
</div>
Try giving height and width to your image also dearch in google little bit and then post your questions on this that will help you.
I am trying to get two divs to appear side by side when looping through props (which happen to be an array) in VueJS.
When I use a single element, it works fine. Immediately when I add the v-for tag it doesnt appear side by side anymore.
<div class="row">
<div v-for="(data,index) in data" :key="index" class="col-12">
<div v-if="data.image" class="col-xs-12 col-md-3 image-div">
<img class="image" :src="data.image" alt="image">
</div>
<div class="col-xs-12 col-md-9">
<p class="title">{{data.title}}</p>
<p class="description">{{data.description}}</p>
<p class="bottom">
<span class="left"><span class="tag">{{data.tag}}</span><span class="time"> | {{data.time}}</span></span>
<span class="right"><v-icon>bookmark</v-icon><v-icon>share</v-icon></span>
</p>
</div>
</div>
</div>
Above is the code i am using
Seems you're just missing the required .row for grid nesting
<div v-for="(data,index) in data" :key="index" class="col-12">
<div class="row"> <!-- 👈 this one -->
<div v-if="data.image" class="col-xs-12 col-md-3 image-div">
<img class="image" :src="data.image" alt="image">
</div>
<div class="col-xs-12 col-md-9">
<!-- etc -->
</div>
</div>
</div>
These are the set of divs where i want to add the loop on some count.
I have tried jquery and javascript but doesn't work. Please help out.
It takes a count from checkbox and the count is values selected in checkbox the following set of divs need be populated dynamically. I have written a jquery that gets the count as well as the checkbox values.As and when user selects these boxes the set of divs need to be appear as the number of counts.
function arrayValues(item, index)
{
var cd = $("input[name=car_damage]:checked");
var eg = cd.map(function () {return this.value;}).get().join(",");
var temp = new Array();
temp = eg.split(",");
text="";
alert(temp);
//alert(eg);
var ef = cd.size();
alert(ef);
}
Checkbox code:
<hr>
<div class="car_map" id="carmap">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4">
<div class="item">
Front
<input type="checkbox" name="car_damage" value="Front" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-4">
<div class="item">
Front Wing Left
<input type="checkbox" name="car_damage" value="Front Wing Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Front Wing Right
<input type="checkbox" name="car_damage" value="Front Wing Right"/>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4">
<div class="item">
Bonnet
<input type="checkbox" name="car_damage" value="Bonnet"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Windscreen
<input type="checkbox" name="car_damage" value="Windscreen"/>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-xs-5 col-sm-4">
<div class="item">
Front Door Left
<input type="checkbox" name="car_damage" value="Front Door Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Front Door Right
<input type="checkbox" name="car_damage" value="Front Door Right"/>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Roof
<input type="checkbox" name="car_damage" value="Roof"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-4">
<div class="item">
Back Door Left
<input type="checkbox" name="car_damage" value="Back Door Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Back Door Right
<input type="checkbox" name="car_damage" value="Back Door Right"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Rear Windscreen
<input type="checkbox" name="car_damage" value="Rear Windscreen"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-4">
<div class="item">
Rear Left
<input type="checkbox" name="car_damage" value="Rear Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Rear Right
<input type="checkbox" name="car_damage" value="Rear Right"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Rear
<input type="checkbox" name="car_damage" value="Rear"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="btn btn-custom btn-sm btn-decline center-block" data-scroll="step3">Back</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="btn btn-custom btn-sm btn-decline center-block">Save For Later</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="btn btn-sm btn-custom center-block" data-scroll="step5" id="add_trip" onclick="arrayValues()">Continue</div>
</div>
</div>
</div>
<hr>
<div class="col-xs-12 col-sm-6">
<div class="form-label">
Rear
</div>
<div class="photo-picker" id="photo-picker">
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="box photos">
<div class="row">
<div class="col-xs-12">
<h4>Photo Instructions</h4>
</div>
</div>
<div class="photo-sample" id="photo-sample">
<div class="row">
<div class="col-xs-12">
<div class="form-sublabel">
Stand approx. 2m back from the Rear of the vehicle.</div>
<imgsrc="/hfiprojectstorefront/_ui/desktop/common/hfiproject/images/placeholder-photo.png" class="img-responsive center-block" alt="" />
</div>
</div>
</div>
<div class="photo-real" id="photo-real">
<div class="row">
<div class="col-xs-12">
<div class="cont">
<video id="v" class="img-responsive center-block"></video>
<div class="player-buttons" id="take" style="display:none;"></div>
</div>
<canvas id="canvas" style="display:none;"></canvas>
<img src="" id="photo" class="img-responsive center-block" />
</div>
<div class="col-xs-12">
<div class="form-label">
Was this photo taken at the scene?
</div>
</div>
<div class="col-xs-12">
<div class="list-group segmented-control">
<span class="list-group-item half active">
YES
<input type="radio" name="scene_photo" value="YES" checked="checked"/>
</span>
<span class="list-group-item half ">
NO
<input type="radio" name="scene_photo" value="NO"/>
</span>
</div>
</div>
<div class="col-xs-12">
<div class="form-label">
Optional Comment
</div>
</div>
<div class="col-xs-12">
<textarea class="form-control" name="optional" id="optional"></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
Delete
</div>
<div class="col-xs-12 col-sm-6">
Save
</div>
</div>
</div>
</div>
</div>
<hr>
It is not clear the solution you are seeking.
However requiring the least amount of work would be creating a function to execute on change and jquery to manipulate your DOM elements not a great solution though if you require state management.
I believe a better solution would be use reactjs where use can create components and utilise jsx.
Or AngularJS frameworks where you can do an ng-repeat or custom directive that takes inputs to display your divs.
It's really not clear what you are trying to populate, but you can generate any DOM element dynamically like this.
fnCreateDOMElement = function(el, num, context) {
var e = document.createElement(el);
for(var i=0; i<num; i++){
document.context.appendChild(e);
}
}
above snippet could be utilized like this.
document.getElementById("populator").addEventListener('change', function(){
//reset contents of container if needed. comment if not needed
document.getElementById('container').innerHTML = "";
var times = this.value;
for(var i=0; i<times; i++) {
var mydiv = document.createElement('div');
var myparag = document.createElement('p');
mydiv.setAttribute('class', 'foo');
myparag.setAttribute('class', 'fooized');
var txt = document.createTextNode('Foo #'+(i+1));
myparag.appendChild(txt);
mydiv.appendChild(myparag);
document.getElementById('container').appendChild(mydiv);
}
});
<div id="container">
</div>
<input type="number" min="0" placeholder="how many?" id="populator">
above functions can be refactored with javascript's default/optional arguments.
I have this page where you click on a text block, the box opens comments below it. The row below it shifts down then. Problem is that ALL columns in the row below shift down, which creates a ton of whitespace.Only 1 should shift down (the one below the expanded cell). Is there a way to do this with bootstrap 3?
Yes, you need to change the layout of your grid. you wouldn't lay them out 3 across to a row, you would lay them out going down in columns.
<div class="row">
<div class="col-sm-3">
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6">
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
</div>
<div class="col-lg-6">
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
[here's where to put the picture of
the car spanning 2 columns, so to speak]
</div>
</div>
</div>
<div class="col-sm-3">
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
</div>
</div>
Make sense?