I wan to know if it's possible to re-order vertical columns on Bootstrap 3.
.col-xs-8 {
background: magenta;
}
.col-xs-4 {
background: cyan;
}
.col-xs-12 {
background: yellow;
}
<div class="container">
<div class="row">
<div class="col-xs-8">Content</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12 col-xs-push-12">A</div>
<div class="col-xs-12">B</div>
<div class="col-xs-12">C</div>
<div class="col-xs-12">D</div>
</div>
</div>
</div>
</div>
JSFiddle
What I want it's to move the items on the sidebar from ABCD to BCAD
What you want to achieve can not be done for responsive layout.....but assuming you have static content then, it can be done using margins :
Here is a demo
Wrap your ordering divs in some parent div and apply responsive layout to it....in the demo, i have dome that through abcd class ( its not responsive though since its in pixels)
HTML
<div class="abcd">
<div class="col-xs-12 " style="margin-top:-110px;color:#000">A</div>
<div class="col-xs-12" style="margin-top:-150px;color:#000">B</div>
<div class="col-xs-12" style="margin-top:-130px;color:#000">C</div>
<div class="col-xs-12" style="margin-top:-90px;color:#000">D</div>
<div>
EDIT :
demo with percentage value
In %ge, you can vreate something like :
<div class="abcd">
<div class="col-xs-12" style="margin-top:-13%;color:#000;">A</div>
<div class="col-xs-12" style="margin-top:-33%;color:#000">B</div>
<div class="col-xs-12" style="margin-top:-23%;color:#000">C</div>
<div class="col-xs-12" style="margin-top:-3%;color:#000">D</div>
<div>
CSS
.abcd {
margin-top:33%;/* keep this equal to margin of B, but with opposite sign */
}
Assuming you have to insert first child just before the last child.
You can do it with jquery. See Demo
$( ".flexbox div:first" ).append().insertBefore( ".flexbox div:last" );
Related
I am trying to customize the tooltip's width of element-ui framework because text inside tooltip is broken incorrectly.
Here is generated tooltip element with is placed on the bottom of body tag
<div role="tooltip" id="el-tooltip-8061" aria-hidden="true" class="el-tooltip__popper is-dark popper-width" style="transform-origin: center top;z-index: 2031;/* display: none; */">
<div data-v-65209316="" class="row">
<div data-v-65209316="" class="col-5">Employee</div>
<div data-v-65209316="" class="col-7">John Smith</div>
</div>
<div x-arrow="" class="popper__arrow" style="left: 77px;"></div>
</div>
and here is my vue code:
<el-tooltip placement="bottom" theme="dark" popper-class="popper-width" :popper-options="customPopperOptions">
<template slot="content">
<div class="row">
<div class="col-5">
Employee
</div>
<div class="col-7">
John Smith
</div>
</div>
</template>
</el-tooltip>
and
customPopperOptions() {
return {container: document.body, boundariesElement: document.body}
}
I see you are using bootstrap classes, have you thought about splitting them out because your 12 grid has less space to occupy on your employee tooltip. 1st off,
try evening them out:
<div class="row">
<div class="col-6">
Employee
</div>
<div class="col-6">
John Smith
</div>
</div
See if that works, should split the difference. If this causes issues then you will probably need to adjust your CSS code because it looks as though your class .popper-width has a set width.
For my current project I want to make a sort of fixed element in my DOM.
I am not using position: fixed because the element will lose its existence within the DOM and thus its original position (which in my opinion only makes things look worse). I made the element behave like a fixed element by just adding/removing margin-top: somevalue to the scrollable element, everytime when the user scrolls and the code I use was made possible within the JavaScript. Using this method also adds a nice looking animation to this whole "interaction".
The problem I am experiencing is that when the (browser) window has such a small height, that the element will reach for the footer, it will expand the container, body or whatever parent is on it. How do I prevent this from happening?
I made a JSFiddle per example of this issue.
$(document).ready(function() {
var topPadding = 10;
//Set the scrollable offset before starting the scroll
var scrollableTopOffset = $(".scrollable").offset().top;
$(window).scroll(function() {
/* When scrolling, determine wether the browser window still contains
scrollable: */
if (scrollableTopOffset < $(window).scrollTop()) {
//Code when scrollable is within the browser window...
//$(".shopping-cart").addClass("scrollable-fixed");
$(".scrollable").stop().animate({
marginTop: $(window).scrollTop() - scrollableTopOffset + topPadding
});
} else {
//Code when scrollable is not within the browser window...
//$(".shopping-cart").removeClass("scrollable-fixed");
$(".scrollable").stop().animate({
marginTop: 0
});
}
});
});
.some-content-block {
height: 150px;
margin-bottom: 5px;
background-color: red;
}
.scrollable {
height: 75px;
background-color: cyan;
}
footer {
height: 200px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="background-color: blue;">
<div class="row">
<div class="col-md-12">
<div class="some-content-block">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-10">
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<div class="scrollable">
</div>
</div>
</div>
</div>
<footer></footer>
Edit: Here is my fiddle updated with the answer of SamGhatak: JSFiddle
I think I found a solution here:
https://jsfiddle.net/rv4mg8uq/2/
Added this code there:
if(($('footer').offset().top -scrollableTopOffset +topPadding)<$(window).scrollTop()){
//do nothing
}
How would I use jQuery to get get the text from the rating selected div within the id=overall answer div?
I want to dynamically fetch the text "TESTING" from that div within the overall parent div.
<div class='answer' id="overall">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating'>4</div>
<div class='rating selected'>TESTING</div>
</div>
<div class='answer' id="effort">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating selected'>4</div>
<div class='rating'>TESTING</div>
</div>
I tried to do this and it is blank.
$(document.getElementById('overall')).find('.rating selected').text();
Your code would work but your selector is wrong. It would be...
$(document.getElementById('overall')).find('.rating.selected').text();
Notice the dot and no space between rating and selected.
However, I think you are over complicating things...
$('#overall .selected').text();
Example...
alert($('#overall .selected').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='answer' id="overall">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating'>4</div>
<div class='rating selected'>TESTING - selected</div>
</div>
<div class='answer' id="effort">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating selected'>4</div>
<div class='rating'>TESTING - not selected</div>
</div>
$('#overall .rating.selected').html()
I'm trying to design a page where there is a task list on the left and many boxes (one for each employee) on the right so I can dispatch all the tasks quickly.
I don't know if it is relevant, but I use Bootstrap. Here is my list's markup :
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">Tasks</div>
</div>
<div class="panel-body panel-body-table">
<div id="Unassigned_1" style="margin-left:0px">Task 1</div>
<div id="Unassigned_4" style="margin-left:10px">Task 1.1</div>
<div id="Unassigned_8" style="margin-left:20px">Task 1.1.1 Some long name so I can test</div>
<div id="Unassigned_9" style="margin-left:20px">Task 1.1.2</div>
<div id="Unassigned_5" style="margin-left:10px">Task 1.2</div>
<div id="Unassigned_8" style="margin-left:20px">Task 1.2.1</div>
<div id="Unassigned_9" style="margin-left:20px">Task 1.2.2</div>
<div id="Unassigned_2" style="margin-left:0px">Task 2</div>
<div id="Unassigned_3" style="margin-left:0px">Task 3</div>
<div id="Unassigned_6" style="margin-left:10px">Task 3.1</div>
<div id="Unassigned_7" style="margin-left:10px">Task 3.2</div>
</div>
</div>
</div>
And here's the javascript (I'm just begining this page, so the 'drop' code is not there yet)
<script>
$(document).ready(function() {
$('div[id^="Unassigned_"]').draggable({ helper: 'clone', containment: '.page-content-wrap' });
});
</script>
For some reason I don't know, if I drag any task (such as the one with the long name) to the right, the text wraps when it "hits" the right border of the panel, then when I pass the border with the cursor, the item follows, but it is still wrapped.
Does anyone know why it does that? Is there a way to fix it?
Thanks a lot
You can fix a width of the dragging element using classes .ui-draggable.ui-draggable-dragging
.ui-draggable.ui-draggable-dragging {
width: 100%;
border: 1px solid #eee;
padding: 5px;
color: #888;
}
Fiddle demo
I'm sure the answer is really simple, but I can't figure this out :
http://jsfiddle.net/VfQAH/
I have a bunch of divs in a table style layout like so :
<div class="row">
<div class="col boxname">Box Name</div>
<div class="col length">Length</div>
<div class="col width">Width</div>
<div class="col height">Height</div>
</div>
<div class="row">
<div class="col boxname">A</div>
<div class="col length">1</div>
<div class="col width">2</div>
<div class="col height">3</div>
</div>
<div class="row">
<div class="col boxname">B</div>
<div class="col length">1</div>
<div class="col width">2</div>
<div class="col height">3</div>
</div>
I want rows to change color on hover, for that I have :
.row :hover{
background: #003366;
}
But the background changes only on the hovered cell, instead of the whole row.
Do I have to use JS to make it happen like I want, or is there a simple CSS trick that I don't know?
You'd use .row:hover instead of .row :hover to highlight the whole row.
.row:hover{
background: #003366;
}
Your original selector, .row hover, selects all hovered elements which descend from .row, instead of .row itself.
jsFiddle here.
You need to remove the space
.row:hover{
background: #003366;
}
Otherwise it is interpreted as
.row *:hover{
background: #003366;
}
jsFiddle