How can I position a dropdown in the top right corner of my card header? I want to have a welcome message on the right side of the card header next to the title, similar to the image below:
How can I position a dropdown in the top right corner of my card header? I want to have a welcome message on the right side of the card header next to the title, similar to the image below:
My Recent CSS Modification:
I customized the .card class from Bootstrap by adding CSS properties such as display: "flex",
, and justify-content: "space-between"flex-direction: row
For more details, check out this link: https://getbootstrap.com/docs/4.0/utilities/flex/
Here is my updated style:
<style>
.card {
/* Added shadows for a "card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
margin: 0 auto;
float: none;
margin-bottom: 10px;
}
/* Increased shadow on hover */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
body {
background-color: lightblue;
}
</style>
Below is the HTML structure with the new card customization:
<div class="container-fluid" style="padding-top: 50px">
<div class="card d-flex flex-row justify-content-between">
<div
class="card-header text-center"
style="font-family: Sans-Serif; text-transform: uppercase; font-size: 1.5rem"
>
Project Manager Dashboard
</div>
<div class="btn-group dropleft">
<button
type="button"
class="btn btn-outline-secondary"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Hi, Drake
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a href="{% url 'logout_view' %}"
><button class="dropdown-item" type="button">Logout</button></a
>
</div>
</div>
</div>
</div>
If you want to position it in the upper right corner, simply utilize the align property which will align the element to the right.
<div class="container-fluid" style="padding-top: 50px;">
<div class="card">
<div class="card-header text-center " style="font-family: Sans-Serif; text-transform:uppercase; font-size:1.5rem">
Project Manager Dashboard
<div class="btn-group dropright" align="right" >
<!-- Dropdown menu links -->
<a href="{% url 'logout_view' %}"><button class="dropdown-item" type="button">Log</button></a>
</div>
<div class="btn-group dropleft">
<button type="button" class="btn btn-outline-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Hi, Drake
</button>
</div>
</div>Is this the proper setup for the form-group and input-group? The width of the txtstartIpAddr input control is not displaying correctly. <div class="form-group" id="NewIpRangeRow"> <label> ...
Currently, I am working with Angular and implementing Angular Material components like md-autocomplete from [https://material.angular.io/components/autocomplete/api][1]. However, I am facing an issue trying to add a border radius to my md-autocomplete elem ...
I am currently developing a tool for practicing piano playing in a game. The goal is to help players learn how to play songs by identifying notes that are played within 50ms of each other and displaying them as "you have to press them together." While this ...
My Bootstrap modals in the HTML code are causing issues as they do not display any content when the triggering buttons are clicked. Despite having correct IDs and attributes, the modals remain empty when the buttons are clicked. Below is the relevant part ...
Hello, I am a beginner learning AJAX and JQuery. Maybe this is a silly question, but please bear with me. I am trying to dynamically show data without refreshing the page using AJAX. I have a function loaded in the body tag which handles this. Everything ...
Encountering a peculiar issue exclusively in Safari - when hovering over a link in the header, the links to the right of the hovered-over link alter their size (appearing smaller) during the hover animation. Once the animation concludes, these links revert ...
I am currently designing the homepage for a social media platform. I have around 45 dummy posts and I am looking for a way to limit the overflow in CSS so that only 5 posts are displayed at a time. Once the user reaches the bottom of those 5 posts, another ...
I am attempting to build a dynamic bootstrap carousel using my json data, and I have implemented jQuery-Template for rendering. Essentially, I am generating the carousel slider on-the-fly from my json data with the help of jQuery-Template. Here is a snippe ...
https://i.sstatic.net/EZSOX.png Is there a way to incorporate this specific HTML tag with its distinct colors into an element within a JSX environment? I attempted the following approach: const htmlTag = '<ifx-icon icon="calendar-16"> ...
Currently, I am facing an issue with two divs that have a position: fixed; property. Everything functions properly until I zoom in on the page. Typically, when you zoom in on a page, two sliders appear to allow you to view content beyond your screen. Howev ...
import React, { useState } from "react"; const RegistrationForm = () => { const [name, setName] = useState(""); const [password, setPassword] = useState(""); const [email, setEmail] = useState(" ...
After two days of relentless searching, I finally found the solution. What's the process for creating an element and then writing it in HTML with innerHTML? function dataPull() { // Connects to my server from which it pulls JSON data containin ...
I created an aspx file for my GUI, image buttons, and image slide shows using HTML5, CSS, and javascript. I finished the HTML5 part in the aspx file format within visual studio 2012. To standardize my GUI for all other web forms, I tried creating a new mas ...
As I have multiple blocks of content, I slide one to the side and then remove it. Once that is completed, I want the blocks below it to smoothly move up and fill the space. Check out this JSFiddle Example for reference HTML Code <div id="container"&g ...
Hi there, I'm in need of some assistance with a seemingly simple task that I've been struggling with for hours. https://i.sstatic.net/6J6G7.png I'm trying to create a 3 column layout where the images with varying heights align at the botto ...
How can I make a div update with the title of the currently playing video when a user clicks on another video? I am having trouble finding an event in the API that lets me know when the video source has changed. Is there a specific event I should be listen ...
I need the blue color of the navigation bar to cover the entire screen, while keeping the About, Updates, and Who am I? links centered. The background should adjust accordingly if there are any resizing changes. If there's a better method for centerin ...
I am new to JavaScript and I'm searching for an article or method to achieve the following task, whether it's through a form or just JS (without using PHP). I have a set of checkboxes labeled as box 1 - 4. When any one of them is checked, I want ...
I've been attempting to achieve a 70% transparent black background on an element, but unfortunately, I had to use a pixel to address browser compatibility problems. Using CSS alone would make the entire content of the element transparent as well. Her ...
I am facing an issue with my select menu. <select id="dd" ng-show='data != null' ng-model='search'></select> Initially, I set the filter to display only USA by default. $scope.search = 'United States of America' ...