We Keep Coding

Angular Drag and Drop - DropList that was display none, will not recieve items even after setting to display block

My requirements call for hiding the cdkDropList until the user starts to drag an item. So when the user starts to drag an item, the drop lists get visible, and they will start to receive them.
I achieve it by setting display none in the CSS as below.
.drop {
display: block;
}
// this makes the drop element display: none until you start dragging (angular adds the class .cdk-drop-list-dragging when drag is started)
.drop(:not(.cdk-drop-list-receiving):not(.cdk-drop-list-dragging)) {
display: none;
}
However, this does not work, and the cdkDropList elements will not receive my items.
If I remove display: none; and do instead visibility: hidden; it will work. The problem is that I need it to not take out space in the DOM. (I tried all approaches like position: absolute, and anything that moves/removes the element will prevent this from being dropable once displayed).
Any help is appreciated.
Thanks!

Center date in input field with date type

I want to center date in input, not input inside div. If I do centering, it centers date inside of part of input because there is a right-hand side panel for choosing a date based on a calendar, which resizes dependently of input width.
Small code snippet for demonstration:
.center {
text-align: center;
}
<div>
<input type='date' class='center' value='2006-01-01' width='100'>
</div>
I tried to force centering with ignoring the right panel. Then the date is not fully visible.
Another approach was to find the size of calendar choice panel, and I did not find any mechanism both on StackOverflow and Internet to calculate the width, plus I did experiments with a ruler to find the proportion, and it also did not work.
The last, I tried searching into StackOverflow and did not find any similar questions.
In my project, I use plain JavaScript, jQuery, HTML, and CSS.

First of all, there is nothing wrong with the text-align: center part, it is working as expected, the problem is that the buttons on the right side of the input (the ones that appear when you hover over the input) need to take up some space as well.
So, you will have to hide those!
You can use the required="required"attribute on your <input> element if you want to remove the "x" button, and these 2 CSS rules to control the arrows and the dropdown (however, do note how the nice date-picker doesn't appear anymore and you have to type down a date using your keyboard when you use the input[type=date]::-webkit-calendar-picker-indicator rule):
.center {
text-align: center;
}
input[type=date]::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
input[type=date]::-webkit-calendar-picker-indicator {
-webkit-appearance: none;
display: none;
}
<div>
<input type='date' class='center' value='2006-01-01' width='100' required="required">
</div>
See this question if you are interested in more of this.
Or you can just use the JQuery date-picker if you want to.

If you want to center an <input> inside a <div>, you need to apply text-align: center to the <div> element, not the <input>. This can be achieved by simply moving your class .center to the <div> instead:
.center {
text-align: center;
}
<div class='center'>
<input type='date' value='2006-01-01'>
</div>
EDIT:
If you want to center the text in an <input type='date'>, you first need to convert the input to a block-level element with display: block. Note that the text-align is relative to the dropdown caret and cross, so you might actually want to use text-align: right and a slightly larger width instead:
.center {
display: block;
text-align: right;
width: 170px;
}
<div>
<input type='date' class='center' value='2006-01-01'>
</div>
Hope this helps! :)

I strongly suggest you not to use browser’s datepickers cause they’re not very reliable and cross-browser (many older browsers don’t support it).
jQuery UI is a great framework for these widgets, and you can completely customize the datepicker through CSS.
Note that you’ll need the base jQuery framework for jQuery UI to work but it is very lightweight and I suggest you to use it even with other JavaScript codes in your application.

Instead of adding 'required', I recommend adding
input[type=date]::-webkit-clear-button
otherwise the 'x' still takes some space and it's not truely centered.

Centering images and text in a div

I have been having some trouble centering some items on my website.
The items in question are in the passphrase generator (images and text elements in the dark box). I have tried the usual margin:auto, all the different display properties, text-align, align-self, align-content and align-items. None worked.
I was also wondering if anyone knew how we could get the text element under our images isntead of to the right, this is the code used for the generator.
All help is appreciated

A p tag is a block element, so the default width is 100%. This is why you have one element per line
#passphraseBilder {
text-align: center;
display: block;
}
#passphraseBilder p {
display: inline-block;
}
Turn the p tag into inline or inline-block, and it will work ;-)
Have a look to the difference between block and inline: https://www.w3schools.com/html/html_blocks.asp

Try this:
#passphraseBilder {
display:inline-block;
width:100%;
}
Note: I have just added the properties which you should add or overwrite. Existing properties has to be there.

Radio button remove down correctly

I've two radio buttons with Drop down and I need to put the drop down
in parallel to the second radio button,when we add to the css code
the following its working but this is not a good solution since if I've
bigger page with other control this can override them either
#__box0 {
margin-top: 20px;
margin-left: 20px;
}
there is another option to do that with CSS?
http://jsbin.com/ziziqeyopu/edit?css,js,output
The Html is renders in the renderer method
This is SAPUI5
http://openui5.org/
code but for the question its not relevant since
renderer is related to pure html/css...
i've tried with the following which doesnt works.
.mylist-content>div:first-child {
margin-right:30px
margin-top:50px
}
.mylist-radiolist>DIV:last-child {
margin-left: 30px;
margin-top:100px;
}

If you still haven't figured it out, give this a try:
.mylist-content #__box0 {
position: relative;
top: 20px;
left: 20px;
}
What you see above should do the same thing as your first attempt, but not interfere with anything else on your page, by:
Adding extra application restrictions to the CSS rule, by having the .mylist-content scope restriction (even though this should not be necessary, in theory, because #__box0 is an ID and should be unique on the page).
Shifting the position of the dropdown without affecting any other elements - this is done with position: relative and the corresponding top and left offsets.
Without knowledge of SAP UI and/or your particular situation, I doubt someone will be able to give you a more appropriate answer.

Printing only a textarea

I would like to print only the contents of a textarea element from a website page. In particular, I would like to ensure that nothing gets clipped by the boundary of the textarea as the contents will be quite large.
What is the best strategy for tackling this?

Make a print stylesheet where all of the elements except the textarea are set in CSS to display: none;, and for the textarea, overflow: visible.
Link it to the page with the link tag in the header set to media="print".
You're done.

Make a different CSS with media set to print
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
http://webdesign.about.com/cs/css/a/aa042103a.htm

If the user clicks "Print," you could open a new window with just the contents of the textarea on a blank page and initiate printing from there, then close that window.
Update: I think the CSS solutions being suggested are probably better strategies, but if anybody likes this suggestion, they can still upvote it.

I'd go for a combo of the other suggestions.
Don't kill the print button for the whole page with a stylesheet override, but instead provide a button by the textarea, that lets the user print only those contents.
That button would open a new window, with menus/chrome etc. and clone the textarea content only (and or provide a print css file)

I made a print media CSS to hide a number of the fields. The problem was complicated by the fact that I was using nicEdit which dynamically creates an IFRAME. So I had to add an event that took onblur events and copied them over to a hidden (except for printing) Div. "divtext" is the hiddent Div, and "storyText" is the TextArea.
textarea {
display: none;
}
*/ #divtext {
display: block;
}
div, DIV {
border-style: none !important;
float: none !important;
overflow: visible !important;
display: inline !important;
}
/* disable nearly all styles -- especially the nicedit ones! */
#nav-wrapper, #navigation, img, p.message, .about, label, input, button, #nav-right, #nav-left, .template, #header, .nicEdit-pane, .nicEdit-selected, .nicEdit-panelContain, .nicEdit-panel, .nicEdit-frame {
display: none !important;
}
/*hide Nicedit buttons */
.nicEdit-button-active, .nicEdit-button-hover, .nicEdit-buttonContain, .nicEdit-button, .nicEdit-buttonEnabled, .nicEdit-selectContain, .nicEdit-selectControl, .nicEdit-selectTxt {
display: none !important;
}
The javascript code for nicEdit:
<script type="text/javascript" src="/media/nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function () {
var nic = new nicEditor({
fullPanel: true
}).panelInstance('storyText');
document.getElementById("storyText").nic = nic;
nic.addEvent('blur', function () {
document.getElementById("storyText").value =
nic.instanceById('storyText').getContent();
document.getElementById("divtext").innerHTML = nic.instanceById('storyText').getContent();
});
});
</script>

Did the overflow: visible; on textarea actually work for any of you? FF3 seems to ignore that rule on textarea in print sheets. Not that it's a bug or anything.