Now, I would like to make width of my select element, let's say 80% of its parent div ( div#queries). Is there anyway to do it?
<div id="flowchart-left-panel">
<div id ="queries">
<h3>Queries</h3>
<select class="query-list" size="20">
</select>
</div>
<div id="filters">
<h3>Filters</h3>
<select class="filter-list" size="10">
</select>
</div>
</div>
Of course, with CSS.
Demo here: http://codepen.io/anon/pen/JYYGvG
#queries, #filters{
width: 300px;
}
select{
width: 80%;
}
Related
I am trying to have these 3 input boxes inline on my webpage. "Leave Code" & "From" I was able to bring inline. However the "To" input box remains on the next row.
I believe this has to do with the tag I am giving "To". Not sure how to fix this
I have tried using some basic CSS. Attached is my code snipped
<div class="Dates" *ngFor="let dateline of dates">
<!--
<div class="ui-g">
<div class="ui-g-12"> -->
<div class="ui-g form-group">
<div class="ui-g-12 ui-md-4">
<p-dropdown [options]="leaveCodes2" [(ngModel)]="selectedLeaveCode2" placeholder="Leave Code"
optionLabel="name"></p-dropdown>
<div style = "display: inline-block; padding: 2rem ">
<h3 >From</h3>
<p-calendar [(ngModel)]="date3" [showIcon]="true" showTime="true" hourFormat="12"></p-calendar></div>
<h3 style = "display: inline-block; padding: 2rem ">To</h3>
<p-calendar [(ngModel)]="date3" [showIcon]="true" showTime="true" hourFormat="12"></p-calendar> <br><br>
</div>
</div>
</div>
Here is the view:
Maybe you can force the situation with a little help of css:
<div class="ui-md form_inline">
<div class="ui-md-2">
<label>First Item label:</label>
</div>
<div class="ui-md-2">
First Value
</div>
...
<div>
<style>
.form_inline > .ui-md-2{-ms-flex: 0 0 16.6666%!important; flex: 0 0 16.6666%!important; max-width: 16.6666%!important; float:left!important;}
</style>
You can check how is the size of box adding:
<style>
.form_inline > .ui-md-2{border:1px solid red;}
</style>
If you have div.ui-md-2 at 100% width, probably you have a hack in css that change that. It's better fix this with a particular class and don't change this columns for whole project.
:D
Keep simple:
Use for labels,
Don't use h3 for subtitles:
If use div, h#, p, etc all this elements are display in block.
<div class="ui-md">
<div class="ui-md-2">
<label>First Item label:</label>
</div>
<div class="ui-md-2">
First Value
</div>
...
<div>
How can I make it in vue.js, if Option A is selected div b disable, and when Option B is selected div A is disable using Vue.js.
<div id="app">
<select>
<option>A</option>
<option>B</option>
</select>
<div id="a">
A
</div>
<div id="b">
B
</div>
Firstly, you should search Vue's Methods.
Updated: 19/06/2017 - 16:35
And if you want to code sample you can use this to example:
var app = new Vue({
el: '#app',
data: {
selected: ''
},
})
#a {
width: 128px;
height: 128px;
background-color: gray;
}
#b {
width: 128px;
height: 128px;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
<select v-model="selected">
<option disabled value="">Select div name</option>
<option value="a">A</option>
<option value="b">B</option>
</select>
<div id="a" v-if="selected === 'a'">
Div A
</div>
<div id="b" v-else>
Div B
</div>
</div>
If by disabling you mean to hide id or remove it from DOM - yes, you can do it with Vue.
Applies to both:
1. Assign the select to the model like v-model='selected'
2. Initiate it in the model: data() { return { selected: null; (...) } }
v-if - DIV will be removed/insterted from/into DOM
On your divs: <div id='a' v-if="selected=== 'a'"
v-show - div will be hidden/shown
On your divs: <div id='a' v-show="selected=== 'a'"
I have a series of inline elements (with input text boxes) that should fit within one row. See picture below.
The number of input boxes can vary (dynamically loaded via AJAX), as can the labels of the input boxes. In the example below, it is length x width x height.
The div that the inline elements are in is a dynamic width, which depends on the content above and below this row.
In the event of the screenshot below, how can I get the input boxes to equally increase in width so that the content is justified on both sides? Is there a pure CSS solution?
.dynamicWidth {
background-color: green;
height: 400px;
position: absolute;
}
<div class="dynamicWidth">
<div>
<select>
<option>This could be longer or shorter dependending on what is dynamically loaded</option>
</select>
</div>
<hr>
<div>
<span>Length</span>
<input type="text" placeholder="length"><span> x Width</span>
<input type="text" placeholder="width"><span> x Height</span>
<input type="text" placeholder="height">
</div>
</div>
You can accomplish this using flexbox's justify-content and assigning the value of space-around to the div containing the input elements.
.dynamicWidth {
background-color: green;
width: 100%;
height: 400px;
position: absolute;
}
.dynamicWidth div:nth-of-type(2) {
display: flex;
justify-content: space-around;
}
<div class="dynamicWidth">
<div>
<select>
<option>This could be longer or shorter dependending on what is dynamically loaded</option>
</select>
</div>
<hr>
<div>
<span>Length</span>
<input type="text" placeholder="length"><span> x Width</span>
<input type="text" placeholder="width"><span> x Height</span>
<input type="text" placeholder="height">
</div>
</div>
If you're trying to support legacy browsers that don't support flexbox your alternative option would be to wrap each label and input in their own respective divs, give the enclosing parent of those divs a display of table and give the input divs a display of table-cell with width percentages of 33.3% (1/3s).
.dynamicWidth {
background-color: green;
width: 100%;
height: 400px;
position: absolute;
}
.dynamicWidth div:nth-of-type(2) {
display: table;
width: 100%;
}
.input-container {
width: 33.3%;
display: table-cell;
}
<div class="dynamicWidth">
<div>
<select>
<option>This could be longer or shorter dependending on what is dynamically loaded</option>
</select>
</div>
<hr>
<div>
<div class="input-container">
<span>Length</span>
<input type="text" placeholder="length">
</div>
<div class="input-container">
<span> x Width</span>
<input type="text" placeholder="width">
</div>
<div class="input-container">
<span> x Height</span>
<input type="text" placeholder="height">
</div>
</div>
</div>
With the way I have my HTML marked up....
<textarea></textarea>
<div class="body">
<div class="content">don't change this</div>
</div>
Is it possible to change the html inside of .body without changing the html inside of .content?
EDIT:
I'm working on my code editor and my <script> tag in this case is replaced with .content, and <body> tag is replaced with .body.
The .before API seems to be the best solution for my case except if only 3 characters are added (ex. lol). The result in .body is (ex. lolollol)
$('textarea').keyup(function() {
$('.content').before(this.value)
return false
}).trigger('keyup')
textarea {
width: 98%;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<div class="body">
<div class="content">don't change this</div>
</div>
This is tricky, because .body may contain text nodes.
jQuery's contents() method helps :
$('textarea').keyup(function() {
$('.body')
.contents() //get both text nodes and element nodes
.each(function() {
if(this.className !== 'content') {
this.nodeValue= this.innerHTML= ''; //nodeValue needed for text nodes,
//innerHTML for element nodes
}
});
$('.content').before(this.value);
}).trigger('keyup');
textarea {
width: 98%;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>
<ol>
<li>test data here</li>
</ol>
</textarea>
<div class="body">
<div class="content">don't change this</div>
</div>
One workaround would be to get the reference to the .content element and append() it back in to the .body element after re-setting the html(). Try this:
$("textarea").keyup(function() {
var $content = $('.content');
$(".body").html(this.value).append($content);
}).trigger("keyup")
textarea {
width: 98%;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<div class="body">
<div class="content">don't change this</div>
</div>
you can append into $contentrather than changing the entire html
$('textarea').keyup(function(){
$('.body').html(this.value).append($content)
}).trigger('keyup');
fiddle : https://jsfiddle.net/atg5m6ym/3320/
Keep HTML, CSS, and JS separate. See Snippet.
SNIPPET
$(".html").keyup(function() {
$(".body").html(this.value)
}).trigger("keyup")
$(".css").keyup(function() {
$(".style").html(this.value)
}).trigger("keyup")
$(".js").keyup(function() {
$(".script").html(this.value)
}).trigger("keyup")
textarea {
width: 98%;
height: 100px;
}
.tag {
font: 700 16px/1.45 'Consolas';
color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<legend>HTML</legend>
<textarea class="edit html">
</textarea>
</fieldset>
<fieldset>
<legend>CSS</legend>
<textarea class="edit css">
</textarea>
</fieldset>
<fieldset>
<legend>JavaScript</legend>
<textarea class="edit js">
</textarea>
</fieldset>
<hr/>
<section class="printer">
<div class="tag"><html></div>
<div class="tag"><head></div>
<div class="tag"><style></div>
<div class="print style">
</div>
<div class="tag"></style></div>
<div class="tag"></head></div>
<div class="tag"><body></div>
<div class="print body">
</div>
<div class="tag"><script></div>
<div class="print script">
</div>
<div class="tag"></script></div>
<div class="tag"></body></div>
<div class="tag"></html></div>
</section>
http://jsfiddle.net/g3u7hxr6/4/
I have this following code, currently it changes all textareas css values with the dropdown boxes.
I want it so that when 1 textarea is selected and glowing green, the dropdown boxes will only change the css for the selected textarea rather than all of them.
Basically I want to be able to change each text area font individually.
I considered using another dropdown box to select which textarea to change. but there must be a way for the javascript to detect the selected textarea and make changes to it only. I would need to add a unique id field to each textarea but i'm completely lost with the javascript. please help!!!
Answered thanks to Binvention:
http://jsfiddle.net/g3u7hxr6/19/
JS:
$(function () {
$("[id^=font]").on('change', function () {
$('.address').css(this.id, /\d/.test(this.value) ? this.value + "px" : this.value);
});
});
$('.address').focus(
function(){
$(this).parent('div').css('box-shadow','0px 0px 10px green');
}).blur(
function(){
$(this).parent('div').css('box-shadow','0px 0px 0px');
});
HTML:
<div class="options">
<div class="left">Font:
<br>Size:
<br>Weight:</div>
<div class="right">
<select name="fontFamily" id="fontFamily">
<option selected value="Verdana">Verdana</option>
<option value="Arial">Arial</option>
</select>
<br>
<select name="fontSize" id="fontSize">
<option value="8">8</option>
<option selected value="16">16</option>
<option value="24">24</option>
</select>
<br>
<select name="fontWeight" id="fontWeight">
<option selected value="Bold">Bold</option>
<option value="Normal">Normal</option>
</select>
<br /> <br />
</div>
<div class="page">
<div class="left border">
<textarea class="address" tabindex="1">text area 1</textarea>
</div>
<div class="right border">
<textarea class="address" tabindex="4">text area 4</textarea>
</div>
<div class="left border">
<textarea class="address" tabindex="2">text area 2</textarea>
</div>
<div class="right border">
<textarea class="address" tabindex="5">text area 5</textarea>
</div>
<div class="left border">
<textarea class="address" tabindex="3">text area 3</textarea>
</div>
<div class="right border">
<textarea class="address" tabindex="6">text area 6</textarea>
</div>
</div>
CSS:
.left {
float: left;
}
.right {
float: right;
}
.options {
width: 200px;
}
.page {
width: 440px;
}
.border {
border:1px solid #888;
border-radius: 5px;
padding: 5px;
margin: 0 0px 0px 0;
}
textarea {
resize:none;
height: 100px;
width: 200px;
overflow: auto;
font-family: Verdana;
font-size: 16px;
}
You need to create a unique class that marks one as selected like this
$('textarea').click(function(){
$(this).toggleClass('textselected');
});
That will allow you to dynamically pick which text boxes your editing just click to edit click to deselect from editing. You'll need some css to distinguish selected from not selected though.
Then when you edit the font and text properties you use that special class not the text areas to select the property like this
$("[id^=font]").on('change', function () {
$('.textselected').css(this.id, /\d/.test(this.value) ? this.value + "px" : this.value);
});
});
I have edited your fiddle with the necessary changes here
You need to add $(this).addClass('selected'); within your focus event and change the selector to $('.address.selected') within your change event.