I'm programming a menu with two checkboxes inside (mat-menu from Angular with native Javascript checkboxes) and if I'm not clicking exactly in the box that doesn't work, the menu is closing and the box not checked ...
By the way with the mat-menu I haven't found how to block the automatic closure of the menu when I click on it.
Do you have a solution ?
Capture of my menu
<!-- app.component.html -->
<div class="header">
<mat-toolbar color="warn">OpenLayers</mat-toolbar>
<div class="menu">
<button mat-button [matMenuTriggerFor]="menu">Marqueurs</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<p>Piscines : <input type="checkbox" id="piscine" name="piscine" (change)="handleSelected1($event)"/></p>
</button>
<button mat-menu-item>
<p>Parkings : <input type="checkbox" id="parking" name="parking" (change)="handleSelected2($event)"/></p>
</button>
</mat-menu>
</div>
</div>
Here is an easy way of extending the checkbox zone using CSS :after pseudo-element:
p, label, button, .chk-extended{
position: relative;
}
/* The above element position will be taken as reference
for the pseudo-element absolute positioning below:
*/
.chk-extended:after,
.chk-over-elm:after{
position: absolute;
content: '';
border: 1px dotted gray; /* For visibility */
/* The below can be adjusted */
top: -0.5em;
bottom: -0.5em;
left: -0.5em;
right: -0.5em;
}
Regular:<input type="checkbox" />
<br><br>
Extended:<input class='chk-extended' type="checkbox" />
<br><br>
<label>Extended on label:<input class='chk-over-elm' type="checkbox" /></label>
<br><br>
<button>Extended on button:<input class='chk-over-elm' type="checkbox" /></button>
<br>
<p>Extended on p:<input class='chk-over-elm' type="checkbox" /></p>
Note that I used p, label, button as examples in my snippet, but it can work with anything else.
Also, you may need to use !important on the CSS rules to override rules that are already set.
Hope it helps.
Related
My Angular application using ngx-intl-tel-input library when i search country on country list dropdown moving to top .I want to fix postion of dropdown menu when searching on that.
Demo:https://stackblitz.com/edit/ngx-intl-tel-input-demo-5u5c1p?file=src%2Fapp%2Fapp.component.ts
<div style="margin: 50px">
<br>
<form #f="ngForm" [formGroup]="phoneForm">
<div class="mb-2">
<ngx-intl-tel-input
[cssClass]="'custom'"
[preferredCountries]="preferredCountries"
[enableAutoCountrySelect]="true"
[enablePlaceholder]="true"
[searchCountryFlag]="true"
[searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]"
[selectFirstCountry]="false"
[selectedCountryISO]="CountryISO.India"
[maxLength]="15"
[tooltipField]="TooltipLabel.Name"
[phoneValidation]="true"
[separateDialCode]="separateDialCode"
name="phone" formControlName="phone">
</ngx-intl-tel-input>
</div>
<div class="mb-2">
<button (click)="f.reset()">Reset</button>
</div>
</form>
<br>
</div>
GIF:Issue gif
Update ngx-intl-tel-input package to 2.5.0
Add to your css code as below to give the box a fixed position(use !important to prevent override)
:host ngx-intl-tel-input ::ng-deep .country-dropdown{
left: 0px!important;
right: auto!important;
top: 100%!important;
transform: translateY(0px)!important;
bottom: auto!important;
}
SEE EXAMPLE
Your html page contains overflow style that's why it scroll up when type specific country, so you just need to unset it.
I am using React Semantic UI. In css I am trying to change the Background color of a Parent label of an input, so when the radio button is clicked it changes colors. I am hiding the radio button with display none. Since the label gives it a nice button look. Here is my code. In html I just used a input tag and changed the span but it has to be done differently with the react semantic ui library. I was able to get it to work with input and span like in my html version but in this case the click functionality wouldn't work.
Here is a CodeSandbox with the React Semantic Ui Library loaded in its implements the first answer but does not work. https://codesandbox.io/s/kind-tereshkova-u9toz?fontsize=14
I Added the "Compiled" html
<Segment>
<Menu attached="top" borderless={true}>
<Menu.Item>
<Header>
Scale:
</Header>
<Label className="filter_check" size="large">
<Form.Field
label="Year"
control='input'
type='radio'
name='year'
/>
</Label>
</Menu.Item>
</Menu>
</Segment>
.filter_check input {
display: none;
}
input:checked + .filter_check>.label {
background: #00b5ad !important;
width: 100% !important;
}
.field input[type=radio]:checked + label {
background: red;
color: #fff;
margin-left: 1em;
padding: .3em .78571429em;
}
"complied" html
<div class="ui segment">
<div class="ui borderless top attached menu">
<div class="item">
<div class="ui header">Scale:</div>
<div class="ui large label filter_check">
<div class="field"><label><input name="year" type="radio"> Year</label></div>
</div>
</div>
</div>
</div>
After viewing the SandBox, I was able to see that the React code compiles to the following HTML:
<div class="ui large label filter_check">
<div class="field">
<label>
<input name="year" type="radio"> Year
</label>
</div>
</div>
Then I figured you want to modify the parent element upon clicking the input field. This is not trivial and required modifying the parent element, which I did using the onChange prop of the <Form.Field>:
<Label className="filter_check" size="large">
<Form.Field
label="Year"
control="input"
type="radio"
name="year"
onChange={checkInput}
/>
</Label>
With the following function, that adds the checked class to the modified element:
function checkInput(e) {
let labelElement = e.target.parentNode;
let bgElement = labelElement.parentNode.parentNode;
bgElement.classList.add('checked');
}
Then we update the CSS with the following:
div.ui.large.label.filter_check.checked {
background-color: red;
}
And - Voilà!
I am looking for a way to have a list of checkboxes slide out from an input box when I click it. Basically what I'm looking for is a way to create an overlay form that's tethered to the input box. This image shows what I have before click (left) and what I want to happen on click (right).
Right now I have a bootstrap modal pop up on click, but obviously that's not very user friendly. Any working solution will do, from pure css to js packages. My front end currently works with just html, css, js & jquery.
I've tried the following, but that shows my checkboxes through/behind the text that's already there.
.change-search__form-container {
display: none;
position: absolute;
width: 300px;
background: #fff;
border: #000;
border-width: 1px;
}
A pure css solution based on previous answers and Pete's comments.
#myDiv{
display:none;
}
#myDiv:hover, #myDiv:focus-within {
display: block;
}
#myInput:focus + #myDiv {display:block}
<input id="myInput" placeholder="search query">
<div id="myDiv">
<input type="checkbox" id="box1">
<label for="box1">Stuff 1</label>
<input type="checkbox" id="box2">
<label for="box2">Stuff 2</label>
<br>
<input type="checkbox" id="box3">
<label for="box3">Stuff 3</label>
<input type="checkbox" id="box4">
<label for="box4">Stuff 4</label>
</div>
The DIV can be shown by using the below jQuery code
$("#searchbox").focus(function(){
$("#searchresults").show();
});
By using this code the DIV won't go away if the focus from textbox is lost
I solved the problem with the help of the comments. My CSS:
#change-search__form-container {
position: relative;
}
#change-search__dropdown-form {
z-index: 1;
display: none;
position: absolute;
width: 300px;
background: #fff;
border: #000;
border-width: 1px;
}
My jQuery:
$('#change-search__form-container').click(function () {
$('#change-search__dropdown-form').show();
});
This way the container shows on clicking the input box, and doesn't disappear when I click elsewhere (on one of the checkboxes, for example).
there is a great post for a very similar problem:
Css Focus on input div appearing
Runs for Safari and soon in chrome..
#myDiv2{display:none;}
#myInput:focus + div { display: block; }
#myDiv1:focus-within #myDiv2 { display: block; }
<div id="MyDiv1">
<input id="myInput" type="text"/>
<div id="myDiv2">
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div style="display:none">
<span> aaa </span>
</div>
</div>
I'm using Bootstrap as UI framework, what I'm trying to do is make a push menu on the left. Actually, I almost achieve this result, but there are some bugs on the system. In particular, I'm not able to get the menu inline. See the code for more details:
HTML
<div id="calendar-wrapper">
<div class="container-fluid">
<div class="row">
<div id="resource-bar" class="sidenav col-sm-2">
<h4>Resource</h4>
<div class="input-group">
<input type="text" placeholder="Search resource"
class="form-control resource-filter"/>
<span class="input-group-btn">
<button class="clear btn btn-default clean-resource btn-danger" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
<div id="popover-content" hidden></div>
</div>
<div id="calendar-container" class="col-sm-10">
<div id="calendar" class="well"></div>
</div>
</div>
</div>
</div>
<br><br><br>
<button type="button" id="show" >Show</button>
<button type="button" id="hide" >Hide</button>
Note that the html above is adapted for a fiddle example.
CSS
.sidenav
{
background-color: azure;
height: 100%;
width: 0;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.5s;
}
#calendar-container
{
background-color: whitesmoke;
transition: margin-left .5s;
padding: 16px;
}
JS
$(document).ready(function()
{
var resourceContainer = $('#resource-bar');
var calendarContainer = $('#calendar-container');
$('#show').click(function()
{
resourceContainer.css('width', '250px');
calendarContainer.css('margin-left', '250px');
});
$('#hide').click(function()
{
resourceContainer.css('width', '0px');
calendarContainer.css('margin-left', '0px');
});
})
The result when the menu on the left is closed:
Seems that both divs are inline, the problem occurs when I press show button and the menu appears:
BUG actually noticed:
When the menu is opened I get the divs in two line instead of one row
Adding the class col-sm-2 to resource-bar the overflow-x: hidden; doesn't working, in fact, seems that the menu is visible when it should be closed.
col-sm-2 does not go in another line when the minimum resolution of the screen doesn't have enough space in width.
Someone could help me to fix this issues? Thanks. JSFIDDLE.
Edited to another workaround which wouldn't affect bootstrap grid:
With this setup sidebar would be absolute, since it's out of viewport and you set it to a fixed width (250px), using the grid wouldn't be necessary.
Visible input will not overflow once sidebar shows.
Raised buttons above sidebar.
Note the HTML structure was tweaked.
$(document).ready(function() {
var resourceContainer = $('#resource-bar');
var calendarContainer = $('#calendar-container');
$('#show').click(function() {
resourceContainer.css('width', '250px');
calendarContainer.css('margin-left', '250px');
});
$('#hide').click(function() {
resourceContainer.css('width', '0px');
calendarContainer.css('margin-left', '0px');
});
})
div.sidenav {
background-color: azure;
height: 100%;
width: 0;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.5s;
/* added absolute to sidenav since it will have fixed width anyways */
position: absolute;
}
#calendar-container {
background-color: whitesmoke;
transition: margin-left .5s;
padding: 16px;
/* this is just to vertically align with sidebar input */
padding-top: 36px;
}
button {
position: relative;
z-index: 2;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="calendar-wrapper">
<div class="container-fluid">
<div class="row">
<div id="calendar-container" class="col-sm-12">
<div id="calendar" class="well"></div>
</div>
<div id="resource-bar" class="sidenav">
<h4>Resource</h4>
<div class="input-group">
<input type="text" placeholder="Search resource" class="form-control resource-filter" />
<span class="input-group-btn">
<button class="clear btn btn-default clean-resource btn-danger" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
<div id="popover-content" hidden></div>
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<button type="button" id="show">Show</button>
<button type="button" id="hide">Hide</button>
You're issue lies with the mix of bootstrap and your own JavaScript generated style. It seems you already have knowledge of the Bootstrap Grid layout, but to reinforce, https://v4-alpha.getbootstrap.com/layout/grid/ will tell you that there are 12 columns in a row.
Each column is styled by Bootstrap to a set width with set margins in between. You've have all 12 columns filled up in your row. As you add an additional margin to your already-filled-up calendarContainer column, it will pop out of the row.
Therefore, the easiest way to achieve what you want without affecting any other styles is too make your column smaller and reduce the amount of 'margin-left' you push on the column like so https://jsfiddle.net/Zeenglishking/DTcHh/28837/
<div id="calendar-container" class="col-sm-8">
<div id="calendar" class="well"></div>
</div>
$('#show').click(function()
{
resourceContainer.css('width', '250px');
calendarContainer.css('margin-left', '50px');
});
Also, as you say "seems infact that the menu is even visible also when is closed.", the menu is indeed visible. This is again down to the fact of the bootstrap styling of the grid-layout. If you can figure out what styles are creating this issue (F12), you can override them using "something:!important". https://css-tricks.com/snippets/css/style-override-technique/ . Otherwise, find another way. If you mess around with css positioning elements too much, it's easy to get lost and jumbled with the rest of your code.
EDIT (in regard to comment):
What needs to be used in addition to this is 'col-xs-**' with a smaller size column, allowing for a responsive design and for it to work on the smaller viewports such as the one in JSFiddle. I have updated my fiddle to include
col-xs-1
and
col-xs-4
on resource-bar and calendar-container respectively. This will change the size of the column, upon resize of the screen/viewport to ensure it doesn't drop down on extra-small viewports. More info at http://getbootstrap.com/css/#grid-options
Upon using Bootstrap framework you almost acquire yourself to a certain standard. Shortcuts in fixing this can cause problems with other elements. You're probably best to read more into it before chucking random positioning in to fix certain elements on a page.
I'm relatively new to web programming (i.e. less than a month).
What I am trying to do is create a nice smooth hide/reveal effect for an FAQ list, as can be seen on this webisite:
http://www.hl.co.uk/pensions/sipp/frequently-asked-questions
I realise that this website is using javascript to create the effect, but I was wondering if there was anyway to do this with just CSS.
The HTML5 < details > < summary > tags seem to work fine in terms of structure (despite only working in chrome and safari):
<details>
<summary>About Us</summary>
<p>Some information about us</p>
</details>
The only problem is that the transitions are very harsh, and yet I can't seem to use CSS transitions as I want the animation on a click, rather than hover etc (plus the properties don't change so there is nothing to transition between).
Is there anyway of doing this, or does it just require getting to grips with Javascript? Obviously that is the next step anyway, I was just hoping there was a way to do this in CSS so that I could get this working asap.
Thanks in advance.
If you get creative, this can actually be done with pure CSS.
(PS - I only put a <form> wrapper to allow the radio buttons to be reset without affecting the multiple-choice checkbox buttons)
Here is a nice example for you
CSS
span, p {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
input[type="reset"] {
display: block;
border: 1px solid pink;
background: maroon;
color: white;
padding: 5px;
margin: 5px;
font-family: sans;
}
p {
float: left;
clear: left;
overflow: hidden;
display: table-row;
}
label {
width: 100%;
font-size: 200%;
font-weight: bold;
}
input[type="checkbox"], input[type="radio"] {
border: none;
background: transparent;
display: none;
}
input[type="checkbox"] ~ span, input[type="radio"] ~ span {
display: block;
float: left;
clear: left;
}
input[type="checkbox"]:not(:checked) ~ span, input[type="radio"]:not(:checked) ~ span {
opacity: 0;
height: 0;
}
input[type="checkbox"]:checked ~ span, input[type="radio"]:checked ~ span {
opacity: 1;
height: auto;
}
HTML
<h1>Singles</h1>
<form id="singles" onsubmit="return false;">
<p class="option">
<input type="radio" id="one" name="hard" />
<label for="one">OneOneOneOne</label>
<span><input type="reset" form="singles" value="Hide" />
If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
</p>
<p class="option">
<input type="radio" id="two" name="hard" />
<label for="two">TwoTwoTwoTwo</label>
<span><input type="reset" form="singles" value="Hide" />
Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
</p>
<p class="option">
<input type="radio" id="three" name="hard" />
<label for="three">ThreeThreeThreeThree</label>
<span><input type="reset" form="singles" value="Hide" />If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
</p>
<p class="option">
<input type="radio" id="four" name="hard" />
<label for="four">FourFourFourFour</label>
<span><input type="reset" form="singles" value="Hide" />
Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
</p>
</form>
<h1>Multiples</h1>
<form id="multiples" onsubmit="return false;">
<p class="option">
<input type="checkbox" id="one2" name="easy" />
<label for="one2">OneOneOneOne</label>
<span>If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
</p>
<p class="option">
<input type="checkbox" id="two2" name="easy" />
<label for="two2">TwoTwoTwoTwo</label>
<span>Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
</p>
<p class="option">
<input type="checkbox" id="three2" name="easy" />
<label for="three2">ThreeThreeThreeThree</label>
<span>If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
</p>
<p class="option">
<input type="checkbox" id="four2" name="easy" />
<label for="four2">FourFourFourFour</label>
<span>Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
</p>
</form>
Make two classes. Each with different transitions.
Use toggleClass to change your html element to the class with the transition you want.
jQuery toggleClass
It still uses javascript, but it's just a simple class switch so your animations will be smoother.
If you only have a small number of items, Deryck's answer suits you best.
However, if it's a large amount, Javascript/jQuery is your best bet.
How it's done:
jQuery:
$('.detail').slideUp(); //hides all the details
$('.item').on('click', function({
$('.detail').slideUp(); //hides any shown details
$(this).next().toggleSlide(); //shows the details of the item selected
});
HTML:
<div class="item">Item 1</div>
<div class="detail">Details about Item 1</div>
<div class="item">Item 2</div>
<div class="detail">Details about Item 2</div>
<div class="item">Item 3</div>
<div class="detail">Details about Item 3</div>
...
.item indicates an item, e.g. FAQ question, and .details indicates the expansion of that item, e.g. the answer to a FAQ question.
Alternatively, you can nest the .details inside of their respective .items.
To add to the jQuery answers...
Wrap what you have in a div with an id of say "FAQ". Wrap the answer in another div so you have something like
<div id="FAQ">
<section>
<summary>Question 1</summary>
<div>
<p>Some Stuff 1</p><p>Some Stuff 2</p>
</div>
</section>
<!-- Repeat as required -->
</div>
Add the following css to hide the answers and make section a block element
#FAQ section>div
{
display:none;
}
#FAQ section
{
display:block;
}
Include the jquery library and then include the following in a script tag
$(document).ready(){
$("#FAQ summary").click(function(){
$(this).next("div").slideToggle('slow');
});
};
See it in action here: http://jsfiddle.net/qu6ef/
This will is a little different from some of the other solutions in that the answer will only be hidden if the question is clicked again. Why stop users from seeing more than one answer at a time? The nice thing about this solution is it is achieved with 5 lines of javascript once you include jQuery
Take some time to look up what I've used with jQuery:
Document Ready
Click Event Listener/Handler
Next - Selects a sibling
Sliding Animation