Display title using a jQuery toolbar

Looking to spruce up a Toolbar with a title using jQuery UI.

This is what I have so far:

HTML:

<div class="demo">

  <span id="toolbar" class="ui-widget-header ui-corner-all">
    <label>go to beginning</label>
    <button id="Submit">Submit</button>    
  </span>

</div>

CSS:

#toolbar {
    padding: 10px 4px;
    width: 500px
}

Javascript:

 $(function() {
    $( "#Submit" ).button({
    });
 });

Link:

http://jsfiddle.net/CKvYv/59/

The current layout doesn't quite work for a toolbar with a title. I want to make it full-width and ensure the button stays within the toolbar.

Can this be achieved?

Any suggestions for a simpler or more appealing design?

Thanks

jqueryhtmlcssjquery-uitoolbar

Answer №1

It seems like you are encountering some CSS issues. To resolve this, consider changing the toolbar element from a span to a div and applying a CSS style of 100% width. The button size can be adjusted using the CSS font-size property.

Below is the code snippet from your jsfiddle with two buttons:

HTML

<div class="demo">

<div id="toolbar" class="ui-widget-header ui-corner-all">
    <label id="title">go to beginning</label>
    <button id="Submit">Submit</button>
    <button id="Submit2">Submit2</button>
</div>

CSS

#toolbar {
    width: 100%;
    padding-left : 4px;
}

#title {
    padding : 0px 4px; 
}

.ui-button {
    font-size : 11pt;
}

JavaScript

$(function() {
    $( "#Submit" ).button();
    $( "#Submit2" ).button();
});

Answer №2

A great way to enhance the toolbar is by utilizing a DIV element with the CSS property #toolbar set to have a width of 100%. This simple adjustment can make a significant impact.

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

What could be the reason that the information from my modal is not being successfully sent to the server

I'm having an issue with my form and modal. I want the information from the modal to be sent to the server using an ajax call triggered by a button click. However, when I click the SEND button in the transaction modal, it submits the main form instead ...

jqueryajax

Can a button be connected to both navigate to another webpage and trigger a modal to appear on it simultaneously?

Is there a way to connect a button to a modal on a different page so that when the button is clicked, it opens another page (in a new tab with target 0) with the modal already displayed? ...

jqueryhtmlcsstwitter-bootstrap

Verify the fonts that are functioning correctly

Despite using the "dancing script" Google webfont and adding it through @font-face, font-family, I am unable to see it in the browser. I would like to know how to determine which fonts are correctly uploaded and rendering properly while viewing a website ...

javascripthtmlcssfonts

Optimizing Static File Caching in Yii

Having a frustrating issue with Yii where my local development environment caches CSS and JS files. Despite making changes to the file, the edits do not reflect in the output and sometimes causes corruption leading to broken functionality. This problem see ...

javascriptphpcssyiifrontend

Android devices still allow access to elements even when they are hidden using overflow

Contained within a parent div with overflow hidden is a Facebook-comments widget that is vertically cut off. This setup allows for showing only a portion of the content initially and expanding the parent container using jQuery. While this method works wel ...

androidcssfacebook-commentscoverflow

What is the reason behind the inconsistency of calling a function on click not always functioning properly in Chrome and FF, while working seamlessly in IE?

Consider a scenario where the code below is being used: <HTML> <HEAD> <SCRIPT> function myFunction(atlasTrackingURL) { var atlasURL = atlasTrackingURL; if (!atlasURL) return; //Creating a cache busting mechanism ...

javascripthtml

Is there a way to create a footer that will only appear once the entire content has been read?

While utilizing Ionic, my code includes the following structure: <ion-header></ion-header> <ion-content> <div *ngFor="let publisher of publishers" class="contentspacing"> <div class="border-div"> <d ...

css

How can I prevent the CSS dropdown menu from causing the navigation bar to stretch in height?

I'm currently working on integrating a CSS dropdown menu into my navigation bar that will only appear when a user hovers over the settings icon. However, I've encountered an issue where hovering over the settings icon causes the dropdown menu to ...

jqueryhtmlcssruby-on-rails-4

What is the reason for jQuery selector variables not functioning within namespaces?

I'm struggling to figure out why my code isn't working as intended. I'm trying to declare multiple variables, but something seems to be off. Can anyone help me spot the mistake? var message = (function ($) { var $modalBody = $( ...

javascriptjqueryvariablesjavascript-namespaces

Encountering issues with querySelector() across certain classes

I need to display the actual date in my first column, but my JavaScript script is only working for one class in my HTML code. Question: How can I make my JavaScript code work for every class in the HTML code? I am currently using querySelector(), but I fe ...

javascriptjquerydom

Utilizing CSS to create dynamic 3D cube transformations

Exploring the realm of CSS 3D transforms to showcase cubes and cuboids featuring cross-sections has been my current venture. In this endeavor, I'm aiming at compatibility with Chrome, Firefox, and MSIE 11. It has come to my attention that in order to ...

htmlcss3d

What are some ways to optimize and enhance the performance of my jQuery database ajax request?

As I delve into learning jQuery ajax and database queries, I have come across a specific scenario that I am seeking advice on. I currently have a simple form set up with an ajax function that checks a database for a certain code. Here is what I have so far ...

jqueryajaxdatabase

Refresh cloned element after making changes to the original element

Just starting to explore Jquery and looking for some guidance to get me started :) Question: I'm facing an issue with a cart total price that is displayed in a different part of the page using clone(). I want this cloned price to automatically update ...

javascriptjqueryclone

Roundabout Navigation Styles with CSS and jQuery

My goal is to implement a corner circle menu, similar to the one shown in the image below: https://i.stack.imgur.com/zma5U.png This is what I have accomplished so far: $(".menu").click(function(){ $(".menu-items").fadeToggle(); }); html,body{ colo ...

javascriptjqueryhtmlcssmenu

The Angular ui-calendar introduces an innovative approach to event addition, providing users with

I need help with adding events to the angular ui calendar. Currently, I am using $scope.events.push() method to add events, but they get reset when changing the month. If anyone has experience with angular ui-calendar and event addition, please provide ...

javascriptjqueryangularjseventscalendar

The navigation bar dropdown displaces items from the navbar on smaller screens

The image illustrates my point perfectly Although I am attempting to move it within the navbar on a smaller screen, it doesn't seem to be working. ...

cssbootstrap-4bootstrap-5

Creating a Vuetify dialog sheet with stylish rounded edges

Is there a way to implement round corners for the dialog within the v-bottom-sheet? Note that using style="border-radius:20px;" only affects the overlay, not the dialog itself. <v-bottom-sheet style="border-radius:20px;" v-model=& ...

cssvue.jsvuetify.js

hiding elements yet passing down

Despite disabling the style sheet, a dynamically created form is displaying strangely. This form will show or hide various details based on selected options. For instance, many of the elements are generated with C#.net... formOutput += "<div class=&bs ...

javascripthtmlcss.netdom

Interactive Canvas & Slide Show Presentation - Foundation 6

I am facing a unique problem. My current project involves using the Chart.js library to generate charts within certain div .carousel-item elements. The project also utilizes a Bootstrap 4 template with its own set of css and js. The issue arises when I dy ...

cssbootstrap-4

How come the location.replace() function is called even as an AJAX request is in progress?

Below is the code snippet that I'm working with: getClients(id); location.replace('/login/index.html'); The getClients() function serves as an asynchronous AJAX request. If the list of clients is empty, the page gets redirected to another ...

javascriptjqueryajaxreplacelocation