Check out the image showing the desired form layout: https://i.sstatic.net/77sGh.jpg. I've managed to complete most of it, but I'm struggling to make the '*' symbol appear in red after certain lines. Additionally, what's the best way to center align both the input fields and their labels horizontally?
If you're looking to create a form layout, one approach is to use a structured format like the following example:
<div>
<!-- container for one row, ie the 'First Name' label and its text input box -->
<div class="row">
<!-- separating the label and input into different divs allows for proper alignment -->
<div class="left-side"><p>First Name:</p></div>
<div class="right-side"><p><input type="text" class="textbox"/></p></div>
</div>
<div class="row">
<div class="left-side"><p>Last Name:<p></div>
<div class="right-side"><p><input type="email" class="textbox"/></p></div>
</div>
<div class="row">
<div class="left-side"><p>Student ID:<p></div>
<div class="right-side"><p><input type="text" class="textbox"/></p></div>
</div>
</div>
Repeat this structure for other form fields.
In your CSS, style the left-side class with width and right-aligned text:
.left-side {
width: 100px;
text-align: right;
}
For the right-side class, set width and left align:
.right-side {
width: 200px;
text-align: left;
}
To add a red * after each textbox, include the following code after the input:
<span class="redStar">*</span>
And define the .redStar CSS class:
.redStar {
color: red;
}
In my AngularJS SPA project, I am using ngRoute along with Bootstrap's Carousel template. However, I have run into an issue where certain functionalities ceased to work once I started using ng-view instead of placing all the main content in the index. ...
My experience with this bootstrap/jquery page in Firefox (v39, latest updates installed) has been unusual as it always seems to jump to the bottom of the page upon clicking. Upon inspecting the code, I couldn't find any JavaScript responsible for thi ...
I have a 3-column grid, with content and a sidebar. On small and medium devices each takes up 12 columns. Take a look at the example here: cdpn.io/anon/pen/bqENqG. I am looking to have the sidebar appear after the articles on small and medium devices like ...
It is common knowledge that Twitter operates in an API-centric manner, meaning all Twitter apps retrieve their data through the API. Upon accessing (or .xml for those who prefer), a JSON formatted result with plaintext content and no additional formattin ...
I'm currently using Umbraco with the data-type grid layout and I am trying to add custom settings (CSS classes) to each row/cell. The results are somewhat working, but I want to improve it. Here's the user interface: https://i.stack.imgur.com/iY ...
My nearly completed jQuery slideshow is working well except for one issue - the height of the slideshow remains fixed at the height of the first displayed slide, causing problems. View the issue here: . I have tried different jQuery solutions from StackOve ...
I am looking for a way to decrease the opacity and overlay text on a thumbnail image when it is hovered over. I have considered a few methods, but I am concerned that they may not be efficient or elegant. Creating a duplicated image in Photoshop with the ...
Hello there, I've encountered a slight issue with a text input field that has border radius. The first character typed seems to protrude slightly outside the input field due to the border radius. Is there a way to add some extra whitespace before the ...
I have 10 <p> tags in my HTML with the class of .rule I am looking to update the text for each of them independently without resorting to individual IDs like #rule1, #rule2, #rule3: $('.rule').eq(0).text('Rule 1') $('.rule& ...
Currently, I am attempting to create a webpage where users can input two colors and then when they press the button, a gradient of those two colors will appear on the button itself. <!doctype html> <html> <head> <script src=&apos ...
Is there a way to incorporate HTML markups (generated dynamically by a CMS) into a JSON file? I am aware that in the html string, one must escape double quotes by adding "" as shown below. { "title": "Title", "da ...
My current setup involves using fancyBox, where images are wrapped in <a> tags to allow for enlargement upon clicking. However, I am facing an issue where users can navigate not only within the same panel but also between panels. Ideally, I want to l ...
Why is auto play muted in both Firefox and Chrome? How can we code it so that browsers don't block it? Here's the code I'm using: <audio id="audio1" src="https://notificationsounds.com/storage/sounds/file-sounds-1217-relax ...
After browsing through several websites, I managed to create a basic pop-up box using javascript to showcase my contact details. While I am content with its functionality, I have encountered an issue where the popup window is positioned absolutely rather t ...
Is there a way to display a large canvas as a smaller one for better user interaction without compromising the size of the uploaded canvas later on? I'm currently working with Fabric.js and exploring the Canvas CSS trick that involves setting the widt ...
I am currently facing an issue with implementing a modal in my app using the DurandalJS (SPA) framework. The modal is not displaying correctly, as it opens without a blockout and stretches horizontally across the entire browser. (I expect "Feeds", the "Ne ...
I have a setup where the names and occupations of participants are displayed next to their artworks, and I've made it sticky so that as we scroll through the images, the names stay on the left. Now, I want the names to scroll out once the images for e ...
I am attempting to place the prints generated by this PHP code into separate HTML divs so that I can customize them using CSS. However, everything is currently being printed into a single div named "body" with the class "hasGoogleVoiceExt". <?php class ...
Despite my searches on SO, it appears that most questions revolve around simply making a div editable using contenteditable="true". I am interested in finding the most effective method for tracking all formatting tags applied to a document. Merely togglin ...
As a beginner in the world of coding, I decided to start my journey with Codecademy. Everything seemed to be going smoothly as I created a carousel image slider using JQuery. However, when I tried implementing the same code on jsfiddle, the slider became s ...