The cakePHP time dropdown feature lacks customization options

When viewing my form in CakePHP, I noticed that the time select dropdown appears differently in Chrome compared to Firefox. In Firefox, there are 3 arrow buttons attached to each dropdown, whereas in Chrome it looks different.

I want to hide the arrow buttons in the Firefox dropdown to match the appearance in Chrome. I have tried several solutions found through Google but none have worked so far due to CakePHP's auto generation of the 3 dropdowns.

Is there a way to apply HTML tags between each of the dropdowns generated by CakePHP? Below is the relevant code snippet:


    <?php
        echo $this->Form->input('Rideoffer.DepartureTime', array(
            'type' => 'time',
            'selected' => '9:00:00',
            'interval' => 5
        ));
    ?>

Any suggestions on how to solve this issue?

csscakephptime

Answer №1

Take a close look at the tags it produces, and manually create them with your preferred type of tags before, after, or around them. Easy as pie.

Keep in mind, CakePHP is essentially PHP - if it's not simplifying your life, feel free to skip that part and handle it using "normal" PHP/HTML methods.

(I'm skeptical that you can specify a separator tag/code for auto-generated date-time dropdowns via FormHelper)

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

Tips for centering a flexbox on a webpage:

<template> <div> <div class="flex justify-center w-full"> <div class="h-px-500 md:w-1/6 bg-orange-200 text-center">1</div> <div class="h-px-500 md:w-1/6 bg-orange-300 text-center">2</div> <div clas ...

htmlcssvue.jstailwind-css

What is the best way to load the contents of an HTML file into a <div> element without it behaving as an object?

Currently, I am importing an HTML file into a <div> in this manner: function load_content() { document.getElementById('content').innerHTML = '<object type="text/html" width="100%" height="100%" data="./content.html"></obj ...

javascripthtmlcss

What is the reason that columns do not float in Bootstrap when there are no rows?

I have been doing some research into Bootstrap and have come across the following resources: What is the purpose of .row in Bootstrap? and Despite reading these links, I am still struggling to understand why my columns do not float left as expected in th ...

cssbootstrap-4css-float

Eliminate gaps between items when using the flex-wrap:wrap attribute

Check out my code on Plunker. Is there a way to eliminate the vertical spacing when using flex-wrap: wrap; #main { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-wrap: wrap; } <div id="main"> < ...

htmlcssflexbox

How can I use a CSS file in PHP to conceal the folder structure?

main.css $theme->assign('css_file',SITE_URL.'styles.php?theme='.THEME_ID); $theme->display(TEMPLATES_PATH.'header.tpl'); header.tpl <link rel="stylesheet" href="{$css_file}"> styles.php include TEMPLATES_PATH. ...

phpcss

How can I display an image next to an element when hovering over it?

Whenever I hover over a .tags element, I want to display the image next to it. Feel free to test this feature on this specific page. This is how I envision it should look when not hovering over any .tags cell (the cells in the final column all have the ...

htmlcss

Iterating through a SASS map and retrieving the next item in the loop

I am working with a color array that looks like this: $colors: ( 'primary': '#aaa', 'secondary': '#bbb', 'color-3': '#ccc', 'color-4': '#ddd', 'color-5': & ...

csssass

Tips for expanding the content of a blogger page to fill the entire frame of the page

Check out this page: . Currently, the video on the page does not fill up the entire screen. Any suggestions for a solution? ...

javascripthtmlcssblogger

The transformation rotation applied in CSS must not have any impact on the styling of my span and paragraph

Snippet: .details-section{ background-color: rgb(83, 83, 83); height: 200px; } .icon-container{ border: 2px solid #c49b63; width: 90px; height: 90px; transition: 0.5s ease; } .box i{ font-size: 60px; color: black; margin-top: 13px ...

javascripthtmlcssbootstrap-4

Issue with drop-down menu functionality on mobile-friendly website

After deciding to revamp my website for responsiveness, I encountered an issue with the menu not displaying on smaller screens. Everything else is functioning correctly except for the drop-down menu! Here is the HTML code: <!doctype html> <html ...

jqueryhtmlcss

Tips for creating a sub-menu within a dropdown menu

I need some help adding a sub-menu to my drop-down function. I'm not very familiar with CSS, so I'm struggling to figure out how to do it. Ideally, I want the sub-menu to open to the right when the cursor hovers over it. Below is the CSS and HTML ...

htmlcsstemplatesdrop-down-menusubmenu

How can we display a different navbar based on whether the user is logged in or not?

Can anyone share the most effective methods for displaying a different navbar based on whether or not a user is logged in? I have considered a few approaches: One option might involve creating two separate navbars in the HTML file and using CSS to tog ...

javascriptphphtmlcssajax

What is the best way to modify the text color within a Navbar, especially when the Navbar is displayed within a separate component?

First question on StackOverflow. I have a Next App and the Navbar is being imported in the _app.js file. import Navbar from "../Components/Navbar"; function MyApp({ Component, pageProps }) { return ( <> <Navbar /> ...

javascripthtmlcssreactjsnext.js

The box inside a MUI TextField input is consistently visible

My form utilizes MUI Form within a Dialog, but I am facing an issue where the TextField always displays with the border of a filled variant instead of the standard look. Additionally, when trying to integrate an Input from the NextUi library, I encountered ...

cssreactjsformsmaterial-uifrontend

Is it possible to display a Twitter feed within a Bootstrap popover?

Is it feasible to showcase a Twitter feed within a Bootstrap popover? For instance, when the Twitter button is clicked, I aim to have my website's Twitter feed appear inside a Bootstrap popover. I have attempted the code below without success. Any a ...

htmlcsstwitter-bootstraptwitter

Creating a dynamic dashed line animation using SVG

Imagine a line growing in the same pattern as this fiddle. svg #path { stroke-dasharray: 19; stroke-dashoffset: 19; animation: dash 4s linear 0s forwards; } @keyframes dash { from { stroke-dashoffset: 19; } to { ...

htmlcsssvg

What is the best way to arrange cards in a horizontal stack for easy carousel viewing later on

My main objective is to design a unique card carousel where users can navigate through the cards by clicking on arrows placed on the left and right sides. The approach I am considering involves stacking multiple card-decks and smoothly transitioning to th ...

twitter-bootstrapcssflexboxtwitter-bootstrap-4

Ways to decrease the space between lines of text within a single mat-option element

https://i.sstatic.net/Sr1cb.png ::ng-deep .mat-select-panel mat-option.mat-option { height: unset; } ::ng-deep .mat-option-text.mat-option-text { white-space: normal; } Currently, I have implemented this code to ensure that text in options wraps to t ...

htmlcssangular

The Bootstrap Navbar is causing the navigation bar to span across two lines

I'm having an issue with my navbar taking up two lines on desktop resolution, but fitting perfectly on mobile. I've spent hours going through the code with no success. Any help would be greatly appreciated. The HTML code is provided below. <! ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it possible to include a scroll bar at the top of an overflow-x <div> in addition to or instead of the bottom?

Can the scroll bar be positioned at the top of a table instead of just the bottom? <div style="overflow-x: auto;"> <table> ... ... </table> </div> I am looking for a way to have the scroll bar appear at the top of my t ...

jqueryhtmlcss