I am using basic materialize css and for some reason even if I copy it straight from the materializecss.com website my select option just shows the label and nothing else is there.
EDIT added index.hjs page for reference of scripts.
In my index.hjs here are all my imports for the materialize css:
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="root"></div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script type="text/javascript" src="/build/bundle.js"></script>
</body>
</html>
Here is the code:
<div>
<div className="row">
<div className="input-field col s12 m6">
<input
onChange={this.updateTask.bind(this)}
id="title"
type="text"
/>
<label htmlFor="title">Title</label>
</div>
</div>
<div className="row">
<div className="input-field col s12 m6">
<input
onChange={this.updateTask.bind(this)}
id="description"
type="text"
/>
<label htmlFor="description">Description</label>
</div>
</div>
<div className="row">
<div className="input-field col s12">
<select id="category" onChange={this.updateTask.bind(this)}>
<option value="" disabled selected>
Choose your category
</option>
<option value="delivery">Delivery</option>
<option value="dog walking">Dog Walking</option>
<option value="house cleaning">House Cleaning</option>
</select>
<label>Category</label>
</div>
</div>
<div className="row">
{/* <button
onClick={this.submitTask.bind(this)}
className="btn waves-effect waves-light"
>
Submit
<i className="material-icons right">send</i>
</button> */}
</div>
</div>
Materialize.css overrides browser defaults to enable select tag.
To avoid this, you can use "browser-default" class in select tag.
<select class="browser-default">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
You can also use the "react-materialize" package to get materialize into your react app. Once you've set it up, it lets you do select without any wonky hacks like changing your componentDidMount() or removing styling like so:
<Row>
<Input type="select" value={}>
<option value={} key={}> your option here</option>
</Input>
<Row>
see https://react-materialize.github.io/#/forms for more
This seems a bit much to have to do for a select input, but after some research I found out how to solve this.
First you need to go into the component in which you have the select input.
In that component in the componentDidMount() you will add the following:
componentDidMount() {
const element = ReactDOM.findDOMNode(this.refs.dropdown);
$(element).ready(function() {
$('select').material_select();
});
}
Make sure you import ReactDOM at the top from react-dom
After this you will need to make a ref value in your select like so:
<select
ref="dropdown"
id="category"
defaultValue="1"
onChange={this.updateTask.bind(this)}
>
Note that the ref matches from the this.refs.dropdown.
Now since we are using jQuery we need to make sure it will function and in order to do so you will need to go to your webpack.config.js file and add the following plugin.
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"Hammer": "hammerjs/hammer",
createDayLabel: "jquery",
createWeekdayLabel: "jquery",
activateOption: "jquery",
leftPosition: "jquery"
})
]
Now you are all set and should be ready to go.
Related
I am using bootstrap select in my page and I need it to be empty by default (and value="") when the page loads (it is a required field so when the user submits the form, the validation message will appear in case it's empty).
It actually works but it looks weird/odd/too flat:
And this would be the desired result:
I have used this attribute to make the select look empty: data-none-selected-text="" and it actually looks empty but too flat.
If I remove that attribute, I'll get this Nothing selected placeholder which I don't want:
How can I make the design consistent and keep the same size whether something is selected or not?
body {
background-color: lightblue !important;
}
<head>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Bootstrap Select CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/css/bootstrap-select.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row mt-3">
<div class="col-sm">
Project Manager <span style="color:red;">*</span>
</div>
<div class="col-sm">
<select class="selectpicker show-tick w-100" data-none-selected-text="" multiple data-max-options="2" aria-label="Project Manager" required>
<option value="Michal Jackson">Michael Jackson</option>
<option value="Michael Jordan">Michael Jordan</option>
<option value="Luke Skywalker">Luke Skywalker</option>
<option value="Rafael Nadal">Rafael Nadal</option>
<option value="Cristiano Ronaldo">Cristiano Ronaldo</option>
<option value="Albert Einstein">Albert Einstein</option>
</select>
</div>
</div>
</div>
<!-- Popper.js 5.0.2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<!-- Bootstrap 5.0.2 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<!-- Bootstrap Select JS BETA VERSION, UPDATE TO A STABLE VERSION COMPATIBLE WITH BS5 ONCE IT IS RELEASED-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script>
</body>
You can overwrite default bootstrap class and make an exception for this scenario.
.dropdown-toggle {
height: 50px;
}
If you really don't want to use placeholder text, just use a blank HTML space ( ) as the data-none-selected-text or placeholder attribute value. Either approach results in the select box holding a standard height with no visible text in it.
body {
background-color: lightblue !important;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/css/bootstrap-select.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row mt-3">
<div class="col-sm">
Data Attribute Example <span style="color:red;">*</span>
</div>
<div class="col-sm">
<select class="selectpicker show-tick w-100" data-none-selected-text=" " multiple data-max-options="2" aria-label="Project Manager" required>
<option value="Michal Jackson">Michael Jackson</option>
<option value="Michael Jordan">Michael Jordan</option>
<option value="Luke Skywalker">Luke Skywalker</option>
<option value="Rafael Nadal">Rafael Nadal</option>
<option value="Cristiano Ronaldo">Cristiano Ronaldo</option>
<option value="Albert Einstein">Albert Einstein</option>
</select>
</div>
</div>
<div class="row mt-3">
<div class="col-sm">
Placeholder Example <span style="color:red;">*</span>
</div>
<div class="col-sm">
<select class="selectpicker show-tick w-100" placeholder=" " multiple data-max-options="2" aria-label="Project Manager" required>
<option value="Michal Jackson">Michael Jackson</option>
<option value="Michael Jordan">Michael Jordan</option>
<option value="Luke Skywalker">Luke Skywalker</option>
<option value="Rafael Nadal">Rafael Nadal</option>
<option value="Cristiano Ronaldo">Cristiano Ronaldo</option>
<option value="Albert Einstein">Albert Einstein</option>
</select>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script>
</body>
I cannot seem to quite search for the correct term to solve my issue but, I have this weird text field like thing above my select list:
<div class="col-md-4">
<div class="form-group">
<select class="form-control w-100 config_view_type">
<option value="P">Public</option>
<option value="R">Restricted</option>
</select>
</div>
</div>
what's causing it to appear?
I think you have positioned your form using css. Can you elaborate your code a bit more? I just placed your code inside a template and it seems to be working fine.
<!DOCTYPE html>
<html>
<body>
<h1>The select element</h1>
<p>The select element is used to create a drop-down list.</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<div class="col-md-4">
<div class="form-group">
<select class="form-control w-100 config_view_type">
<option value="P">Public</option>
<option value="R">Restricted</option>
</select>
</div>
</div>
what's causing
<br><br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the
server called "action_page.php".</p>
</body>
</html>
Your code Worked fine, maybe the issue with which bootstrap you linked the document with. try the bootstrap link I used
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="col-md-4">
<div class="form-group">
<select class="form-control w-100 config_view_type">
<option value="P">Public</option>
<option value="R">Restricted</option>
</select>
</div>
</div>
I am trying to get the selection box below the canvas. I have tried a number of combinations but have not prevailed. I am using paper.js for the canvas. Also, I know that having the names of colors like I have them is bad but this is a rough prototype site so cut me some slack please. Thank you.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#simonwep/pickr/dist/themes/classic.min.css" /> <!-- 'classic' theme -->
<link rel="stylesheet" type="text/css" href="WEBSITE.css">
<!-- Load the Paper.js library -->
<script type="text/javascript" src="node_modules/paper/dist/docs/assets/js/paper.js"></script>
</head>
<body>
<script src="displayTable.js"></script>
<canvas id="mycanvas" resize></canvas>
<label for="backgroundTable">Color for background of table:</label>
<form action="website.php" method="post">
<div class="form">
<select name="userBackgroundSelect" id="userBackgroundSelect">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="purple">Purple</option>
</select>
</div>
<div>
<input type="submit">
</div>
</form>
</body>
</html>
I want create a dropdown box like bootstrap. Even I created it, but actually I need it in simple css. Because when I use bootstrap file on my page then all formates becomes wrong due to I never added any code related bootstrap on my website.
Below the image I want to create.
Below is my code I used un bootstrap and it bit looks like above image. But I don't know how I made this in css.
Please anyone help me, how I make the dropdown textbox in css without bootstrap like above image.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
<div class="form-group col-md-6 col-lg-6 col-sm-6">
<label>Title</label>
<select id="txtTitle" class="form-control selectpicker">
<option value="default">Please Select</option>
<option value="one">One</option>
<option value="two">Two</option>
</select>
</div>
<div class="form-group col-md-6 col-lg-6 col-sm-6">
<label>Choose Activities</label>
<select id="DDLActivites" data-style="btn-default" class="selectpicker form-control" multiple data-max-options="2">
<option>Mustard</option>
<option>Barbecue</option>
</select>
</div>
I think you have 2 (quick) options:
Chosen: https://harvesthq.github.io/chosen/
select2: https://select2.org/
Both look exactly the same as the bootstrap version and offer the same functionality without messing with your themes styles.
Take a look at this sample using select2. Straight from the select2 web site.
http://jsfiddle.net/r0yh3b4o/1/
<select class="js-example-basic-single" name="state" style="width:100%">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
I'm experiencing some styling issues when using Select2 in combination with Bootstrap 3. I found out all about the Select2 Bootstrap 3 CSS but I can't get it to work properly.
This is how it looks like.
As you can see it's too wide, the search glyphicon doesn't seem to appear and the placeholder isn't showing either.
This is how my code looks like:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="~/Content/select2.css">
<link rel="stylesheet" href="~/Content/select2-bootstrap.css">
<link href="~/Content/bootstrap-datepicker3.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<br />
<form class="form-horizontal">
<fieldset>
<legend>General data</legend>
<div class="form-group">
<label for="inputRequester" class="col-lg-2 control-label">Requester</label>
<div class="col-lg-10">
<input type="text" class="form-control input-sm" id="inputRequester" placeholder="Requester" value="#System.Environment.UserName" readonly>
</div>
</div>
<div class="form-group">
<label for="datepickerino" class="col-lg-2 control-label">Delivery date</label>
<div class="col-lg-10">
<input type="text" class="form-control input-sm" id="datepickerino">
</div>
</div>
<div class="form-group">
<label for="inputProject" class="col-lg-2 control-label">State</label>
<div class="col-sm-4">
<select id="inputProject" class="form-control input-sm select2">
<option value="AL">Alabama</option>
...
</select>
</div>
</div>
...
</fieldset>
</form>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="//select2.github.io/select2/select2-3.4.2/select2.js"></script>
<script>
$( ".select2" ).select2( { placeholder: "Select a State", maximumSelectionSize: 6} );
</script>
After another couple of hours it looks like I solved most of my issues:
Fixed the width by adding a width attribute to the JS code:
$(".select2").select2({
placeholder: 'Select a country',
maximumSelectionSize: 6,
width: 'resolve'
});
Fixed the placeholder by adding an empty option to my select:
<option></option>
Still can't get the search glyphicon to show up tho.