I've started to work with jQuery Mobile, and I'm facing a problem that in a regular HTML code it is effortless to solve.
The problem:
I am trying to split the page like in the picture below-
On the left page, I want to add a dropdown list (that's not the problem), and on the right of the screen I want to add the "Age" and two text boxes in the same line but it does not let me add everything in the same line.
My question, is there an easy way to it, for example like Bootstrap?
What is the best way to combine features inline in jQuery Mobile?
Thanks.
Inline works, give a look to the JQM form gallery: http://demos.jquerymobile.com/1.4.5/forms/
Beside that, You are right to ask, because JQM has its own way of life. You can try grids documented here.
Default grid cells are evenly distributed, but You can override the default width easily. Moreover, by using the ui-responsive class the grid will be responsive by stacking the grid blocks at narrow widths.
Here is a playground:
.ui-grid-a > .ui-block-b {
text-align: right;
}
.ui-grid-solo > .ui-block-a {
white-space: nowrap;
}
.ui-mobile .ui-grid-solo label {
display: inline;
}
.ui-grid-solo .ui-input-text {
width: 30%;
display: inline-block;
margin-right: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page">
<div role="main" class="ui-content">
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<select data-native-menu="false">
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
</div>
<div class="ui-block-b">
<div class="ui-grid-solo">
<div class="ui-block-a">
<label for="textinput-3">Range:</label>
<input name="textinput-3" id="textinput-3" placeholder="Text input" value="" type="text">
<label for="textinput-4">-</label>
<input name="textinput-4" id="textinput-4" placeholder="Text input" value="" type="text">
</div>
</div>
</div>
</div>
<hr>
</div>
</div>
</body>
</html>
Related
I have a div with some content that gets hide after 5 seconds but below it, I have a drop-down with some options. So what happens when the select box is open and at the same time the div gets hidden, the options box remains in the same place and doesn't shift upwards with the select box.
Creating a custom drop-down is not an option. As well as making the above div absolute or fixed. Making the drop-down blur is also not an option. Can someone tell me if this default behaviour can be somehow changed?
The client does not agree for a custom solution.
The client does not want the above div to float or position absolute or fixed. He wants the same setup but this thing fixed.
Closing the select box or using blur() is also not that the client wants.
<!DOCTYPE html>
<html>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<body>
<div class='war'>SOME RANDOM CODE which gets hidden after 5 seconds. Make sure to open the drop down</div>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<script>
setTimeout(function(){ $(".war").hide(); }, 3000);
</script>
</body>
</html>
How about this workaround:
- When the select menu is clicked, it gets a size attribute that is as big as all its containing option elements so that it moves with the element in the window, as it disappears.
- If you add some css styling it does not become apparent to the user that the size of the selection element has changed while he/she is in the process of selecting an option.
- Unfortunately the standard arrow styling is different, depending on the browser. My solution looks best in chrome but not optimal in firefox for example - so further browser specific optimization should be added.
Here is the corresponding code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>example</title>
<style>
#box {
width: 100px;
height: 100px;
border: 1px solid black;
}
#options {
overflow: hidden;
}
#first::after {
content: " ⯆ ";
font-size: 10px;
}
</style>
</head>
<body>
<div id="box"></div>
<select name="selectionarea" id="options" onclick="makeBoxDisappear();expandSelect()" onfocusout="minimizeSelect()">
<option value="option1" id="first">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<script>
function makeBoxDisappear() {
setTimeout(() => document.getElementById("box").style.display = "none", 1000);
}
function expandSelect() {
document.getElementById("options").size="5";
}
function minimizeSelect() {
document.getElementById("options").size="1";
}
</script>
</body>
</html>
I am trying to add MDC Web Components to my website using unpkg and while implementing I ran into a problem where I am using two select elements side by side.The problem is while selecting a option from the first select element the element is moving slightly downwards and while selecting option from the second select element the first element is moved to it previous position.I am unable to understand why it is happening.In my HTML i just included the css and js files of the material web components.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<style type="text/css">
.select-position {
min-width: 175px;
left: 25%;
margin:5px;
}
</style>
</head>
<body>
<div class="mdc-select select-position mdc-select--outlined" data-mdc-auto-init="MDCSelect">
<select class="mdc-select__native-control">
<option></option>
<option>First Year</option>
<option>Second Year</option>
</select>
<label class="mdc-floating-label">Select Year</label>
<div class="mdc-notched-outline">
<svg>
<path class="mdc-notched-outline__path"></path>
</svg>
</div>
<div class="mdc-notched-outline__idle"></div>
</div>
<div class="mdc-select select-position mdc-select--outlined" data-mdc-auto-init="MDCSelect">
<select class="mdc-select__native-control">
<option></option>
<option>CSE</option>
<option>ECE</option>
</select>
<label class="mdc-floating-label">Select Branch</label>
<div class="mdc-notched-outline">
<svg>
<path class="mdc-notched-outline__path"></path>
</svg>
</div>
<div class="mdc-notched-outline__idle"></div>
</div>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>mdc.autoInit()</script>
</body>
</html>
I did some investigation with another person on the team here. Attached is a codepen of what fixes it.
I think this issue only happens on Chrome. Check Firefox - it didn't happen to me
The heights of the select are changing when a select is with/without a value (in Chrome).
To overcome this issue, we wrapped each select with a div, and made the parent of the 2 elements display: flex.
https://codepen.io/moog16/pen/GBeLxE.
<div style="display: flex">
<div>
<SelectElement ... >
</div>
<div>
<SelectElement ... >
</div>
</div>
So I have a dropdown menu like this:
<select class="ui search dropdown">
<option value="">Caption</option>
<option value="someoption">SomeOption</option>
</select>
Neither adding width="20" nor style="width: 20px" sets the width as I want to. I observed, that in the browser, actually different code is shown; the select is transformed into a div, so it seems like that transformation doesn't inherit the changed width.
How would one go about setting a different width for such a menu?
If the <div> that's added has a class or id, use CSS to target it.
<style>
#id{
/*styles*/
}
.class{
/*styles*/
}
.parentClass>div{
/*styles*/
}
#selectWrapper>div{
/*styles*/
}
</style>
Try to wrap the select with an identifier and targeting the select from there.
.wrapper select {
width: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.13/semantic.min.css">
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.13/semantic.min.js"></script>
<div class='wrapper'>
<select class="ui search dropdown">
<option value="">Caption</option>
<option value="someoption">SomeOption</option>
</select>
</div>
This is the solution, proposed by Indrek Siitan from the Gitter Chat:
Have a div around it with a specific width and then append the fluid class to the dropdown. Namely:
<div style="width: 20px">
<select class="ui fluid search dropdown">
<option value="">Caption</option>
<option value="someoption">SomeOption</option>
</select>
<div>
Try this:
<select id="drpdwn" class="ui search dropdown"> <option value="">Caption</option> <option value="someoption">SomeOption</option> </select>
#drpdwn{ width: 20px;}
id has higher priority than class. This one works
I am having some issues with some css stylings on my site and hoping you guys can help.
Heres my code:
<style>
.loginform {
text-align: center;
width: 300px;
margin: 0 auto;
color: black;
}
.memberslogin {
color: #404040;
text-align: center;
margin-bottom: 25px;
}
.btn.btn-primary.loginbutton {
margin-bottom: 80px;
}
</style>
<body style="background: none;">
<?php include('header.php') ?>
<div class="container">
<h4 class="memberslogin">Members Login:</h4>
<form class="loginform" action="login_create.php" method="post">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" name="username" class="form-control" placeholder="Username..">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" name="password" class="form-control" placeholder="Password..">
</div>
<input class=" btn btn-primary loginbutton" type="submit" name="submit" value="Login">
</form>
</div>
The styling works fine when styled within the page. However I have these exact same classes and styling within my style.css but when I remove the on page styling none of the effects take place.
<head>
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Orbitron:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="richmondcss.css">
As you can see I have linked my style sheet last which should override any bootstrap elements if I am not mistaken?
Any help is appreciated
Thanks
Try adding a class on the body tag which will represent your app.
e.g.
<body class="the-login-app">...
and then prefix all of your custom css with this class...
.the-login-app .btn.btn-primary.loginbutton{
margin-bottom: 80px;
}
This is called namespacing. It will not only work but help you with debugging as your project gets bigger. For example if you see an element in debugger hit by a class which starts with "the-login-app" you are confident that css code is yours :)
In the end, try to research and familiarize with the priority of the selectors... All things equal, in-file one will precede. If you want to override bootstrap you need to define more precise selector than bootstrap one, as explained above(which I don't recommend to start with)...
Try to learn bootstrap more. I am sure you will discover that you didn't need your intervention at all...
In my code I am using bootstrap css for styling . I have written a code for a drop down menu with class form-control. The problem is that I cant adjust the width of the form. It is now like occupying the total width of the webpage like:
--------------------------------------------------------------------------------------------------------| Choose the option
I just need to adjust the size of the dropdown . I am totally new to this field .
Somebody can help me out .?
I am attaching the part of code with this :
<body>
<select class="form control">
<option value= "1">one</option>
<option value= "2">two</option>
<option value= "3">three</option>
</select>
</body>
bootstrap link
Well, if you are using Bootstrap, the class .form-control by default has the following properties:
.form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
So, if you are using bootstrap you will have to override it using a custom class/id, or set a parent with a fixed width.
HTML
<div class="form-container">
<select class="form control">
<option value= "1">one</option>
<option value= "2">two</option>
<option value= "3">three</option>
</select>
</div>
CSS
.form-container{
width: 30%; //or width: 200px, etc
}
You can try using the bootstrap grid system. Adding a pre-defined responsive class like "col-xs-4" to your class list for the select element. (note this will only cover your width requirement, but if all elements use the grid system is can help keep the form looking clean and well organized).
A helpful reference for the bootstrap grid system may be found here http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Link your own stylesheet to the document...
Declare the class form-control in this document.. or add a new class to the html next to this, then add the height/width attributes:
Html:
<select class="form-control resizeformc">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
CSS:
.resizeformc {
width: 150px;
height:200px;
}