Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I want to do div "Scroll" which stay in one place, even during scroll. Here's my code :
.Scroll {
position: fixed;
}
.Down {
clear: both;
}
<div class="container-fluid">
<div class="Scroll">
<div class="Down">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Search">
</div>
<div class="form-group" style="display:inline-block;width:300px;">
<h4><small>Select Date From <span class="glyphicon glyphicon-calendar"></span></small></h4>
<input type="date" class="form-control" style="width:250px;" class="form-control" />
<h4><small>Select Date To <span class="glyphicon glyphicon-calendar"></span></small> </h4>
<input type="date" class="form-control" style="width:250px;" class="form-control" />
</div>
</div>
</div>
</div>
<div class="Down">
<table>
<thead>
<tr>
<th>NAME</th>
<th>DATE</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="name in names">
<td>{{name.name}}</td>
<td>{{name.date}}</td>
</tr>
</tbody>
</table>
</div>
It doesn't work. Thanks for answers in advance!
Just add position:absolute instead of position:fixed like below:
.Scroll {
/*position: fixed;*/
position: absolute;
}
You need to have enough content to scroll or you're not going to be able to scroll.
The following css is what I used:
.Scroll {
display:block;
position: fixed;
top:100;
left:100;
background:#fff;
}
.Down {
clear: both;
}
See my jsfiddle:
https://jsfiddle.net/e63eyswp/1/
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I am trying to align my modal to the right (like this question here: align Modal on the right side in Bootstrap 4) but using Bulma and overriding the modal class in that answer did not work.
I tried adding some random flexbox helpers (I don't really what I am doing here...) but that did not seem to make a different either. Could someone please show me how to align the modal to the right using Bulma?
Thanks!
Edit: I have created a jsfiddle here.
You can achieve this by rewriting the #modal.modal and #modal .modal-card styles. And changed the styles modal-card to look similar like this.
style.css
#modal.modal {
align-items: start;
flex-direction: row;
justify-content: end;
}
#modal .modal-card {
max-height: 100%;
min-height: 100%;
width: 300px;
margin-right: 0;
}
#media screen and (min-width: 769px) {
#modal .modal-card {
margin-right: 0;
}
}
var open = document.querySelector('.open-modal');
var modal = document.querySelector('#modal');
var close = document.querySelector('#close');
open.addEventListener('click', function() {
modal.classList.add('is-active');
});
close.addEventListener('click', function() {
modal.classList.remove('is-active');
});
#modal.modal {
align-items: start;
flex-direction: row;
justify-content: end;
}
#modal .modal-card {
max-height: 100%;
min-height: 100%;
width: 300px;
margin-right: 0;
}
#media screen and (min-width: 769px) {
#modal .modal-card {
margin-right: 0;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<section class="section">
<div class="columns">
<div class="column is-4-tablet is-3-desktop is-2-widescreen"></div>
<div class="column">
<h1 class="title">Customers</h1>
<!-- modal content -->
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button id="close" class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p class="title">
Modal content here but would like this to be right aligned.. something that looks like a right panel
</p>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button">Cancel</button>
</footer>
</div>
</div>
<nav class="level">
<div class="level-left">
<p class="level-item">
<button class="open-modal button is-success">Open Modal</button>
</p>
</div>
</nav>
<table class="table is-hoverable is-fullwidth">
<thead>
<tr>
<th class="is-narrow">
<input type="checkbox" />
</th>
<th>Name</th>
<th>Email</th>
<th>Country</th>
<th>Orders</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<a href="edit-customer.html">
<strong>John Miller</strong>
</a>
</td>
<td><code>johnmiller#gmail.com</code></td>
<td>United States</td>
<td>
7
</td>
<td>
<div class="buttons">
<a class="button is-small" href="edit-customer.html">Edit</a
>
<a class="button is-small">Delete</a>
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<a href="edit-customer.html"><strong>Samantha Rogers</strong></a
>
</td>
<td><code>samrogers#gmail.com</code></td>
<td>United Kingdom</td>
<td>
5
</td>
<td>
<div class="buttons">
<a class="button is-small" href="edit-customer.html">Edit</a
>
<a class="button is-small">Delete</a>
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<strong>Paul Jacques</strong>
</td>
<td><code>paul.jacques#gmail.com</code></td>
<td>Canada</td>
<td>
2
</td>
<td>
<div class="buttons">
<a class="button is-small" href="edit-customer.html">Edit</a
>
<a class="button is-small">Delete</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I am trying to change the background-color of my input text and its not changing in chrome, it works in Safari but not chrome:
input {
background-color: red !important;
}
<form action="login.php?action=login" method="post">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" name="username" id="username" class="form-control" />
</div>
<div class="form-group">
<input type="password" name="password" id="password" class="form-control" />
</div>
<div class="form-group">
<input type="submit" name="submot" id="submit" class="btn btn-default" value="Login" />
</div>
</div>
</div>
</form>
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px white inset !important;
}
and this to change color in autofill textbox:
input:-webkit-autofill {
-webkit-text-fill-color: yellow !important;
}
You can use jquery for this. Try this. This works and supports perfectly in all browsers.
$(document).ready(function(){
$(".test");});
Try the following example:
$(document).ready(function(){
//Method 01
$(".test");
//Method 02
//$(".test").css("background-color", "red");
});
.test{
background-color:#64b5f6; /* Your color */
color:#000;
border:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="username" id="username" class="form-control test" />
Happy coding!
I am using select2 for a dropdown in a form and I like using a table layout (although maybe this is part of the problem?) to keep the widths of all of the form-group elements the same.
The problem is that when I type text into the select2 dropdown, the width changes (and in weird ways). Is there a way I can force the initial width that the browser gives the select2 dropdown to remain fixed?
Here is my html:
<table>
<tr>
<td>
<div class="row">
<div class="form-group">
<label>Title</label>
<input name="title" class="form-control"/>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="form-group">
<label>a label</label>
<input class="form-control"/>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="form-group">
<label>a label</label>
<select id="tag_list" class='form-control' multiple="multiple">
<option value='1'>abba</option>
<option value='2'>zabba</option>
<option value='3'>doo</option>
</select>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="form-group">
<label for="category_type">Category Type:</label>
<select name="category_type" id="category_type_list" class="form-control">
<option value="" disabled selected>If there is a matching type for the category, please select it</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row action">
<div class="form-group">
<div class="inline">
<button class="btn btn-primary form-control" type="submit">submit</button>
</div>
<div class="inline">
<button class="btn btn-primary cancel">Cancel</button>
</div>
</div>
</div>
</td>
</tr>
</table>
and my css:
.form-group{
display: block;
}
table {
margin-left: 5%;
table-layout: fixed;
}
input {
height: 30px;
border: 1px solid #e3e3e3;
padding: 3px 10px;
width: 100%;
}
.inline{
float:left;
margin-right: 5px;
}
span.select2-container{
width: 100% !important;
tex-overflow: ellipsis;
}
Here is a fiddle example. You can try it out by typing something long enough into the select2 dropdown and pressing enter seeing that the width changes. How can I stop that from happening?
I Added a new css class that seems to work aimed at that specific select box.
The + is equivalent to the jquery next function. This should get you pointed in the right direction. Just to be safe, make sure this is set after you load the select2 css.
#tag_list + .select2-container .select2-selection--multiple {
max-width: 400px;
}
So if you want the search box to be the same size for all select2s (single or multi ) then try...
.select2-container .select2-dropdown,
.select2-container .select2-selection--multiple {
max-width: 300px;
}
I turned the last select box into a select2 and tried this.
What I am doing is using the DOM explorer built into IE to find the element that is giving me issues and what classes are being applied. Then I simple overwrite or append them.
by setting width=100% as below
<select id="tag_list" style="width:100%; display:block;" class='form-control' multiple="multiple">
<option value='1'>abba</option>
<option value='2'>zabba</option>
<option value='3'>doo</option>
</select>
.select2 dropdown to stay at constant width in table tag use below style in your code
<style>
.select2-container{
width: 100% !important;
}
</style>
I'm doing my first piece of HTML & CSS today, and I'm having trouble trying to move a div. I read some tutorials on CSS and tried to replicate what I've seen. But for some reason I cannot get the div to move.
Can anybody set me straight as to what I've done wrong please?
CSS
#seax {
position:static;
top:400;
left:400;
}
HTML
<div id="seax">
<form autocomplete="off" method="post" action="/search.html">
<table>
<tbody>
<tr>
<td>Search:</td>
<td>
<input type="text" size="40" name="for" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</td>
<td>
<input type="hidden" name="brand" value="0">
<input type="image" src="/user/templates/custom/search.gif" value="Go" alt="Go" style="padding: 0px">
</td>
</tr>
</tbody>
</table>
</form>
</div>
Change position:static; to position:relative;. Static position displays the div in it's default position, which is as it'd appear in the document flow you see.
Add "px" to your CSS, and use absolute
#seax {
position:absolute;
top:100px;
left:100px;
}
http://jsfiddle.net/djwave28/tnvQz/
It really depends on how you want to position the div.
position: static; is definitely your issue, as static position (as #Omega noted) displays the div in it's default position. You mean to write either position: absolute or position: relative. The difference between the two is best outlined here but I'll give you a tl;dr.
position: absolute positions the div relative to the whole page, whereas position: relative positions it relative to the parent.
Also, you are missing px at the end of your top and left property values (i.e top:10px; and left:10px;)
Give the div a position of absolute
#seax {
position: absolute;
top:400;
left:400;
}
Try changing
<div id="seax"></div>
to
<div class="seax"></div>
and
#seax {
position:static;
top:400;
left:400;
}
to
.seax {
position:absolute;
top:400px;
left:400px;
}
if you want to use seax for multiple elements.
You could even try:
<form autocomplete="off" method="post" action="/search.html">
<div class="seax">
<table>
<tbody>
<tr>
<td>Search:</td>
<td>
<input type="text" size="40" name="for" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</td>
<td>
<input type="hidden" name="brand" value="0">
<input type="image" src="/user/templates/custom/search.gif" value="Go" alt="Go" style="padding: 0px">
</td>
</tr>
</tbody>
</table>
</div>
</form>
That should fix it. Otherwise your HTML document should look something like this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
.seax {
position:absolute;
top:400px;
left:400px;
}
</style>
<body>
<div class="seax">
<form autocomplete="off" method="post" action="/search.html">
<table>
<tbody>
<tr>
<td>Search:</td>
<td>
<input type="text" size="40" name="for" class="ui-
autocomplete-input" autocomplete="off" role="textbox" aria-
autocomplete="list" aria-haspopup="true">
</td>
<td>
<input type="hidden" name="brand" value="0">
<input type="image" src="/user/templates/custom/search.gif"
value="Go" alt="Go" style="padding: 0px">
</td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I'm developing an open-source social-network for a student-group &etc.
I want this form to be centred on the page.
My attempt: http://jsfiddle.net/WgSgW/
How do I get it centred? - The closest I've gotten to a working solution is using the offset# classes.
Replace your form container, .span9 with .span12 to fully expand that row across the screen, then simply define your log in table as display:inline-block and text-align:center all the content of your form, like so:
Created my own classes to not mess around with the bootstrap's default values.
CSS
.login {
text-align:center;
}
.center {
*display:inline; /* ie 7 */
display:inline-block;
text-align:left; /* to reset the alignment to the left, container will remain centered */
zoom:1; /* ie7 junk */
}
HTML
<div class="container">
<div class="row">
<div class="span12 login">
<form action="" enctype="multipart/form-data" method="post">
<table class="center">
<tr id="auth_user_email__row">
<td class="w2p_fl"><label for="auth_user_email" id="auth_user_email__label" style="display:none;">Email: </label></td><td class="w2p_fw">
<input class="string" id="auth_user_email" name="email" placeholder="email address" type="text" value="" />
</td><td class="w2p_fc"></td>
</tr>
<tr id="auth_user_password__row">
<td class="w2p_fl"><label for="auth_user_password" id="auth_user_password__label" style="display:none;">Password: </label></td><td class="w2p_fw">
<input class="password" id="auth_user_password" name="password" placeholder="password" type="password" value="" />
</td><td class="w2p_fc"></td>
</tr>
<tr id="submit_record__row">
<td class="w2p_fl"></td><td class="w2p_fw">
<input class="btn btn-large btn-primary" type="submit" value="Signup" />
</td><td class="w2p_fc"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="pagination-centered">
By signing up you are agreeing to our terms & conditions
</div>
</div>
Demo: http://jsfiddle.net/WgSgW/1/
The native way for positioning elements in Twitter Bootstrap is using offset# classes. For your particular case, you can use
<div class="span4 offset4"> ... </div>
Taje a look here
The form is already centered. What you need to do is center the table by applying style margin:0 auto;
this should work.