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>
Related
I'm trying to hide an entire html row, which is a div tag, via javascript. However, I've been unable to do so, so far. The id I'm trying to hide on is the "row", which is located in the parent div. I'd like to hide everything contained within this div & all child div's (probably not using the right terminology)
Here's my html. As you'll see, the "row" value is contained within the parent div. "TherapistsName" is the name of the textarea:
var therapistsName = container.find(".TherapistsName");
var row = therapistsName.parents(".row").first();
row.hide();
And here's the html that I want to hide:
<div class="row mr-display-row row-eq-height work-task-question-container question-row" style="display: flex;" data-node-name="TherapistsName-7" data-persist="true">
<div class="col-4 mr-display-title">
<span class="displayValue">Therapists Name:</span>
</div>
<div class="col-8">
<div class="question-item" style="display: table-cell; word-break: break-word; overflow-wrap: break-word;">
<div class="input-text-length-container">
<textarea name="TherapistsName-7" class="main-input TherapistsName input-text-length auto-size" cols="85" data-allow-persist-answer="True" data-developer-name="TherapistsName" data-disable-on-hide="False" data-hidden="False" data-identifier="" data-node-name="TherapistsName-7" data-parent-branch-name="SpokeWithTherapist-Yes" data-previous-value="" data-question-group-name="" data-question-id="175" data-question-messages="[]" data-read-only="False" data-reset-answer-on-hide="True" data-tree-level="3" data-type="string" data-value-orig="" data-value-type="TextArea" id="TherapistsName-7" maxchars="1000" onchange="assignedWorkTasks.QuestionChange(this);;assignedWorkTasks.QuestionChangeComplete(this);" rows="1" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 26px;"></textarea><br>
<span class="chars-remaining" style="width:100%;float:left;margin:0 0 0 0;font-size:10px;">1000 characters remaining
</span>
</div>
</div>
</div>
</div>
Any idea why this would hide the entire div tag??
Thanks
Why not add a css class which contains display:none; and then add this class to the parent classlist using js?
row.hide(); You are saying hide this element. Its is doing what you asked. Hide the first parent element you find with the selector .row .
Since you are using jQuery there is a few answer's that can be used here.
Here is a quick example from jQuerys site =>
var spans = $( "span" );
$( "p" ).find( spans ).css( "color", "red" );
Don't forget you can use jQuerys dollar sign shorthand $("someElement") to quickly select the DOM element you want.
Doc reference: https://api.jquery.com/find/
You can use jQuery for this problem.
$("body").find(".TherapistsName").find(".row").first().hide();
First add the id as row then add
$('#row').addClass("displaynone");
by adding displaynone you can definitely hide
<div class="row mr-display-row row-eq-height work-task-question-container question-row" id='row' style="display: flex;" data-node-name="TherapistsName-7" data-persist="true">
<div class="col-4 mr-display-title">
<span class="displayValue">Therapists Name:</span>
</div>
<div class="col-8">
<div class="question-item" style="display: table-cell; word-break: break-word; overflow-wrap: break-word;">
<div class="input-text-length-container">
<textarea name="TherapistsName-7" class="main-input TherapistsName input-text-length auto-size" cols="85" data-allow-persist-answer="True" data-developer-name="TherapistsName" data-disable-on-hide="False" data-hidden="False" data-identifier="" data-node-name="TherapistsName-7" data-parent-branch-name="SpokeWithTherapist-Yes" data-previous-value="" data-question-group-name="" data-question-id="175" data-question-messages="[]" data-read-only="False" data-reset-answer-on-hide="True" data-tree-level="3" data-type="string" data-value-orig="" data-value-type="TextArea" id="TherapistsName-7" maxchars="1000" onchange="assignedWorkTasks.QuestionChange(this);;assignedWorkTasks.QuestionChangeComplete(this);" rows="1" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 26px;"></textarea><br>
<span class="chars-remaining" style="width:100%;float:left;margin:0 0 0 0;font-size:10px;">1000 characters remaining
</span>
</div>
</div>
</div>
</div>
jquery
var therapistsName = container.find(".TherapistsName");
var row = therapistsName.parents(".row").first();
$('#row').addClass("displaynone");
It looks like it does hide the entire row,
demo hide row
But as mentioned, if you're able to add an ID and avoid the traversing w/ jQuery, you'd be simplifying it significantly.
1.I am trying to get a fixed position div (#externalPopupHeader) to inherit the width of its parent width(#reportsWrap) with no success.
2 I am also trying to get the #externalPopupHeader div with the lengthy content to scroll horizontally WITHOUT the scroll bar being visible. This is required because I would then Like to use javascript to sync the column headings with the content below.
#reportsWrap{
min-width: 1050px;
overflow: hidden;
position: relative
}
#externalPopupHeader{
width: inherit // Have aslo tried min-width: 1050px, and width: 100%;
position: fixed;
top: 0
overflow-x: scroll // hidden disables the scrolling.
}
<div id="reportsWrap">
<div id="externalPopupHeader">
<div id="genConfigFieldsWrap">
<div class="genField">Record No.</div>
<div class="genField">Serial Number</div>
<div class="genField">Room Number</div>
<div class="genField">Codec IP</div>
<div class="genField">Model</div>
<div class="genField">Version</div>
<div class="genField">NTP Status</div>
<div class="genField">Speaker Track</div>
<div class="genField">Max RX Kbps</div>
<div class="genField">Max TX Kbps</div>
<div class="genField">Default Call Kbps</div>
<div class="genField">Remote View</div>
<div class="genField">Voice VLAN</div>
<div class="genFieldTrans">Transport</div>
<div class="genField">Olson Zone</div>
<div class="genField">Time Zone</div>
<div class="genField">Helpdesk</div>
<div class="genField">Provisioning</div>
</div>
</div>
<div id="innerReportWrap">
<div id="genConfigAnchor">
</div>
</div>
</div>
your code is ok. your div data is to small to check the original behavior.
try to add some more text to check.
<div class="genField">NTP Status NTP Status NTP Status NTP Status</div>
then you will see that it is correct.
you can check this example
https://jsfiddle.net/r61t50sb/1/
<script id="canteen_card_row_template" type="text/html">
<div class="normal-box">
<div class="subtitle-box">
<div class="mensa-img">
<img src="{{type.[0].image}}" id="mensa-image">
</div><span class="options-title" id="mensa-text">{{title.de_DE}}</span>
</div>
<div class="side-text-box">
<span class="side-text">{{price.student}}€</span>
</div>
<div class="small-text">
<span class="normal-text" id="mensa-text">{{content}}</span>
</div>
</div>
</script>
CSS
#mensa-image{
height: 13px;
width:13px;
border: none !important;}
I have the problem where img src="blabla" is... Using handlebars and a webservice that template is loaded 4 times.. The fourth "normal-box" does not have content therefore no image(thats ok).. the problem is, since it has no image the div where the image is placed should be blank, but there an unwanted border instead... Here is an image of how it looks like pic
Use 0 instead of none
border: 0;
not
border: none;
Also, if you are generating multiple "mensa-image" images then you should be using class instead of ID.
Try this CSS rule instead and remove the ID from the image:
.mensa-image img {
border: none;
}
and HTML (partly):
<div class="subtitle-box">
<div class="mensa-img">
<img src="{{type.[0].image}}">
</div>
<span class="options-title">{{title.de_DE}}</span>
</div>
As #Lowcase wrote, you should not use an ID several times (same for the text span, BTW). If you simply remove the ID, the above rule should work.
That's the work of the browser when no image is found. The easiest fix is just to add a transparent .png.
its an i tag
(the image is)
which uses css to display the icons
through a cdn hosted stylesheet and how would I incorporate that.
So lets say there is a magnifying glass icon on the web page, we the user clicks on the icon , a div dropdown search box appears. that is what i am asking help for.
not sure how to do it but I know I am close.
The icon is the
<section class="search">
<div id="searchbar"><i class="search-bar"></i></div>
<div class="search-dropdown hidden">
<div class="searchbox">
<input placeholder="search..." type="text"/>
</div>
</div>
</section>
//// javascript////
$(document).ready(function(){
$('#searchbar').click(function(){
$(this).siblings('.search-dropdown').toggleClass('hidden');
});
});
Don't know what your goal is, but your code seems to work.
Have you checked so your div wraps around the image so when you click it you click inside the div (try to do as I in the fiddle, a border around the div so you can see).
else it should work just fine.
What is the css for the .hidden class?
<style>
.hidden
{
background-color: yellow;
}
#searchbar
{
border: 1px solid black;
height: 16px;
width: 50px;
}
</style>
<section class="search">
<div id="searchbar"><i class="search-bar">CLICK</i></div>
<div class="search-dropdown hidden">
<div class="searchbox">
<input placeholder="search..." type="text"/>
</div>
</div>
</section>
Script:
$(document).ready(function(){
$('#searchbar').click(function(){
$(this).siblings('.search-dropdown').toggleClass('hidden');
});
});
Check this jsfiddle out!
I´m using bootstrap 3 to draw a well with 3 areas: left area, center area and right area. On each area I will be plotting text, inputing data and using some gryphicons.
I can´t get it vertically or horizontally aligned inside the well. Here is my example code.
<div class="well">
<small class="pull-left">LeftText</small>
<small>CenterText</small>
<small class="pull-right">RightText</small>
</div>
Check jsfiddle here: JsFiddle Example
How can I fix it and make it work with the correct aligments ?
Thanks for any kind of help.
You can do it like this.
<div class="well">
<div class="col-xs-4">
<p class="text-left">LeftText</p>
</div>
<div class="col-xs-4">
<p class="text-center">CenterText</p >
</div>
<div class="col-xs-4">
<p class="text-right">RightText</p >
</div>
</div>
I have updated the fiddle accordingly.
Any specific reason why your not using the bootstrap columns?
I would try:
<div class="well">
<small class="col-xs-4">LeftText</small>
<small class="col-xs-4">CenterText</small>
<small class="col-xs-4">RightText</small>
</div>
And in your css:
.well {
text-align: center
}
http://jsfiddle.net/k5yur/
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.well {
overflow: hidden;
}
.well div {
float: left;
width: 33.33333333%;
}
.well-center {
text-align: center;
}
.well-right {
text-align: right;
}
<div class="well">
<div class="well-left"><small>LeftText</small></div>
<div class="well-center"><small>CenterText</small></div>
<div class="well-right"><small>RightText</small></div>
</div>
This any help? http://jsfiddle.net/498bc/11/