Instructions for incorporating a glyphicon glyphicon-calendar into a bootstrap dropdown using pug

I am a beginner in the world of pug and I'm trying to include the glyphicon glyphicon-calendar in a dropdown menu labeled "All months".

.pull-right
   select.form-control.btn-primary#selectMonth(style="margin-top: -15px;")
   option(selected="selected" value='') All Months
   option(value='1' ) January
   option(value='2') February
   option(value='3') March
   option(value='4') April
   option(value='5') May
   option(value='6') June
   option(value='7') July
   option(value='8') August
   option(value='9') September
   option(value='10') October
   option(value='11') November
   option(value='12') December

Can someone please guide me on how to incorporate the glyphicons?

Specifically, I would like to have a calendar glyphicon displayed in front of the "All Months" option:
https://i.sstatic.net/c08Sa.png

javascripthtmlcssbootstrap-4pug

Answer №1

Embedding a glyphicon within a span that is absolutely positioned can be done like this:

div.pull-right(style="position: relative;")
   span.glyphicon.glyphicon-calendar(style="position: absolute; top:50%; left: 5px; margin-top: -0.5em; font-size: 2em;")
   select.form-control.btn-primary#selectMonth(style="padding-left: 2.5em")
      option(selected="selected" value='') All Months
      option(value='1' ) January
      option(value='2') February
      option(value='3') March
      option(value='4') April
      option(value='5') May
      option(value='6') June
      option(value='7') July
      option(value='8') August
      option(value='9') September
      option(value='10') October
      option(value='11') November
      option(value='12') December

Check out this CodePen example for reference

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I update my EJS template in ExpressJS after retrieving JSON data using NodeJS?

Utilizing NodeJS, I am making API calls and passing the data to my EJS template through ExpressJS with the following code snippet: app.get('/', function (req, res) { res.render('routes/index', { plLoopTimes: plLoopTimes, pl54Ti ...

javascriptjsonnode.jsexpressejs

Tips for sending a variable to the onclick function within an HTML element

Currently, I am utilizing the tabulator library to generate tables based on json data. I am attempting to insert a button into a cell using a custom cell formatter. Below is the approach I am taking: var graphButton = function(cell, formatterParams, onRe ...

javascripthtmlbuttononclicktabulator

Comparing defaultProps with the logical OR operator

Being relatively new to react, I’ve adopted a method of defining default values which looks like this: class TextInput extends Component { render() { return ( <input type="text" name={ this.pr ...

javascriptreactjs

Verify in Jquery whether a table row contains no elements with a specified class before removing any duplicates

I have an HTML table: <div class="1233">hello</div> <table cellpadding="0" cellspasing="0" class="sortable zebra tablesorter tablesorter-default" id="articles-table"> <thead> <tr class="tablesorter-headerRow"> ...

javascriptjquery

Adjusting editable property in FullCalendar during script execution

Currently, I am working with Angular JS and fullCalendar to customize the functionality of my calendar. My goal is to change the editable property of the calendar when a button is clicked. Although it seems like a straightforward task, I am facing difficul ...

javascriptjqueryangularjsfullcalendar

What does the main attribute in npm stand for?

The command npm init generates a file called package.json. The contents typically look like this: { "name": "webpack-tut", "version": "1.0.0", "description": "", "main": "index.js", .... } I came across this information in the official documen ...

javascriptnode.jsnpmpackage.json

How can I search across different fields within a single collection using meteor-autocomplete?

I have implemented mizzao/meteor-autcomplete to retrieve matching items from a MongoDB collection based on user input. While I can successfully search for items in one field, I am facing difficulty searching multiple fields within the same collection. My ...

javascriptjquerymongodbmeteormeteor-blaze

What methods are recommended for expanding the size of a select/dropdown menu?

Managing a long list of values can be challenging, especially when it continues to grow. Consider the following example: <select> <option value="1">1, some test</option> <option value="2">2, some text</option> <optio ...

javascriptjqueryhtml

Is there a way to ensure an AJAX call doesn't complete until my handlebar template has finished loading?

Currently, I am working with a handlebars template to display some information on my navigation bar. This information is retrieved from a Rails controller through an AJAX call. The issue I am facing is that since AJAX is asynchronous, it completes after th ...

javascriptjqueryruby-on-railsajaxhandlebars.js

Having trouble getting the onPress event to function properly on a custom button component in my React Native application

As a React Native beginner, I am currently working on a project where I am trying to create a custom button named "RoundedButton" using TouchableOpacity. However, when I attempt to trigger an event using onPress like , it does not seem to work for me. Here ...

javascriptnode.jsreactjsreact-native

React: How to retrieve values from a dynamic dropdown menu

For my React project, I have integrated ant design components. Currently, I am working on adding dynamic select functionality and retrieving the selected values. I have successfully implemented dynamic dropdown selection. However, I am facing an issue wi ...

javascriptreactjsselectantd

Enhance the aesthetic appeal of the imported React component with added style

I need assistance with applying different styles to an imported 'notification' component within my header component. The notification component has its own CSS style, but I want to display it in the header component with unique styling. How can I ...

javascriptreactjstypescriptreact-nativereact-component

Use CSS to mimic the :hover functionality for touchscreen devices

I am struggling to get this piece of code to function correctly, $(document).ready(function() { $('.hover').bind('touchstart touchend', function(e) { e.preventDefault(); $(this).toggleClass('hover_effect'); }); ...

jquerycsshover

Creating an error handler in PHP for dynamically adding or removing input fields is a crucial step in ensuring smooth and

I designed a form with multiple fields, including a basic input text field and dynamic add/remove input fields. I successfully set the first field as required using PHP arguments, but I'm struggling to do the same for the additional fields. I need as ...

javascriptphpjqueryforeacherror-handling

I am interested in setting the background for blogger headings H2, H3, and H4 to match the size

view the image hereI am using Blogger and have implemented CSS for H2, H3, and H4 tags with custom background and text size styles. However, I am facing an issue where I want the background size to automatically adjust according to the text size instead of ...

cssblogger

What is the process by which Single Page Applications manage the Not Modified 304 response?

Imagine a scenario where a Single Page Application (SPA) built using angular or vuejs loads 3 components on a page, with each component making requests to different backend APIs. Now, if a user decides to refresh the page, those same 3 API calls are trigg ...

javascriptangularjsvue.jshttpsingle-page-application

Leverage the power of react-i18next in class-based components by utilizing decorators and Higher Order

Currently, I am working on implementing i18n into my React project that also utilizes Redux, with the assistance of react-i18next. In this particular project, we are using class components alongside decorators. Originally, I intended to experiment with r ...

javascriptreactjsi18nextreact-i18next

Update destination upon click

I'm new to JavaScript and attempting to modify a redirect link using checkboxes that will modify the URL, followed by a button that will use the updated URL. However, I'm facing some challenges with my code and could use some guidance. Here is t ...

javascripthtmlformsurlweb

Is it impossible for both <a> and <name=""> to collaborate in HTML and PHP?

Is it possible to make both <a href works > and name="send" work at the same time within isset($_POST['send']) in this code? Currently, it's not functioning as intended. Is there a way to achieve this for both cases? The requirement i ...

phphtmlhref

Change the CoreUI variable by overriding it

There's a fantastic gem called https://github.com/pelted/coreui-rails that utilizes CoreUI, a Bootstrap Admin Template. This template has replaced the default Bootstrap colors, and I am attempting to customize them back to my preferred colors, specif ...

ruby-on-railssassbootstrap-4core-ui