what I want, vertical menu:
menu item 1
menu item 2
user pressed menu item 1 and on the same page,
appear input dialogue between two menu items:
menu item 1
input field 1
input field 2
button
menu item 2
It is rather simple two create vertical menu list and
dialogue with such content, but how to combine them?
To achieve what you want you can try with an accordion menu, see the follow example:
$(document).ready(function(){
// init the accordion on the menu
$('.ui.accordion').accordion();
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<div class="ui vertical fluid accordion menu">
<div class="item">
<a class="title">
<i class="dropdown icon"></i>Menu item 1
</a>
<div class="content">
<div class="ui form transition hidden">
<form class="ui form">
<div class="field">
<label>Input field 1</label>
<input type="text" name="first-name" placeholder="Input field 1">
</div>
<div class="field">
<label>Input field 2</label>
<input type="text" name="last-name" placeholder="Input field 2">
</div>
<button class="ui button" type="submit">Button</button>
</form>
</div>
</div>
</div>
<div class="item">
<a class="title">
<i></i>Menu item 2
</a>
</div>
</div>
Hope it helps,
Related
I have a layout that is using the Bourbon Refills UI elements and I have a question regarding modals. More specifically, I have a case where I need multiple modals opened at once.
So...this is what is supposed to happen: A user clicks on a button that opens a normal Bourbon Refills Modal. Within that modal, the user has the option to click on a button to open an additional settings modal.
Currently I have one main modal and one nested inside of it. Sadly, the nested modal is constrained within the bounds of the first in Webkit and Gecko browsers. On IE...it doesn't at all :(
Is there any other way of pulling this off with Refills? I was thinking...maybe assigning a click event to the button to open a second (separate) modal that would sit on top of the first in z-index order?
Thanks in advance for your help - any is appreciated.
<div class="modal">
<label for="modal-1">
<div href="#" class="btn modal-trigger">Modal 1 Trigger Button</div>
</label>
<input class="modal-state modal-state-a" id="modal-1" type="checkbox" />
<div class="modal-fade-screen modal-fade-a">
<div class="modal-inner">
<div class="modal-close modal-close-a" for="modal-1"></div>
<h2>Modal 1 Title</h2>
<label>Input Label</label>
<input value="Input" />
<!-- Begin Nested Modal 2 -->
<div class="modal">
<label for="modal-2">
<div href="#" class="btn modal-trigger">Modal 2 Trigger Button</div>
</label>
<input class="modal-state modal-state-b" id="modal-2" type="checkbox" />
<div class="modal-fade-screen modal-fade-b">
<div class="modal-inner">
<div class="modal-close modal-close-b" for="modal-2"></div>
<h2>Modal 2 Title</h2>
<label>Input Label</label>
<input value="Input" />
</div>
</div>
</div>
<!-- End Nested Modal 2 -->
</div>
</div>
</div>
OK, I figured it out. Admittedly, this threw me off a bit because these are not JS-powered modals, but instead they rely on the ability to style an an element based on a hidden checkbox and its sibling element (in this case: < label >)
Easy-peasy. All we need to do is separate the modals and assign the :checked state to the hidden checkbox of the modal we want to open. For example:
First, separate the modals as you normally would. Then in Modal 1, create the link/button you want to have users click to open Modal 2. For the sake of argument, we will give it an ID of #update.
<div class="modal">
<label for="modal-1">
<div href="#" class="btn modal-trigger">Modal 1 Trigger Button</div>
</label>
<input class="modal-state modal-state-a" id="modal-1" type="checkbox" />
<div class="modal-fade-screen modal-fade-a">
<div class="modal-inner">
<div class="modal-close modal-close-a" for="modal-1"></div>
<h2>Modal 1 Title</h2>
<label>Input Label</label>
<input value="Input" />
<a class="btn btn__active" id="update">Update</a> <!-- New Button to open Modal 2-->
</div>
</div>
</div>
<div class="modal">
<label for="modal-2">
<div href="#" class="btn modal-trigger">Modal 2 Trigger Button</div>
</label>
<input class="modal-state modal-state-b" id="modal-2" type="checkbox" />
<div class="modal-fade-screen modal-fade-b">
<div class="modal-inner">
<div class="modal-close modal-close-b" for="modal-2"></div>
<h2>Modal 2 Title</h2>
<label>Input Label</label>
<input value="Input" />
</div>
</div>
</div>
Now...write a little bit of jQuery to assign the :checked state to the appropriate modal.
$("#update").click(function() {
var modalTrigger = $("input#modal-2");
modalTrigger.prop("checked", !modalTrigger.prop("checked"));
});
Done. Now the second modal opens up correctly over the first. I just tested this and it works in most browsers (including IE9-11) since we're not doing anything different from the base refills modals.
Pardon my jargon, I just recently got into web development and have poor communication skills.
I'm using bootstrap 4 alpha and JQuery 3.
I have a chatroom within one fluid container with two rows: a send-message bar and a recieve message column(plus the pm column and userlist column)
Here is my code:
<div class="container-fluid">
<div class="row">
<!-- Chat View Column -->
<div class="col-sm-2">
<ul id="privateChats" class="list-group fixed" style=" margin-top:20px;">
</ul>
</div>
<!-- Message View Column -->
<div class="col-sm-8" style="float: left;">
<ul class="" id="messages" style="margin: 20px;"></ul>
</div>
<!-- Connected Users Column -->
<div class="col-sm-2">
<ul id="connectedUsers" class="list-group fixed" style=" margin-top:20px">
<div class="btn-group-vertical" style="width:100%">
</div>
</ul>
</div>
</div>
<!-- Send message bar -->
<div class="row">
<form action="">
<div class="col-lg-9 col-md-9 text-right">
<input type="text" id="m" style="width:100%; height:55px;" class="form-control" placeholder="Message" autocomplete="off" />
</div>
<div class="col-lg-3 col-md-3 text-left">
<button style="width:50%"><span class="fa fa-paper-plane" style="font-size:38px; color:white;"></span></button>
</div>
</form>
</div>
</div>
When the "Message View Column" fills up, text disappears behind the second row and I can't see the most recent messages. How do I fix this?
Let me know if I should add more detail
I added the Javascript tag because I'm not opposed to using Javascript to solve the problem
Adding a margin-bottom: 98px; (height of the 2nd .row) to the css of the 1st .row, would solve your problem. Then you can use scrollBy(0, 100) to scroll the page to the bottom (used 100 as example)
I am learning framework7 and I wonder if it is possible to create an input type="text" outside UL tag. On the code below, the css is not rendering on my textfield. Please see code comments.
And here is the fiddle.
<!-- THIS WILL WORK -->
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<input type="text" name="name">
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- NOW, WHAT IF WE WON'T SHOW TEXTFIELD IN INSIDE UL? -->
<!-- THE CSS WON'T WORK ANYMORE, IDK WHAT IS THE CORRECT CSS CLASS EITHER TO WRAP THE ELEMENT -->
<div class="content-block">
<input type="text" />
</div>
If you put the input outside the list, you will lose the separating lines, but it is possible adding the required classes:
<!-- THIS WILL WORK -->
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<input type="text" name="name">
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- NOW, WHAT IF WE WON'T SHOW TEXTFIELD IN INSIDE UL? -->
<div class="content-block list-block">
<div class="item-input">
<input type="text" value="text here" />
</div>
</div>
Here: https://jsfiddle.net/k5gd7Lww/10/
I'm using a Semantic UI Search Selection and am using a very simple implementation of .dropdown() to convert static markup into a searchable country input.
The problem is that this input automatically focuses and the menu drops down on page load. If I wait until $(window).load(), I can remove the active and visible classes from the element (and its children), but I'd rather instantiate the menu without these to begin with.
My markup looks something like the following:
$('.ui.modal').modal('show');
$('.ui.dropdown').dropdown();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css">
<div class="ui modal">
<i class="close icon"></i>
<div class="content">
<div class="ui form">
<div class="field">
<label>I am a:</label>
<select class="ui dropdown" name="homeowner_type">
<option value="">--</option>
<option value="Homeowner">Homeowner</option>
</select>
</div>
<!-- The dropdown in question -->
<div class="field">
<label>Country:</label>
<div class="ui fluid search selection dropdown">
<input type="hidden" name="country">
<i class="dropdown icon"></i>
<div class="default text">Select Country</div>
<div class="menu">
<div class="item" data-value="us"><i class="us flag"></i>United States</div>
<div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
<div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
<!-- additional countries -->
</div>
</div>
</div>
</div>
</div>
</div>
There are no other instances of .dropdown() in my code. Thoughts?
EDIT: I've discovered that this is happening because the form is included within a modal. The issue doesn't occur when the form is outside of the modal.
As of April 2015, there is an undocumented Modal setting which is responsible for focusing the first input element contained within the Modal:
autofocus: function() {
if(settings.autofocus) {
var
$inputs = $module.find(':input:visible'),
$autofocus = $inputs.filter('[autofocus]'),
$input = ($autofocus.length > 0)
? $autofocus
: $inputs
;
$input.first().focus();
}
},
This setting is available to us under the $.fn.modal.settings. As a result, the following will prevent this search input from focusing when the Modal opens:
$('.ui.modal').modal({
autofocus: false,
}).modal('show');
And a runnable example:
$('.ui.modal').modal({
autofocus: false,
}).modal('show');
$('.ui.dropdown').dropdown();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css">
<div class="ui modal">
<i class="close icon"></i>
<div class="content">
<div class="ui form">
<div class="field">
<label>I am a:</label>
<select class="ui dropdown" name="homeowner_type">
<option value="">--</option>
<option value="Homeowner">Homeowner</option>
</select>
</div>
<!-- The dropdown in question -->
<div class="field">
<label>Country:</label>
<div class="ui fluid search selection dropdown">
<input type="hidden" name="country">
<i class="dropdown icon"></i>
<div class="default text">Select Country</div>
<div class="menu">
<div class="item" data-value="us"><i class="us flag"></i>United States</div>
<div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
<div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
<!-- additional countries -->
</div>
</div>
</div>
</div>
</div>
</div>
I try to make a form validation, but if I hit submit, the form disapears before giving me the feedback:
<div class="ui right aligned grid">
<div class="ui three wide column">
<div class="ui center aligned inverted orange segment">
<div class="ui animated fade large inverted button" onclick="contact()">
<div class="visible content">Say Something!</div>
<div class="hidden content">Express yourself ;)</div>
</div>
</div>
</div>
</div>
<div class="ui first coupled modal">
<i class="close icon"></i>
<div class="header">
tell me something
</div>
<div class="content">
<form class="ui form" method="post" action="/msg">
<h4 class="ui dividing header">What do you think</h4>
<div class="field">
<label><i class="write icon"></i></label>
<textarea name="txt" class="field" placeholder="write something" required></textarea>
<input class="ui green button" type="submit" value="gtt"/>
</form>
</div>
</div>
</div>
<div class="ui small second coupled modal">
<div class="header">
<i class="red heart icon"></i>
</div>
<div class="content">
<div class="description">
<h1>Thank you</h1>
</div>
</div>
<div class="actions">
<div class="ui approve inverted blue button">
<i class="checkmark icon"></i>
Bye ^_^
</div>
</div>
The JS:
function contact(){
$('.coupled.modal')
.modal({
allowMultiple: false
})
;
// attach events to buttons
$('.second.modal')
.modal('attach events', '.first.modal .button')
;
// show first now
$('.first.modal')
.modal('show')
;
}
And here is how the first windows diseapears without letting me validate.
Update: I added the validation, but it doesent work:
$('.ui.form')
.form({
message: {
identifier : 'msg',
rules: [
{
type : 'empty',
prompt : 'Please enter a message'
}
]
},
})
;
Where are the onApprove and onDeny callbacks to perform the logic?
The fact that the modal fades but that the dimmer stays on the screen suggests an error in the js. Go to the debugger and find out.