My idea is to incorporate Bootstrap 3 rows and col-*s into my numbered list. Specifically, I have a form where users can add multiple addresses. Each address includes form fields for street, city, etc., with these fields aligned in col-*s to ensure consistent appearance across different screen sizes.
Here's what I envision for each list entry:
https://i.sstatic.net/KHtSs.png
However, the numbering in the second list is positioned unexpectedly:
content: counter(list)Instead of using
<ol><li></li></ol>:before pseudo-element along with the counter property.
https://jsfiddle.net/glebkema/gfdxdnje/
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.container-list {
counter-reset: list;
padding-left: 40px;
}
.container-list > .row {
margin-top: 12px;
position: relative;
}
.container-list > .row:before {
counter-increment: list;
content: counter(list) ".";
display: block;
position: absolute;
right: 100%;
}
.container-list input {
border: 2px solid black;
margin-bottom: 8px;
padding-left: 4px;
width: 100%;
}<div class="container container-list">
<div class="row">
<div class="col-xs-4">
<input placeholder="field 1">
</div>
<div class="col-xs-4">
<input placeholder="field 2">
</div>
<div class="col-xs-4">
<input placeholder="field 3">
</div>
<div class="col-xs-3">
<input placeholder="field 4">
</div>
<div class="col-xs-9">
<input placeholder="field 5">
</div>
</div>
<div class="row">
<div class="col-xs-4">
<input placeholder="field 1">
</div>
<div class="col-xs-4">
<input placeholder="field 2">
</div>
<div class="col-xs-4">
<input placeholder="field 3">
</div>
<div class="col-xs-3">
<input placeholder="field 4">
</div>
<div class="col-xs-9">
<input placeholder="field 5">
</div>
</div>
</div>float: right;http://jsfiddle.net/glebkema/pwtkcusy/
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
li {
margin-top: 12px;
}
li .row {
float: right;
margin: 0;
width: 100%;
}
li .row input {
border: 2px solid black;
margin-bottom: 8px;
padding-left: 4px;
width: 100%;
}<div class="container">
<ol>
<li>
<div class="row">
<div class="col-xs-4">
<input placeholder="field 1">
</div>
<div class="col-xs-4">
<input placeholder="field 2">
</div>
<div class="col-xs-4">
<input placeholder="field 3">
</div>
<div class="col-xs-3">
<input placeholder="field 4">
</div>
<div class="col-xs-9">
<input placeholder="field 5">
</div>
</div>
<div class="clearfix"></div>
</li>
<li>
<div class="row">
<div class="col-xs-4">
<input placeholder="field 1">
</div>
<div class="col-xs-4">
<input placeholder="field 2">
</div>
<div class="col-xs-4">
<input placeholder="field 3">
</div>
<div class="col-xs-3">
<input placeholder="field 4">
</div>
<div class="col-xs-9">
<input placeholder="field 5">
</div>
</div>
<div class="clearfix"></div>
</li>
</ol>
</div>Hello there. I'm having an issue with my website - www.robbiedawson.com. Sometimes, the text in the grey footer fails to load properly, including numbers and links, making navigation impossible. This happens occasionally when refreshing the page, whet ...
I'm trying to automate the resizing of a watermark to cover 1/4 of an image. The code for the watermark is functioning, but I'm facing issues with resizing it correctly. <?php $image = $_GET['src']; $path_parts = pathinfo($image); ...
Currently, I am exploring selenium and attempting to automate a web application using the junit framework. Similar to many others, I am facing an issue with identifying web elements. My particular challenge arises from two submit buttons that share the sam ...
We are managing a website where we showcase a prominent video stage for all visitors. However, there is a particular client that prohibits all videos with a 403 forbidden status on their devices and we are looking to substitute an image in place of the blo ...
$( "#btn1" ).click(function() { var $this = $(this); var clickCount = ($this.data("click-count") || 0) + 1; $this.data("click-count", clickCount); if (clickCount%2 == 0) { $("#img1").hide('clip').animate({ margi ...
How can I make Glyphicons appear lighter in weight? I have utilized the "ok" Glyphicon <span class="glyphicon glyphicon-ok"></span> which currently displays as follows: Is there a method to decrease the weight of the icon in order to create a ...
I am attempting to wrap the title text around a span object. So far, I have been successful in getting everything aligned correctly, but the final step of wrapping the text seems challenging. My suspicion is that the issue lies in the separation of contain ...
I am encountering an issue with styling HTML select options in Chrome. Despite successfully applying borders to each option in Firefox, I cannot get it to work in Chrome. Can anyone advise on how this can be achieved? <select id="sortingOptions" class= ...
I am encountering a strange issue when trying to display all incorrect answers in a table for each question. For some reason, one of the rows is showing up empty. This problem only occurs with question 2, which happens to have multiple correct answers. I s ...
I recently updated my Joomla website to be responsive, but I'm having issues with the text color on forms in the mobile version. Despite my efforts to change the color through CSS, it's still barely visible when typing. This issue has been frustr ...
I am currently utilizing Vue3. I have implemented a feature where the box grows in size when the mouse hovers over it. .curl:hover { width: 200px; height: 200px; } I am looking for a way to notify the user once the animation is complete and the size has ...
Currently, I am incorporating SVG Icons that I created in Illustrator into my Vue.js Webapp. I have utilized Webpack's "require" to load the icons. Rather than accessing the SVGs directly using the src attribute of the img tag, I am inserting them usi ...
I currently have a bootstrap-4 column setup that looks like this: <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-4">A</div> <div class="col-xs-6 col-sm-4"& ...
I am facing issues with my CSS styles in IE8, specifically with border radius and background gradients, as well as the size of the container. I have tried using CSS PIE to fix it, but that also didn't work. If anyone has any suggestions or solutions, ...
My homepage includes a register form that should open when the register button is clicked. However, I am encountering an issue where the function responsible for opening the form from another JavaScript file is not being triggered. Here is the HTML code: ...
In my program, I have a function that generates an HTML table based on data retrieved from a SQL database. getWhileLoopData(){ string htmlStr = ""; SqlConnection thisConnection = new SqlConnection(ConfigurationManager.ConnectionS ...
I am attempting to incorporate Bootstrap into my project using RequireJS alongside typescript AMD modules. Currently, my requireJS configuration looks like this: require.config({ shim: { bootstrap: { deps: ["jquery"] } }, paths: { ...
Recently, I stumbled upon a fantastic timer and redirect script based on jQuery from the talented folks over at the 'jQuery by Example' website. This script automatically redirects users after a specified number of seconds has elapsed: Here&apos ...
Currently, I am in possession of a set of approximately 10 monotone icons all sized at 25x25 or smaller. I am contemplating between two options for better performance: 1) Incorporating them into CSS using data URIs 2) Utilizing them as a font (for exampl ...
I'm currently immersed in a project where the class and string within a span element are randomized, yet the path remains constant on the webpage. How can I extract and print the desired string? <!span unselectable="on" class="WubDR ...