I use Twitter Bootstrap 2.3.2 and chosen plugin for select boxes. I would like to ask how can i align other elements according to box with selected items.
In this screenshot you can see two select boxes and content(elements) under select boxes.
When I select some items, the box overlaps header "Source" and items under the box. I would like to align elements down when some options are selected and align items up (back) when the options are deselected.
jsfiddle
html
<div id="filter">
<div id="personFilter" class="form-group">
<h4> Person filter </h4>
<div id="personFilterContain">
<h5> Contain </h5>
<select data-placeholder= "address"
name="personContainSelect" multiple class="selectPerson"><option value="0"> </option><option value="2">rogelio.francis#gmail.com</option><option value="3">meredith.sullivan#gmail.com</option><option value="4">essie.castro#gmail.com</option><option value="5">arnold.clayton#gmail.com</option><option value="6">eugene.jefferson#gmail.com</option><option value="7">ora.gibbs#gmail.com</option><option value="8">katherine.frank#gmail.com</option><option value="9">preston.goodwin#gmail.com</option><option value="10">edna.burke#gmail.com</option></select>
</div>
<div id="personFilterNotContain">
<h5> Dont contain </h5>
<select data-placeholder="address"
tabindex="4" name="personNotContainSelect" multiple class="selectPerson"><option value="0"> </option><option value="2">rogelio.francis#gmail.com</option><option value="3">meredith.sullivan#gmail.com</option><option value="4">essie.castro#gmail.com</option><option value="5">arnold.clayton#gmail.com</option><option value="6">eugene.jefferson#gmail.com</option><option value="7">ora.gibbs#gmail.com</option><option value="8">katherine.frank#gmail.com</option><option value="9">preston.goodwin#gmail.com</option><option value="10">edna.burke#gmail.com</option></select>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="personCheckBox"> Apply
</label>
</div>
</div>
<!-- ********************* Source Filter ********************* -->
<div id="sourceFilter" class="form-group">
<h4> Source </h4>
<div id="sourceFilterSource">
<label class="checkbox inline">
<input type="checkbox" name="sourceMailCheckBox"> Mail
</label>
<label class="checkbox inline">
<input type="checkbox" name="sourcePhoneCheckBox"> Phone
</label>
<label class="checkbox inline">
<input type="checkbox" name="sourceDiscussionCheckBox"> Discussion
</label>
</div>
</div>
<script>
$(document).ready(function () {
$('select[name=personNotContainSelect]', this).chosen();
$('select[name=personContainSelect]', this).chosen();
});
</script>
css
#filter{
text-align: center;
}
#filter, #details{
overflow: auto;
}
#filter h4{
text-align: left;
}
#personFilter, #sourceFilter{
width: 535px;
height: 200px;
margin: 0 auto;
display: inline-block;
}
#personFilter{
height: 100px;
margin-top: 27px;
display: inline-block;
}
#personFilter h5{
max-width: 200px;
padding-left: 1px;
text-align: left;
margin-bottom: 5px;
}
#personFilter select{
width: 250px;
}
#personFilter div{
display: inline-block;
}
#personFilterContain{
max-width: 400px;
float:left;
}
#personFilterNotContain{
max-width: 400px;
float: left;
margin-left: 30px;
}
#personFilter label:last-child{
width: 0;
}
#personFilter .chosen-container{
top:-30px;
}
#personFilter .checkbox{
width: 300px;
float: left;
margin-top: -10px;
}
#sourceFilter {
text-align: left;
margin-top: 21px;
position: relative;
}
#sourceFilterSource{
margin-top: 15px;
}
set ID attr for select (e.g. test):
<select id="test" data-placeholder= "address"...
...
</select>
add change event. pay attention on #test_chosen, similar ID att from <select>. suffix _chosen added by plugin.
$('select[name=personContainSelect]', this).chosen().change(function(){
var h=$('#test_chosen').height()
h+=56;//init height of chosen
$('#personFilter').height(h)
});
SOLUTION 2: CSS
#personFilter{
height: auto;
}
Related
I have a problem. I created the following topbar:
#topBar {
height: 30px;
margin-top: 10px;
}
#comboBoxAgent {
width: 400px;
height: 100%;
}
#comboBoxCoin1 {
min-width: 60px;
height: 100%;
}
#comboBoxCoin2 {
min-width: 60px;
height: 100%;
}
#btnToggleAgent {
float: right;
height: 100%;
min-width: 60px;
width: 70px;
border-radius: 10px;
font-size: 18px;
color: white;
}
#toggleSwitch {
height: 100%;
display: inline-block;
}
#txtStartDateTime {
margin-left: 10px;
}
.simulator-progress {
font-weight: bold;
}
#media only screen and (max-width: 1100px) {
#comboBoxCoin2 {
display: none;
}
}
#maxOrders {
padding: 5px 0px;
}
.txtOrderRadioBtn {
padding: 0px;
margin: 0px;
display: inline-block;
}
#maxOrdersBtn {
padding: 0px;
margin: 0px;
display: inline-block;
}
<div id="topBar">
<select id="comboBoxAgent" onchange="changeAgent()"></select>
<select id="comboBoxCoin1" class="comboBoxCoin" onchange="loadCoinPriceData()">
<option value="">-</option>
</select>
<select id="comboBoxCoin2" class="comboBoxCoin" onchange="loadCoinPriceData()">
<option value="">-</option>
</select>
<div id="toggleSwitch">
<div class="radio-group">
<input type="radio" id="environmentReal" name="environment" checked="checked" value="Real"><label for="option-one">Real</label>
<input type="radio" id="environmentSim" name="environment" value="Simulator"><label for="option-two">Sim</label>
</div>
</div>
<div id="simulatorControls" style="display: none;">
<input type="text" id="txtStartDateTime" placeholder="Start (0000-00-00 00:00:00)">
<button id="btnToggleSimulator" onClick="toggleSimulator()"></button>
<label id="txtSimulatorProgress" class="simulator-progress"></label>
</div>
<button id="btnToggleAgent" onClick="toggleAgent()"></button>
</div>
<div id="maxOrders">
<label class="txtOrderRadioBtn">Max visible orders</label>
<form id="maxOrdersBtn">
<label class="radio-inline">
<input type="radio" value="50" name="maxOrderOption" checked>50
</label>
<label class="radio-inline">
<input type="radio" value="100" name="maxOrderOption">100
</label>
<label class="radio-inline">
<input type="radio" value="250" name="maxOrderOption">250
</label>
<label class="radio-inline">
<input type="radio" value="All" name="maxOrderOption">All
</label>
</form>
</div>
The snippet isn't working properly, but I think thats just because its a snippet. The point is, that when I click on the radio button "Sim" the input field with the datetime shows up. Now this works properly on desktop, but on my mobile device the input field goes trough the maxOrders div. Here is an image of the mobile result:
Now how can I fix this using media queries. There are a few things that are important for the solution. The <button id="btnToggleAgent" onClick="toggleAgent()"></button> has to stay in the top right corner and the maxOrders needs to be below the simulator datetime input field on mobile. Please let me know how I can fix this!
I would do two things: Eliminate as many hard-coded widths as you can. The modern web should be flexible. Eliminate floats. They're a pain, and there are better ways (such as flexbox).
Other tips:
Use styling classes instead of IDs. This makes them reusable and forces you to consider how to simplify.
Apply padding and spacing globally, rather than in one-offs. Use generic classes or a small library.
#topBar {
height: 30px;
margin-top: 10px;
display: flex;
align-items: stretch;
}
#comboBoxAgent {
flex: auto;
}
.comboBoxCoin1 {
min-width: 60px;
}
#btnToggleAgent {
min-width: 60px;
width: 70px;
border-radius: 10px;
font-size: 18px;
color: white;
}
.simulator-progress {
font-weight: bold;
}
#media only screen and (max-width: 1100px) {
#comboBoxCoin2 {
display: none;
}
}
#maxOrders {
padding: 5px 0px;
}
.txtOrderRadioBtn {
padding: 0px;
margin: 0px;
}
#maxOrdersBtn {
padding: 0px;
margin: 0px;
}
<div id="topBar">
<select id="comboBoxAgent" onchange="changeAgent()"></select>
<select id="comboBoxCoin1" class="comboBoxCoin" onchange="loadCoinPriceData()">
<option value="">-</option>
</select>
<select id="comboBoxCoin2" class="comboBoxCoin" onchange="loadCoinPriceData()">
<option value="">-</option>
</select>
<div id="toggleSwitch">
<div class="radio-group">
<input type="radio" id="environmentReal" name="environment" checked="checked" value="Real"><label for="option-one">Real</label>
<input type="radio" id="environmentSim" name="environment" value="Simulator"> <label for="option-two">Sim</label>
</div>
</div>
<div id="simulatorControls" style="display: none;">
<input type="text" id="txtStartDateTime" placeholder="Start (0000-00-00 00:00:00)">
<button id="btnToggleSimulator" onClick="toggleSimulator()"></button>
<label id="txtSimulatorProgress" class="simulator-progress"></label>
</div>
<button id="btnToggleAgent" onClick="toggleAgent()"></button>
</div>
<div id="maxOrders">
<label class="txtOrderRadioBtn">Max visible orders</label>
<form id="maxOrdersBtn">
<label class="radio-inline">
<input type="radio" value="50" name="maxOrderOption" checked>50
</label>
<label class="radio-inline">
<input type="radio" value="100" name="maxOrderOption">100
</label>
<label class="radio-inline">
<input type="radio" value="250" name="maxOrderOption">250
</label>
<label class="radio-inline">
<input type="radio" value="All" name="maxOrderOption">All
</label>
</form>
</div>
I am working on a web page in which I need the text associated with each text to be next to the checkbox. Currently, this is what it looks like:
I do not want any of the checkboxes or labels associated with them to be centered. I want them to be aligned to the left. Here are my JavaScript & global style code:
JS:
import React from 'react'
import { Link } from 'react-router-dom';
import { Form } from '../../global styles/index';
import { useForm } from 'react-hook-form';
function ArtistForm(){
const { register, handleSubmit, errors } = useForm();
const onSubmit = data => console.log(data);
console.log(errors);
return(
<div>
<Form onSubmit={handleSubmit(onSubmit)}>
<div className="form-container">
<div className="row">
<div className="column">
<label>First Name:</label>
<input type="text" placeholder="First Name" name="FirstName" ref={register({required: true, max: 30, min: 2})} />
</div>
<div className="column">
<label>Last Name:</label>
<input type="text" placeholder="Last Name" name="LastName" ref={register({max: 30, min: 2})} />
</div>
</div>
<div>
<label>Medium:</label>
<input type="checkbox" id= "designillustration" name="medium" /><span>Design & Illustration</span>
<input type="checkbox" id="digitalart" name="medium" /><span>Digital Art</span>
<input type="checkbox" id="drawing" name="medium" /><span>Drawing</span>
<input type="checkbox" id="paintingmixedmedia" name="medium" /><span>Painting & Mixed Media</span>
<input type="checkbox" id="photography" name="medium" /><span>Photography</span>
</div>
<div>
<label>Artist Bio: </label>
<textarea placeholder="Bio" name="Bio" ref={register({required: true, maxLength: 500})} />
</div>
</Form>
</div>
)
}
export default ArtistForm
Global Style for Form Component:
// form styling
export const Form = styled.form`
max-width: 1000px;
margin: 0 auto;
label {
float: left;
text-align: left;
display: inline-block;
padding-left: 15px;
text-indent: -15px;
}
input {
box-sizing: border-box;
width: 100%;
border-radius: 4px;
padding: 10px 15px;
margin-bottom: 10px;
font-size: 14px;
margin-top: 10px;
display: block;
}
textarea {
box-sizing: border-box;
width: 100%;
border-radius: 4px;
padding: 10px 15px;
margin-bottom: 10px;
font-size: 14px;
}
.form-container {
display: flex;
flex-direction: column;
width: 90%;
padding: 20px;
#media(max-width: 500px){
padding: 20px 50px 50px;
}
}
div {
display: inline-block, flex;
flex-direction: row;
justify-content: flex-start;
padding: .2rem;
}
p {
margin: 0;
}
.instructions{
text-align: center;
margin-bottom: 40px;
}
.column {
float: left;
width: 50%;
padding: 10px;
}
.row:after {
content: "";
display: table;
clear: both;
}
`
Is there something with the input tag that is interfering with how the checkboxes show up with the labels for them? I have tried over and over again to use display: inline-block but for some reason I cannot get the text to be inline with the checkbox. I have also tried to align the text to the left for the label but did not have any luck.
From your code, the solution can be done in 3 steps:
removing the following styles from the input selector
width: 100%;
display: block;
Both of these styles were giving your input element the width: 100% which pushes the text below.
Then from there, what I would do is wrap each of the input and span pairs in divs. This will section off the two inline elements into its own container while allocating the full width to the elements e.g.
<div>
<input type="checkbox" id= "designillustration" name="medium" />
<span>Design & Illustration</span>
</div>
Add the following css to restore width: 100% on the text inputs
input[type="text"] {
width: 100%;
}
Here is a codepen that demonstrates the solution on the first checkbox input row: https://codepen.io/ariellav/pen/poyvPKR
Other note:
Replacing
label {
float: left;
text-align: left;
display: inline-block;
padding-left: 15px;
text-indent: -15px;
}
with
label {
display: block;
}
should reap the same result
you've set your
input{
width: 100%;
}
that takes the whole width of the container and doesn't allow the text to display inline
You have to have label tags next that are to/for the input button. Also, you must get rid of your input{width: 100%;}
<input type="checkbox" id="designillustration" name="medium"/>
<label for="designillustration">Design & Illustration</label>
I know there are many question about it, but they don't answer properly.
After readings and looking for, I tried this:
<input id="ext-element-47" class="x-input-file x-input-el" type="file" accept="" style="display:none">
hiding the file-input and then
this.element.down(".x-input-file").dom.click();
this works on Chrome's console but in my JS code it doesn't. It doesn't click.
Anyone knows why? and what can I do for make click?
Notes:
I need to make click because the file element is not visible and so when it clicks it does not show unless I do element.click ().
Here is an example what I'm doing:
document.getElementsByClassName('o-file-field-input')[0].click()
.o-file-field-input {
display: none;
}
.o-big-btn {
background-color: red;
height: 3em;
width: 3em;
}
<div class="x-container x-unsized o-cont-option" data-componentid="ext-container-5" id="ext-container-5">
<div class="x-inner x-align-center x-pack-center x-horizontal x-layout-box" id="ext-element-50">
<div class="x-button x-button-plain open-field-icon o-big-btn x-layout-box-item x-flexed x-stretched" id="ext-OUI_BaseButton-1" data-componentid="ext-OUI_BaseButton-1" tabindex="0" style="-webkit-box-flex: 1;">
<span class="x-button-icon x-shown smf smf-upload-file" id="ext-element-45"></span>
<div class="o-button-bg"></div>
<div class="x-unsized x-field-input x-has-height" id="ext-fileinput-1" data-componentid="ext-fileinput-1" style="height: 38px;">
<input id="ext-element-47" class="x-input-file x-input-el o-file-field-input" type="file" accept="">
<div class="x-field-mask x-hidden-display" id="ext-element-48"></div>
<div class="x-clear-icon" id="ext-element-49">
</div>
</div>
</div>
</div>
</div>
See ya!
Here's what I usually do: Wrap the input inside a <label> element, and then style the element as a button, for example:
.pretty-file {
border: 1px solid #000;
cursor: pointer;
display: inline-block;
padding: 5px 15px;
}
.pretty-file input[type="file"] {
display: none;
}
<label class="pretty-file">
Choose File
<input type="file" />
</label>
This finally works well:
var obElement = document.getElementsByClassName('input-file')[0];
//the title property overrides tooltip's description
obElement.setAttribute('title', ' ');
.flex-style{
display: flex;
}
.input-file{
opacity: 0;
margin-left: -40px;
width: 40px;
height: 45px;
}
.icon{
width: 40px;
height: 45px;
background-color: blueviolet;
}
<div class='flex-style'>
<div class='icon'></div>
<input class='input-file' type='file'>
</div>
I have the following HTML markup:
<div id="PlanViewControls" class="ui-widget ui-state-default ui-corner-all" >
<div id="Level1Controls">
<div class="separated">
<div id="PlanViewZoomSlider"></div>
</div>
<div class="separator">|</div>
<div class="separated">
<label>
Rack Info:
<select id="RackInfoSelect">
<option value="Name">Name</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated marginedTop">
<label>
Enable Auto-Refresh:
<input id="PlanViewRefreshCheckbox" name="Enable Auto-Refresh" value="value" type="checkbox" />
</label>
</div>
</div>
<div id="Level2Controls">
<div class="separated">
<label>
Levels To Display:
<select id="LevelSelect">
<option value="All">All</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated marginedTop">
<a id="ExportPlanView" href="javascript:void(0)" target="_blank" title="Export the plan view as a pdf.">
<span class="cs-icon cs-icon-edit-search-results" style="float: left; margin-right: 5px;"></span>
<label id="ExportLabel">Export</label>
</a>
</div>
</div>
</div>
CSS (w/ latest jQueryUI for major styling)
#RightPaneContent
{
overflow: hidden;
}
#PlanViewControls
{
display: none;
min-height: 20px;
margin-bottom: 5px;
}
#PlanViewControls > div
{
min-height: 20px;
padding-top: 5px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 5px;
}
.component-slider
{
width: 100px;
margin-left: 5px;
margin-top: 3px;
}
#PlanViewControls label
{
display: block;
padding-left: 15px;
text-indent: -15px;
float: left;
}
#PlanViewControls input
{
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
}
#PlanViewControls div.separator
{
padding-top: 4px;
}
.marginedTop
{
margin-top: 3px;
}
#ExportLabel
{
padding-top: 1px;
}
#PlanViewControls
{
min-width: 700px;
}
#ExportLabel:hover
{
cursor: pointer;
}
#PlanViewControlsOverlay
{
background: white;
opacity: 0.7;
filter: alpha(opacity=70);
position: absolute;
z-index: 10001;
}
I am really unhappy with this solution because on wide displays the second level of controls looks unnatural -- there is enough space to hold them all in one level.
The solution I currently have in my head consists of:
Measure the available width of the space I would like to take up.
Measure the width of each control I have.
Place as many controls as I can on the first line.
Append a second level if I run out of space.
Obviously it doesn't make sense to collapse to just 1 item per row -- I would be specifiying a min-width for my first level controls.
Is this the proper way to go about doing this? Or is there an easy way to express this using CSS/HTML?
Just as a visual helper I've attached below what my page looks like on a landscape monitor vs a portrait monitor.
Hm, I would use pure CSS for that:
<div id="controls">
<div> "Separated" </div>
<div> another control </div>
<div> and one with an icon </div>
...
</div>
#controls {
width: 100%;
min-width: 10em; /* or whatever */
/* implicit height: auto; */
overflow: hidden; /* to hide the leftmost borders */
}
#controls > div {
display: inline-block;
border-left: 1px solid blue;
padding: 1em 0;
margin: 1em -1px; /* move the borders 1px into the off */
}
This should give a scalable toolbar, and there is no need for different level-divs.
I am trying to position an overlay over a div. I had the code working successfully when the div was guaranteed to be only one row, but I am struggling to obtain the proper height of the div when it breaks out. It appears that the div reports its single-row height, but displays a multi-line height after rendering.
function InitializeControls() {
console.log("Width: " + $('#PlanViewControls').width());
console.log("Height: " + $('#PlanViewControls').height());
console.log("innerHeight: " + $('#PlanViewControls').innerHeight());
console.log("outerHeight: " + $('#PlanViewControls').outerHeight());
$('#PlanViewControls').show();
$('#PlanViewControlsOverlay')
.stop()
.show()
.css({ opacity: .7 })
.width($('#PlanViewControls').width())
.height($('#PlanViewControls').height())
.offset($('#PlanViewControls').offset())
}
#PlanViewControlsOverlay
{
background: white;
opacity: 0.7;
filter: alpha(opacity=70);
position: absolute;
z-index: 10001;
}
#PlanViewControls
{
display: none;
min-height: 20px;
margin-bottom: 5px;
width: 100%;
min-width: 200px;
overflow: hidden;
padding: 5px;
}
#PlanViewControls > div
{
display: inline-block;
min-height: 20px;
}
<div id="PlanViewControlsOverlay">
</div>
<div id="PlanViewControls" class="ui-widget ui-state-default ui-corner-all" >
<div class="separated" style="padding-top: 3px">
<div id="PlanViewZoomSlider"></div>
</div>
<div class="separator">|</div>
<div class="separated">
<label>
Rack Info:
<select id="RackInfoSelect">
<option value="Name">Name</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated" style="padding-top: 4px">
<label>
Enable Auto-Refresh:
<input id="PlanViewRefreshCheckbox" name="Enable Auto-Refresh" value="value" type="checkbox" />
</label>
</div>
<div class="separator">|</div>
<div class="separated">
<label>
Levels To Display:
<select id="LevelSelect">
<option value="All">All</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated" style="padding-top: 3px">
<a id="ExportPlanView" href="javascript:void(0)" target="_blank" title="Export the plan view as a pdf.">
<span class="cs-icon cs-icon-edit-search-results" style="float: left; margin-right: 5px;"></span>
<label id="ExportLabel">Export</label>
</a>
</div>
</div>
Is it possible to obtain these metrics?
I've put your code into this fiddle, changed a part whith errors (what JSLint reported) with working code and put it into .ready() so it would get called.
Look from here, whether it helps. I didn't answered anything directly, but more precise question would help to nail down your problem (:
You don't need JavaScript at all!
Just cut and paste the #PlanViewControlsOverlay into the #PlanViewControls div. This way, you can use a percentual width and height to make it cover the whole area.
What you would do is add these lines of code in your css and getting rid of the display: none;.
#PlanViewControlsOverlay
{
background: white;
opacity: 0.7;
filter: alpha(opacity=70);
position: absolute;
z-index: 10001;
width: 100%;
height: 100%;
display: block;
}
Here is an example: http://jsfiddle.net/uJrLT/21/