so I am working on a pretty big site for a customer. And all the information is entered in via labels and follow this format:
<div class="col-xs-12 col-md-6" id="permissionsDIV">
<label id="labelName"></label><label id="labelData"></label>
</div>
The labelName allows the customer to customize what the label actually says (Amount vs Amount($) etc.) And the data is filled with data via AJAX.
I was wondering if there is a way to apply a border-bottom to the second label (labelData), even if there is no data. For example, if I apply a border to the labelData as is, the label is only the width of the text inside, but I would like the underline to fill the space between the the labelName and the end of the DIV. Like so:
<div>LabelName: _______________labelData________________</div>
Because this is responsive I would like to refrain from hard-coding the width of the label.
2 options:
You can apply a minimum width using css
You can apply constant left and right padding to the label which would then have the underline under it
One such example:
.permissionsDIV label:nth-child(2) {
min-width: 50px;
border-bottom: 1px solid grey;
display: inline-block;
padding: 0 15px;
margin-left: 10px;
}
<div class="col-xs-12 col-md-6 permissionsDIV" id="permissionsDIV">
<label id="labelName">My Name</label><label id="labelData">Larry The Cool Guy</label>
</div>
<div class="col-xs-12 col-md-6 permissionsDIV" id="permissionsDIV2">
<label id="labelName">My Name</label><label id="labelData"></label>
</div>
You can use the nth-of-type selector of css.
#permissionsDIV label:nth-of-type(2){
border-bottom:1px solid black;
}
You would need to define a min-width for the labels in order to get the label element to have visibile border.
Related
I've got two Divs, one holds temperature information, the other humidity.
<div class="weatherwrap">
<div class="tempwrap" title="Current Temperature">
<span id=tempinfo><javascript injected data></span>
</div>
<div class="humidwrap" title="Current Humidity">
<span id="humidinfo"><javascript injected data></i></span>
</div>
</div>
Right now, they render like this:
I'd really prefer it if they always aligned by the decimal point (.), as this consistently creates the most pleasing visual.
However, if the number changes, say - the temperature raises into the positive, or humidity drops by a half percentage point, these two divs will be aligned differently, again. How can I ensure that these two divs will align themselves the most optimal way, even if the length of the information inside them is to change?
I've tried hard coding it, and wrote some very bad JavaScript that adds padding to one based on the length of the other, but I'm not satisfied of the reliability of either solutions.
You can align on the period. Use something like below:
#container {
display: flex;
flex-flow: column nowrap;
outline: 1px black dotted;
}
#container > div {
display: flex;
}
.a {
width: 48px;
text-align:right;
}
.b {
}
.c {
width: 48px;
}
<div id=container>
<div>
<div class=a>12</div><div class=b>.</div><div class=c>12</div>
</div>
<div>
<div class=a>1234</div><div class=b>.</div><div class=c>12</div>
</div>
<div>
<div class=a>12</div><div class=b>.</div><div class=c>1234</div>
</div>
<div>
<div class=a>123456</div><div class=b>.</div><div class=c>12</div>
</div>
</div>
After Clicking Hello button I was the new hello button to be displayed at exactly the same position as the previous one was there how can I do that ?
const rightDiv = document.querySelector('#rightDiv');
const leftButton = document.querySelector('#leftButton');
function myFunction() {
rightDiv.style.display = "none";
leftButton.style.display = "block"; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col" style="height: 9vh; border: 1px solid black; width: 100%">
<button id="leftButton" style="display: none"> Hello</button>
</div>
<div id="rightDiv" class="col" style="height: 9vh; border: 1px solid black">
<button onclick="myFunction()"> Hello</button>
</div>
</div>
Edit: I want to set the position same as the other button so that I looks like the button never moved
If none is specified for the display property, no box is generated. Also, offsetWidth, offsetHeight attributes, etc. return 0 if there is no CSS layout box associated with the element[1].
9.2.4 The 'display' property[2]
This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the display property on the descendants.
Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.
Therefore, use the visibility property instead of the display property. The visibility property can be used to make the box generated by the element invisible and affect the layout.
11.2 Visibility: the 'visibility' property[3]
The visibility property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the display property to 'none' to suppress box generation altogether). Values have the following meanings:
hidden
The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.
Bootstrap 4 uses Flexbox for grid layout, so you can use the order property to control the order of flex items[4].
Grid system[4]
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
From the above, you can do this using the visibility and order properties:
const rightDiv = document.querySelector('#rightDiv');
const leftButton = document.querySelector('#leftButton');
function myFunction() {
rightDiv.style.visibility = "hidden";
leftButton.style.visibility = "visible";
leftButton.parentElement.style.order = 1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col" style="height: 9vh; border: 1px solid black; width: 100%">
<button id="leftButton" style="visibility: hidden"> Hello</button>
</div>
<div id="rightDiv" class="col" style="height: 9vh; border: 1px solid black">
<button onclick="myFunction()"> Hello</button>
</div>
</div>
If you want the #leftButton width to be 100%, you can do this using a pseudo-element and the align-items property.
const rightDiv = document.querySelector('#rightDiv');
const leftButton = document.querySelector('#leftButton');
function myFunction() {
rightDiv.style.display = "none";
leftButton.style.display = "block";
}
/* Position adjustment by pseudo-elements and `margin` for` padding` etc ... */
.leftColumn::before {
flex-basis: 50%;
content: "";
}
#leftButton {
margin: 0 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col d-flex align-items-start leftColumn" style="height: 9vh; border: 1px solid black; width: 100%"> <!-- Use flexbox -->
<button id="leftButton" style="display: none"> Hello</button>
</div>
<div id="rightDiv" class="col" style="height: 9vh; border: 1px solid black">
<button onclick="myFunction()"> Hello</button>
</div>
</div>
Reference:
CSSOM View Module
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
I'm trying to expand a box (a div) with a header and a hidden div. The problem is that the height isn't affected in the expansion and the hidden text doesn't show up properly.
The main goal is to expand a small box as if it was a tab, to a form, without changing page and with an expansion animation. When expanded, the user can see the text and edit it. As if it was something like a pop-up filling almost the entire screen. All this is already done expect the "expansion part".
I've tried to adapt my code to many of online solutions, but most of them are simple divs. This is a simple example of what I'm trying to do: http://jsfiddle.net/xcWge/14/ (its only the blue box).
HTML
<div class="row">
<div class="col-md-3 col-sm-6 to-expand">
<div id="child" class="widget">
<div class="widget-body text-center">
<div class="big-icon m-b-md watermark"><i class="fa fa-5x fa-exclamation-circle"></i></div>
<h2 class="m-b-md">Tarif</h2>
<p class="text-muted m-b-lg">Some introduction.</p>
<div class="menu-separator"><hr></div>
<div id="hidden-box">
<p>This contains the text to be hidden, assume that it has a huge number of paragraphs</p>
</div>
Button
.row is the group of "expandable boxes"; .to-expand is the div that includes a single box and #child is the div that included all the content in the box.
CSS
<style>
.btn-primary-w {
border-color: #06285e;
border-width: 2px;
}
div.to-expand {
width: 100%;
max-height:-10%;
overflow: hidden;
transition: all .3s ease;
}
.to-expand.fullscreen {
z-index: 999;
max-height: 990px;
}
I saw a solution that was using a negative margin-top and then return it to 0 with overflow hidden to simulate the hidden text but that solution didn't work.
JS
function func() {
$('#to-expand').toggleClass('fullscreen');
$('#to-expand')[0].style.zIndex = "999";
}
In Qualtrics, I am trying to create something like this:
https://dl.dropboxusercontent.com/u/8114735/Screen%20Shot%202015-05-12%20at%2017.49.17.png
The only way to have text boxes both next to and on top of each other is by using a matrix table with text entry. However, this only gives you the text boxes, without a space above the text entry box to insert an image. So I'm now trying to append these images using javascript. The ID of the text boxes is in the format of QR~QID17~3~2~TEXT (for the box on row 3, column 2).
Here is a sample I made of the text boxes in a 3x3 matrix.
https://eu.qualtrics.com/WRQualtricsSurveyEngine/?SID=SV_b30tGcjTmJWTlYN&SVID=&Preview=Block&ID=BL_enEP0YjUHaK5yPX&Q_DONT_SAVE=1
Does anyone know how you can append an image on top of these boxes? Thanks.
I will start with a working example:
Working Example
This uses numbers, in place of images, but is still a valid example.
First, you will select the "Position text above" option, and in the rows of text you will place the following code:
<td class="c4">1</td><td class="c5">2</td><td class="c6 last">3</td>
replacing 1,2,and 3 with the images for that row(you will have to use an image tag to get this to work in a friendly way).
Once you have setup all three of your rows, add the following to the question javascript:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your Javascript Below This Line*/
$$('.c1').each(
function (e) {
e.remove();
}
);
});
This hides a placeholder inserted by qualtrics and allows your rows to line up nicely!
Enjoy! Note though that this will likely require the images to be sized properly(I havent tested images)
How about using DIV container?
HTML
<div class="container">
<div class="box">
<div class="box-image">
<img src="http://lorempixel.com/output/city-h-c-150-230-4.jpg" />
</div>
<div class="box-input">
<input type="text" />
</div>
</div>
</div>
CSS
.box {
float: left;
width: 200px;
margin: 5px;
}
.container {
max-width:420px;
background:#CCCCCC;
overflow: hidden;
}
.box-image, .box-input {
text-align: center;
width: 100%;
}
.box-image {
background: #FFFFFF;
}
.box-input input{
margin-top: 2px;
width: 200px;
border: 1px solid #AAAAAA;
}
FIDDLE
i'm facing to css problem.basically i have main div tag and 3 div s class named pic_con,body_con and msg_con .
div msg_con length and height depend on the text of it.if text is too long it should have morethan one line to display all.look at the picture.first one with small text,second one with big text ..div msg_con have minimem width and maximum width.
i want to position this 3 div look like in the picture.
<div id="apDiv1">
<div id="div_id_1" class="msg_w_1">
<div class="pic_con">
<div class="body_con">small icon"</div>
<div class="msg_con">hi</div>
</div>
<div id="div_id_2" class="msg_w_1">
<div class="pic_con">
<div class="body_con">small icon"</div>
<div class="msg_con">hey this is multiline text</div>
</div>
</div>
my css
.pic_con {
float:left;
background-color:#096;
}
.back_con {
float:left;
background-color:#3CC;
border:5px solid red;
width:150;
}
.body_con {
/*float:left;*/
margin:0 auto 0 auto;
background-color:#C39;
border:5px solid red;
}
i set flote left but it's not work.
As far as I understood you want to align them one after another.
You can manage this, as you tried, by using float: left. Furthermore, you should set the parent div to clear: both.
Another thing that I saw is that you didn't close the pic-con DIVs. Try with this:
HTML
<div id="apDiv1">
<div id="div_id_1" class="msg_w_1">
<div class="pic_con">pic</div>
<div class="body_con">small icon</div>
<div class="msg_con">hi</div>
</div>
<div id="div_id_2" class="msg_w_1">
<div class="pic_con"></div>
<div class="body_con">small icon"</div>
<div class="msg_con"> hey this is multiline text</div>
</div>
</div>
CSS
.msg_w_1 {
clear: both;
}
.msg_w_1 div {
float: left;
}
Edit: I didn't see the updated post containing CSS when I posted this. Try removing the float: left and width from your CSS classes before trying this
use display:table style.
.msg_con {
display : table
}
this makes .msg_con behave like a table element, it will re-size according to its content's length ( both height and width ).