Background: At time of writing, Fomantic-UI is the live-development fork of Semantic-UI which will one day be rolled into Semantic-UI and is for the mean time the de facto supported genus of Semantic-UI.
Issue: When the first focusable object on a page is a dropdown, then on page open the dropdown will open as if clicked.
Notes: I had this first happen in a modal situation and was confused by it, thinking it was an issue on the modal specifically, but I have since had the same thing on a plain page. I have used a modal case in the snippet below to illustrate because the SO snippet viewer does not trigger the behaviour you get on a plain page. Another user raised this as an issue on FUI's git and the support crew pointed out the answer which I am sharing here via this self-answered question.
$('.ui.dropdown')
.dropdown({
});
$('#b1').on('click', function(e) {
$('#m1').modal('show')
})
<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>
<body>
<p>Click the 'show modal' button to open a modal. Note the language dropdown opens immediately.
</p>
<p>
<button id='b1'>Show the modal</button>
</p>
<div id='m1' class="ui modal">
<div class="header">Header</div>
<div class="content">
<div class='container'>
<div class="ui floating dropdown labeled search icon button">
<i class="world icon"></i>
<span class="text">Select Language</span>
<div class="menu">
<div class="item">Arabic</div>
<div class="item">Chinese</div>
<div class="item">Danish</div>
<div class="item">Dutch</div>
<div class="item">English</div>
<div class="item">French</div>
<div class="item">German</div>
<div class="item">Greek</div>
<div class="item">Hungarian</div>
<div class="item">Italian</div>
<div class="item">Japanese</div>
<div class="item">Korean</div>
<div class="item">Lithuanian</div>
<div class="item">Persian</div>
<div class="item">Polish</div>
<div class="item">Portuguese</div>
<div class="item">Russian</div>
<div class="item">Spanish</div>
<div class="item">Swedish</div>
<div class="item">Turkish</div>
<div class="item">Vietnamese</div>
</div>
</div>
</div>
<p>
Voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>
</div>
<div class="actions">
<div class="ui approve button">Approve</div>
<div class="ui button">Neutral</div>
<div class="ui cancel button">Cancel</div>
</div>
</div>
</body>
The answer is a setting on the dropdown call.
$('.ui.dropdown').dropdown({
showOnFocus: false
});
Pretty much does what it says on the tin - with showOnFocus set to True (the default setting) the dropdown will open when it gets focus. If the dropdown is the first focusable object on the page then it will therefore open immediately. To avoid this, actively set showOnFocus to False as in the snippet and the dropdown will keep its contents hidden until the user initiates the open process.
$('.ui.dropdown')
.dropdown({
showOnFocus: false
});
$('#b1').on('click', function(e) {
$('#m1').modal('show')
})
<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>
<body>
<p>Click the 'show modal' button to open a modal. Note the language dropdown opens immediately.
</p>
<p>
<button id='b1'>Show the modal</button>
</p>
<div id='m1' class="ui modal">
<div class="header">Header</div>
<div class="content">
<div class='container'>
<div class="ui floating dropdown labeled search icon button">
<i class="world icon"></i>
<span class="text">Select Language</span>
<div class="menu">
<div class="item">Arabic</div>
<div class="item">Chinese</div>
<div class="item">Danish</div>
<div class="item">Dutch</div>
<div class="item">English</div>
<div class="item">French</div>
<div class="item">German</div>
<div class="item">Greek</div>
<div class="item">Hungarian</div>
<div class="item">Italian</div>
<div class="item">Japanese</div>
<div class="item">Korean</div>
<div class="item">Lithuanian</div>
<div class="item">Persian</div>
<div class="item">Polish</div>
<div class="item">Portuguese</div>
<div class="item">Russian</div>
<div class="item">Spanish</div>
<div class="item">Swedish</div>
<div class="item">Turkish</div>
<div class="item">Vietnamese</div>
</div>
</div>
</div>
<p>
Voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>
</div>
<div class="actions">
<div class="ui approve button">Approve</div>
<div class="ui button">Neutral</div>
<div class="ui cancel button">Cancel</div>
</div>
</div>
</body>
Related
I trying to make layout something like stack overflow in bootstrap 5, I am only using bootstrap grid not using other utilities class (using saas) ,
#import "../node_modules/bootstrap/scss/grid"
This layout consist of fixed header , fixed left sidebar,main content scrollable (in the main content consist of post content etc & footer )
Note in example code I used couple of hepler class, later I will take care of it, It is just for making example code...
Problem in x-axis scrollbar appear (below example code), that is unwanted, This problem need to be fix...
Before ask, I already tried it couple of way, somehow I did not resolve it, If already answer here drop the link and I will delete my question
header{
position:fixed;
top:0;
height: 50px;
background-color: rebeccapurple;
}
#sticky-sidebar {
position:fixed;
height: calc(100vh - 50px);
top: 50px;
max-width: 20%;
background-color: red;
}
main{
min-height: 100vh;
}
footer{
min-height: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="container-fluid g-0">
<div class="row">
<header>
<div class="col-md-12">
Header
</div>
</header>
</div>
</div>
<div class="container-fluid g-0">
<div class="row">
<div class="col-xs-4">
<div class="col-xs-12" id="sticky-sidebar">
Menu
</div>
</div>
<div class="col-xs-8 p-5" id="main">
<main>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum maiores, molestiae porro numquam aperiam dignissimos iste quisquam quidem saepe voluptatibus possimus eum. Aut nihil maiores harum, voluptate dicta veniam quo, praesentium id ipsa esse eaque numquam cupiditate assumenda consectetur accusamus maxime ea reiciendis ut? Ut consectetur quis, sapiente, rem consequuntur architecto sit quasi dignissimos nisi nihil, tenetur necessitatibus. Veritatis, harum eaque. Quae odio repellendus architecto magni, excepturi reprehenderit, odit dolor, illum quis nulla porro? Pariatur, amet architecto sint illum, molestiae non optio quis facere deserunt nostrum reiciendis omnis illo velit dolores ex corporis nam natus, reprehenderit quos officia. Amet, facere!
</p>
</main>
<footer style="text-align: center;">
© Footer 2021
</footer>
</div>
</div>
</div>
You should really read the docs since the markup has several problems. Bootstrap 5 beta has the same grid rules as Bootstrap 4...
rows are wrappers for columns. This means only columns should be placed in rows, and columns shouldn't be placed directly in other columns.
g-0 (no gutters) should be on the row, not the container
there is no -xs infix. for example use col-12 not col-xs-12
<header>
<div class="row">
<div class="col-12">Header </div>
</div>
</header>
<div class="container-fluid">
<div class="row g-0">
<div class="col-4">
<div class="row">
<div class="col-12" id="sticky-sidebar"> Menu </div>
</div>
</div>
<div class="col-xs-8 p-5" id="main">
<main>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum maiores, molestiae porro numquam aperiam dignissimos iste quisquam quidem saepe voluptatibus possimus eum. Aut nihil maiores harum, voluptate dicta veniam quo, praesentium id ipsa esse eaque numquam cupiditate assumenda consectetur accusamus maxime ea reiciendis ut? Ut consectetur quis, sapiente, rem consequuntur architecto sit quasi dignissimos nisi nihil, tenetur necessitatibus. Veritatis, harum eaque. Quae odio repellendus architecto magni, excepturi reprehenderit, odit dolor, illum quis nulla porro? Pariatur, amet architecto sint illum, molestiae non optio quis facere deserunt nostrum reiciendis omnis illo velit dolores ex corporis nam natus, reprehenderit quos officia. Amet, facere! </p>
</main>
<footer style="text-align: center;"> © Footer 2021 </footer>
</div>
</div>
</div>
Demo
I'm starting to get really lost in the whole Bootstrap/flexbox grid system. I'm trying to achieve a dynamic, 2 column layout with one large col-sm-12.col-md-12.col-lg-8 and two small columns of: col-sm-12.col-md-6.col-lg-4
This is what I want for large screens:
and this for medium-sized screens:
But, this is what I get!:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" initial-scale="1">
<div class="container">
<div class="row">
<div id="big" class="col-12 col-sm-12 col-md-12 col-lg-8">
<p> Lots of text </p>
</div>
<div id="small1" class="col-12 col-sm-12 col-md-6 col-lg-4">
<p> Little text </p>
</div>
<div id="small2" class="col-12 col-sm-12 col-md-6 col-lg-4">
<p> Little text </p>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>
</html>
This seems like an ideal opportunity for a nested grid:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container">
<div class="row">
<div id="big" class="col-12 col-lg-8">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui quos corporis quisquam officiis sint explicabo, pariatur eveniet, quibusdam exercitationem enim quia, repudiandae laudantium reiciendis dolore quaerat asperiores accusamus! Similique dolorem ipsa veniam ducimus, excepturi nisi odio! Est quibusdam tenetur laudantium blanditiis. Corrupti omnis veniam, fugit fugiat explicabo deleniti, dolorem recusandae quod fuga qui consectetur, possimus? Dignissimos maiores, at possimus officia minus, voluptatum, ipsa magnam iste voluptatem animi quam tempore! Laborum omnis, ad soluta ducimus eligendi, fugiat natus voluptatibus sint possimus! Nihil qui excepturi, necessitatibus ipsam accusantium delectus cum culpa iure.</p>
</div>
<div class="col-12 col-lg-4">
<div class="row">
<div id="small1" class="col-6 col-lg-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsa voluptas ut, id sunt provident recusandae maxime a culpa, dolore iusto explicabo, nesciunt nobis necessitatibus laudantium temporibus! Corporis aperiam, deleniti.</p>
</div>
<div id="small2" class="col-6 col-lg-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsa voluptas ut, id sunt provident recusandae maxime a culpa, dolore iusto explicabo, nesciunt nobis necessitatibus laudantium temporibus! Corporis aperiam, deleniti.</p>
</div>
</div>
</div>
</div>
</div>
In the above example your primary grid has two columns; the first is 12-columns wide at all breakpoints below lg. At lg it is 8-columns wide. The second column follows the same pattern but at lg it is 4-columns wide.
Inside the second column we have the nested grid. This has a different breakpoint for each column: 6-columns wide for breakpoints below lg and at lg each column is 12-columns wide.
You can use the following solution:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div id="big" class="col-12 col-lg-8">
<p><b>1</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui quos corporis quisquam officiis sint explicabo, pariatur eveniet, quibusdam exercitationem enim quia, repudiandae laudantium reiciendis dolore quaerat asperiores accusamus! Similique dolorem ipsa veniam ducimus, excepturi nisi odio! Est quibusdam tenetur laudantium blanditiis. Corrupti omnis veniam, fugit fugiat explicabo deleniti, dolorem recusandae quod fuga qui consectetur, possimus? Dignissimos maiores, at possimus officia minus, voluptatum, ipsa magnam iste voluptatem animi quam tempore! Laborum omnis, ad soluta ducimus eligendi, fugiat natus voluptatibus sint possimus! Nihil qui excepturi, necessitatibus ipsam accusantium delectus cum culpa iure.</p>
</div>
<div class="col-12 col-lg-4">
<div class="row">
<div id="small1" class="col-12 col-md-6 col-lg-12">
<p><b>2</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsa voluptas ut, id sunt provident recusandae maxime a culpa, dolore iusto explicabo, nesciunt nobis necessitatibus laudantium temporibus! Corporis aperiam, deleniti.</p>
</div>
<div id="small2" class="col-12 col-md-6 col-lg-12">
<p><b>3</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsa voluptas ut, id sunt provident recusandae maxime a culpa, dolore iusto explicabo, nesciunt nobis necessitatibus laudantium temporibus! Corporis aperiam, deleniti.</p>
</div>
</div>
</div>
</div>
</div>
What is happening for different devices?
small view (like iPhone 6):
All columns have the same full width (col-12) of the device. I don't recommend to create two columns for column number 2 and 3.
medium view (like iPad):
The first column is full width (col-12) and above the columns 2 and 3. The columns 2 and 3 are in one row with same width (col-6), next to each other.
large view (like Desktop / Laptop):
The column 1 is using 2/3 of the width. The columns 2 and 3 are on the right column (1/3 of width), about each other.
To check the different breakpoints I recommend the browser plugin (Google Chrome) Window Resizer or the device toolbar on Google Chrome (Ctrl + Shift + M on developer tools F12).
I'm trying to create a layout like this:
http://jsfiddle.net/LLbnhb9v/
Basically, A and C are sidebar items, and B is the main content:
My markup is as follows:
<div class="container">
<div class="col-sm-2">
A
</div>
<div class="col-sm-8">
B
</div>
<div class="col-sm-2">
C
</div>
</div>
This works for the mobile, but on the desktop C is positioned below B. How can I make B (the main content) "span" across multiple rows without any insane css tricks?
You need to have the pink section have the pull-right class and the green section to have a clearfix class.
http://jsfiddle.net/LLbnhb9v/19/
<div class="container">
<div class="col-sm-2">
<div class="x a">
short<br>text
</div>
</div>
<div class="col-sm-10 pull-right">
<div class="x b">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>
</div>
<div class="col-sm-2 clearfix">
<div class="x c">
short<br>text
<div>
</div>
</div>
I also changed the layout a little bit. The first level of divs should only worry about layout. If you add padding and margins and stuff then they can have some issues and not work as expected. I moved the a b c and x classes onto sub elements.
I have an Angular MD template that uses a row layout on large screens and a column layout on mobile devices. However, in most standard browsers on mobile phones I get a weird result where the columns are too big. I have different screenschots of how it should look.
PC view
Mobile view how it looks on Chrome/ff/Opera
Mobile standard browser view (problem)
My simplified code (of the 3 rows/columns) is as follows
<div layout="row" layout-align="center center">
<div flex="50" flex-sm="90" flex-md="80" class="row3" layout="row" layout-sm="column">
<div flex="40" flex-sm="100" layout="row" layout-align "center start">
<!-- first column -->
</div>
<div flex="20" flex-sm="100" style="background: #2AFF00">
<!-- second column -->
</div>
<div flex="40" flex-sm="100" layout="row" layout-align="center start">
<!-- Third column -->
</div>
</div>
</div>
I've made a demo on codepen.io with Chrome, but it seems Safari 5.1.7 (windows), as BotanMan said, that flexbox isn't supported and I couldn't even test it on codepen with IE11.
<div layout-sm="column" layout="row" layout-align="center center" layout-padding>
<div class="row3" layout="row" layout-sm="column">
<div flex-sm="100" flex="40" layout="column" layout-align="start center" layout-margin>
<div class="img"></div>
<h2>Enter the product's serial number</h2>
<button class="md-button">Verify the product</button>
</div>
<div flex-sm="100" flex="20" layout-margin layout-padding style="background: #2AFF00">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum temporibus iure voluptas recusandae molestiae saepe doloremque velit, consequatur minus sint expedita laboriosam magni architecto omnis, reprehenderit labore maxime ea, fugiat officiis. Commodi, aliquam nisi consequatur!</p>
<p>Enim aliquam nihil nam alias consequuntur amet fuga suscipit dolores deleniti ut, quo numquam quaerat harum cupiditate dolore veritatis a sit, nesciunt aut magni commodi sed doloremque quis. Voluptatum cupiditate commodi, magni consequatur, eveniet aut.</p>
<p>Sit quae natus quibusdam nesciunt quo rem totam sequi dolorem sint eum perspiciatis molestias illum debitis, nobis eos dolorum. Sunt, perspiciatis voluptas possimus, laboriosam officiis recusandae animi in, nisi suscipit ipsum eaque assumenda odit laudantium!</p>
</div>
<div flex-sm="100" flex="40" layout="column" layout-align="start center" layout-margin>
<div class="img"></div>
<h2>Click the button below to enable your webcam and start the scanning</h2>
<button class="md-button">Scan W/ webcam</button>
</div>
</div>
</div>
According to caniuse.com, every latest versions of browsers should be able to use flexbox. *See the link for further compatibility infos.
*BTW you are missing one '=' in the second 'layout-align' directive.
For some odd reason when I create a new page with Visual Composer my content doesn't align at all, however when I edit an existing page that came with a template It does. Video Demonstration:
https://www.youtube.com/watch?v=Z1LFcmUs1tg
Your page has the following markup:
<div class="no-container stripe-video-content">
<div class="vc_col-sm-8 wpb_column column_container ">
<div class="wpb_wrapper">
<h3 class="headline text-left underline " style="color: #666666">
About Us </h3>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</div>
</div>
</div>
<div class="vc_col-sm-4 wpb_column column_container ">
<div class="wpb_wrapper">
<h3 class="headline text-left " style="color: #666666">
Stuff we do best </h3>
<div class="vc_progress_bar wpb_content_element default small"><div class="vc_single_bar bar_grey"><small class="vc_label">Development</small><span style="width: 90%;" class="vc_bar" data-percentage-value="90" data-value="90"></span></div><div class="vc_single_bar bar_grey"><small class="vc_label">Design</small><span style="width: 80%;" class="vc_bar" data-percentage-value="80" data-value="80"></span></div><div class="vc_single_bar bar_grey"><small class="vc_label">Marketing</small><span style="width: 70%;" class="vc_bar" data-percentage-value="70" data-value="70"></span></div></div>
</div>
</div>
</div>
which was apparently written by Visual Composer. The problem is coming from the class on the enclosing div: no-container which isn't sufficient to trigger Bootstrap to take care of the responsiveness. Therefore, if you can't figure out how to use VC (I don't use it) to create a div with .container, then you can use jQuery to remove the .no-container and add .container.
That code would be:
<script>
jQuery( document ).ready(function() {
jQuery( "div .no-container" ).addClass( "container" );
jQuery( "div .no-container" ).removeClass( "no-container" );
});
</script>
You would add that code to bottom of the WYSIWYG, in text mode, on the page in question. Bear in mind, however, that if there are any other divs on that page with the same class .no-container, that they will also be affected and that the div you're targeting may then have other layout abberations within it if you add other content and/or elements. When I used my inspector to apply the class, it did come out perfect though.
Also, please be aware that it's best practice to include your scripts by linking to external files. While you may be able to get away with not doing it in this case, if you want to and have the ability to FTP into the site, the code that goes in the WYSIWYG would look like:
<script type="text/javascript" src="{the_file_path}/mycustomscript.js"></script>
where {the_file_path} points to wherever you upload the file. And finally the code in the file would look like this:
jQuery( document ).ready(function() {
jQuery( "div .no-container" ).addClass( "container" );
jQuery( "div .no-container" ).removeClass( "no-container" );
});