I'm struggling to set the div width to the remaining width of the container div. In the example below I want the red div (an input) to take as much space as possible. If you enter anything in the input the green div appears, which should always be right aligned.
I don't want to use either flex nor display: table-* or workarounds like setting overflow: hidden for to make space for floats.
EDIT: I'm looking for any solution that works for IE10+ (including display: table-*, etc.)
Example: https://codesandbox.io/s/23xo3wjjrp (Change the template and style tag inside /components/SearchBox.vue for changes)
The example uses vue, but for completeness I post the code here too:
HTML
<div class="ms-Fabric ms-SearchBox" :class="searchBoxStyle">
<div class="ms-SearchBox-iconContainer">
<i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
</div>
<input class="ms-SearchBox-field" type="text" placeholder="Search"
v-model="searchQuery" ref="input"
#blur="onBlur" #focus="onFocus">
<div class="ms-SearchBox-clearButton" v-show="searchQuery.length > 0"
#click="clear">
<i class="ms-SearchBox-icon ms-Icon ms-Icon--Clear"></i>
</div>
</div>
SCSS
// Active styles
.ms-SearchBox.is-active {
.ms-SearchBox-iconContainer {
width: 4px;
transition: width .167s;
.ms-SearchBox-icon {
opacity: 0;
}
}
}
// Static styles
.ms-SearchBox {
display: inline-block;
font-size: 0px;
font-weight: 400;
color: #333;
border: 1px solid #a6a6a6;
height: 32px;
padding-left: 8px;
width: 208px;
.ms-SearchBox-iconContainer {
font-size: 14px;
color: #106ebe;
transition: width .167s;
.ms-SearchBox-icon {
opacity: 1;
transition: opacity .167s 0s;
}
background: rgba(0, 0, 0, 0.2);
}
.ms-SearchBox-field {
display: inline-block;
font-size: 14px;
margin: 0;
padding: 0;
text-overflow: ellipsis;
overflow: hidden;
border: none;
outline: 1px solid transparent;
height: 32px;
vertical-align: top;
background: rgba(255, 0, 0, 0.2);
}
.ms-SearchBox-iconContainer,
.ms-SearchBox-clearButton {
display: inline-block;
height: 32px;
line-height: 32px;
width: 32px;
text-align: center;
}
.ms-SearchBox-clearButton {
font-size: 14px;
background: rgba(0, 255, 0, 0.2);
&:hover {
cursor: pointer;
}
}
}
You should try to set a width:100% to your input, and to set position:absolute to your icon containers. With paddings on the input, this should do the thing.
Hope I understood the question :)
Related
Please see the JSFiddle.
This is an adaptive design with "vw" parameters in the code. I want Text_1, Text_2 and Text_3 be aligned horizontally, which means that when i change the browser's window size, the distance from the left side of the screen to the beginning of the text is the same for those 3 words. With the current code I align them (via "margin" property), but as soon as the browser's window size changes, Text_2 and Text_3 move relatively to Text_1 (to the right when window size dicreases, to the left when it increases). What is wrong in the code please?
<div class="meaning">
<ol class="circle">
<li>Text_1</li>
<ul>
<li><span class="example">Text_2</span></li>
<li><span class="example_translated">Text_3</span></li>
</ul>
</ol>
</div>
.meanings_and_examples {
display: flex;
flex-direction: column;
}
.meaning {
font-family: Tahoma, Geneva, sans-serif;
width: auto;
text-align: left;
color: #1f2c60;
font-weight: 700;
word-wrap: break-word;
text-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
margin-right: 1%;
font-size: calc(0.5em + 2.3vw);
}
ol.circle {
list-style-type: none;
}
li {
line-height: calc(1.1em + 1.5vw);
}
ol.circle > li {
counter-increment: item;
margin: 0% 0% 0.2% 1.3em;
}
ol.circle > li::before {
content: counter(item);
display: inline-block;
text-align: center;
border-radius: 100%;
width: calc(1.2em + 1.5vw);
background: #1f2c60;
color: white;
box-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
margin: 0% 3.5% 0% -2.4em;
}
ul {
list-style-type: none;
}
.example {
width: auto;
text-align: left;
font-weight: 400;
}
.example_translated {
width: auto;
text-align: left;
font-weight: 400;
color: #5d78e5;
}
Okay, you have a lot of things going on, for your next question I would strip the fiddle of any code that is not needed for the example, all styling and such.
Next you are using too many dynamic widths together and as Paulie_D said, you are not allowed to put anything other than li-tags in a ul-tag or ol-tag.
The main issue is that you have two lists, one within the other where the padding is very dynamic, I tried to change it so the padding matched the dynamic width of the bullet.
I kept your HTML and changed some CSS so it behaves like you want but you really should think of a new HTML setup.
.meanings_and_examples {
display: flex;
flex-direction: column;
}
.meaning {
font-family: Tahoma, Geneva, sans-serif;
width: auto;
text-align: left;
color: #1f2c60;
font-weight: 700;
word-wrap: break-word;
text-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
margin-right: 1%;
font-size: calc(0.5em + 2.3vw);
}
ol.circle {
list-style-type: none;
border: 2px solid purple;
position: relative;
padding-left: 10vw;
}
li {
line-height: calc(1.1em + 1.5vw);
}
ol.circle > li {
counter-increment: item;
margin: 0% 0% 0.2% 0;
border: 2px solid orange;
padding: 0;
position: relative;
}
ol.circle > li::before {
content: counter(item);
display: inline-block;
text-align: center;
border-radius: 100%;
position: absolute;
background: #1f2c60;
color: white;
box-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
width: calc(1.2em + 1.5vw);
transform: translateX(-100%);
}
ul {
list-style-type: none;
padding-left: 0;
border: 2px solid red;
}
.example {
width: auto;
text-align: left;
font-weight: 400;
}
.example_translated {
width: auto;
text-align: left;
font-weight: 400;
color: #5d78e5;
}
<div class="meaning">
<ol class="circle">
<li>Text_1</li>
<ul>
<li><span class="example">Text_2</span></li>
<li><span class="example_translated">Text_3</span></li>
</ul>
</ol>
</div>
See my modified fiddle for the behaviour you requested.
I'm not sure what is the point of inserting the ul in the ol. But I think if is not mandatory, you should use them separately since you are enumerating same type of elements from what I can see.
Then there are several problems with your margins: your conter has width: calc(1.2em + 1.5vw); but your margins are margin: 0% 3.5% 0% -2.4em; .
I am guessing this is accomplished by trying different values.
But your couter witch has width: calc(1.2em + 1.5vw); is pushing the first element out of the list.
So the margin should consider that if you want the list items to be aligned. So your counter should have the margins something like margin: 0% 3.5% 0% calc(-3.5% - 1.2em - 1.5vw);
I did a working example here . I am not sure if you want it exactly this way, but you can start from here.
But I have to ask:
Do you really need one and one or you just use them so you can add before some of the elements the counter? Because it might be better to just use a class (for the counter) and use a sigle list for all elements.
I am trying to create a custom cursor that changes when hovering over a <div>, but there is a flicker when moving left to right across it, but not when moving right to left. Why this is happening and what I can do to fix it?
document.addEventListener('mousemove', (ev) => cursorMove(ev));
function cursorMove(ev) {
let circle = document.getElementById('circle');
let posY = ev.clientY;
let posX = ev.clientX;
circle.style.top = posY + 'px';
circle.style.left = posX + 'px';
}
body {
margin: 0;
height: 100vh;
background-color: #acd1d2;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
}
#wrapper {
position: relative;
width: 70%;
height: 80%;
}
.box {
height: 25%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
#box-1 {
background-color: #e8edf3;
}
#box-1:hover ~ #circle {
background-color: #e6cf8b;
box-shadow:inset 0em -0.3em 0.4em 0.2em #ca9e03a6;
}
#box-2 {
background-color: #e6cf8b;
}
#box-2:hover ~ #circle {
background-color: transparent;
border: 3px solid #E91E63;
}
#box-3 {
background-color: #b56969;
}
#box-3:hover ~ #circle {
height: 1em;
width: 1em;
background-color: #e6cf8b;
}
#box-4 {
background-color: #22264b;
color: white;
}
#box-4:hover ~ #circle {
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}
#circle {
position: fixed;
border-radius: 50%;
z-index: 5;
height: 32px;
width: 32px;
background-color: white;
}
<div id="wrapper">
<div id="box-1" class="box">Sphere</div>
<div id="box-2" class="box">Circle outline</div>
<div id="box-3" class="box">Circle pin</div>
<div id="box-4" class="box">Circle color gradient</div>
<div id="circle"></div>
</div>
That's because your mouse moves faster than the circle and you hover over it, so the styles that apply to it are the same ones than when the cursor is on the background green/blue-ish area of the page.
You can fix that by adding pointer-events: none to the circle so that it feels a bit like this:
Ok, where were we? Oh yes... So you should use position: fixed instead of absolute (as you really want your cursor to be positioned relative to the top-left corner of the viewport) and probably window.requestAnimationFrame to get a smoother animation and translate3d(0, 0, 0) to promote the element to its own layer and enable hardware-accelerated rendering, which will also contribute to make it feel smoother.
You could also hide the default cursor with cursor: none and center the circle where the arrowhead of the cursor is to make it feel just like a real cursor.
const circle = document.getElementById('circle');
const circleStyle = circle.style;
document.addEventListener('mousemove', e => {
window.requestAnimationFrame(() => {
circleStyle.top = `${ e.clientY - circle.offsetHeight/2 }px`;
circleStyle.left = `${ e.clientX - circle.offsetWidth/2 }px`;
});
});
body {
margin: 0;
height: 100vh;
background-color: #acd1d2;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
cursor: none;
}
#wrapper {
position: relative;
width: 70%;
height: 80%;
}
#circle {
position: fixed;
border-radius: 50%;
z-index: 5;
height: 32px;
width: 32px;
background-color: white;
pointer-events: none;
transition:
background ease-in 10ms,
box-shadow ease-in 150ms,
transform ease-in 150ms;
/* Promote it to its own layer to enable hardware accelerated rendering: */
transform: translate3d(0, 0, 0);
}
.box {
height: 25%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
#box-1 {
background-color: #e8edf3;
}
#box-1:hover ~ #circle {
background-color: #e6cf8b;
box-shadow: 0 0 0 0 transparent, inset 0em -0.3em 0.4em 0.2em #ca9e03a6;
}
#box-2 {
background-color: #e6cf8b;
}
#box-2:hover ~ #circle {
background-color: transparent;
/* Use box-shadow instead of border to avoid changing the dimensions of the
cursor, which will make it be off-center until the mouse moves again: */
aborder: 3px solid #E91E63;
box-shadow: 0 0 0 3px #E91E63;
}
#box-3 {
background-color: #b56969;
}
#box-3:hover ~ #circle {
background-color: #e6cf8b;
/* Change its size with scale() instead of width and height for better
performance performance: */
transform: scale(0.5) translate3d(0, 0, 0);
}
#box-4 {
background-color: #22264b;
color: white;
}
#box-4:hover ~ #circle {
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}
<div id="wrapper">
<div id="box-1" class="box">Sphere</div>
<div id="box-2" class="box">Circle outline</div>
<div id="box-3" class="box">Circle pin</div>
<div id="box-4" class="box">Circle color gradient</div>
<div id="circle"></div>
</div>
Here you can see another cool example I made of a custom cursor using CSS that resembles a torch: How to darken a CSS background image but keep area around cursor brighter.
Also, you can check out the cursor on my website, which is quite similar to what you have done as it has animations/transitions between its different shapes or states.
🚀 Check it out here: https://gmzcodes.com/.
👨💻 Check the code here: https://github.com/Danziger/gmzcodes
I have this HTML that I can't change:
<label for="accept">I accept.</label>
<input id="accept" type="checkbox">
Now, I have to use the CSS to move the checkbox to the left and style it with a custom image.
What I usually do in CSS, when input goes before label is to make the label act like the checkbox by and hide the actual input:
input[ type=checkbox ] {
display:none;
}
input[ type=checkbox ] + label {
display:inline-block;
padding-left: 25px;
cursor: pointer;
height: 25px;
background: url('image.png') 0 -5px no-repeat;
}
input[ type=checkbox ]:checked + label {
background: url('image.png') 0 -40px no-repeat;
}
However, in this case, when I try:
input[ type=checkbox ] {
display:none;
}
label + input[ type=checkbox ] {
display:inline-block;
padding-left: 25px;
cursor: pointer;
height: 25px;
background: url('image.png') 0 -5px no-repeat;
}
label + input[ type=checkbox ]:checked {
background: url('image.png') 0 -40px no-repeat;
}
not only that it doesn't show the background, but it even unhides the checkbox, so I end up with the default checkbox after the label.
How do I go about doing this without using JavaScript?
It is not possible to target the label element using the CSS siblings selector like you try in the second code sample, since CSS selectors are read from right to left.
What you can do is to use a pseudo-element instead, and hide the input element using absolute positioning:
input {
position: absolute;
left: -999em; /* asuming direction: ltr */
}
input:before {
margin-left: 999em;
float: left;
content: "";
/* styles for visual demo */
height: 25px;
width: 25px;
margin-top: -4px;
background: #ddd;
border: 1px solid #000;
}
input:checked:before {
background: #0f0;
}
label {
display: inline;
padding-left: 35px;
line-height: 27px;
}
Working example on JSFiddle
It is a little tricky to make this work cross-browser since not all browsers allow pseudo-elements in inputs (according to spec, it is correct to not allow it), but it can be done in the browsers which supports it.
Reminder: in cases like this, always try to have the HTML changed first or ask for a compromise for the design (that is, ask if it would be ok to have the checkbox to the right instead of to the left). CSS is quite nasty in the edges, and should not always be the solution just because of the possibility.
You can customize default html check box using css. Please have a look at my fiddle.
Custom Checkbox Sample
.customCheckBoxDiv {
position: relative;
float: left;
}
.customCheckBoxDiv span {
margin-left: 25px;
color: #0066cc;
}
.loginCheckBox {
opacity: 0;
position: absolute;
z-index: 1;
cursor: pointer;
}
.checkLabel {
width: 13px;
height: 13px;
border: 1px solid #00cc00;
background: #fff;
position: absolute;
left: 4px;
top: 3px;
}
.loginCheckBox:checked + label {
border: 1px solid #00cc00 !important;
background: #00cc00 !important;
box-shadow: inset -2px 0px 0px 0px #fff, inset 2px 0px 0px 0px #fff, inset 0px -2px 0px 0px #fff, inset 0px 2px 0px 0px #fff !important;
}
<div class="customCheckBoxDiv">
<input type="checkbox" value="None" class="loginCheckBox" name="check" checked />
<label class="checkLabel"></label> <span>Remember Me</span>
</div>
you can see the website i'm currently working at here.
I know, it is VERY old styled but my customer designed it this way, and i'm just implementing it the way he wants... Don't worry, you won't be looking at it for too long!
The problem is that the navigation bar at the top disappear in internet explorer 7 (only 7) when the mouse is over it...
Exactly, all but the first element disappear. For some reason the first one stays... I cannot get any clue on what is happening, i'm sure there must be some kind of css trick i should use!
So here it is my css (only the one related to the navigation bar).
/*Relevant part*/
.navigation-menu-wrapper {
height: 143px;
max-height: 143px;
width: 829px;
}
.navigation-menu {
list-style: none;
}
.navigation-menu-item {
float: left;
background-color: rgba(255, 255, 255, 0.6);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#99FFFFFF', endColorstr='#99FFFFFF'); /*IE 7/8 fix for rgba*/
width: 163px;
height: 143px;
max-height: 143px;
font-family: "Times New Roman";
color: #000000;
text-transform: uppercase;
font-size: 24px;
line-height: 143px;
border: 1px solid #000000;
margin: 0;
padding:0;
}
.navigation-menu-item-selected {
background-color: rgba(255, 255, 255, 1);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FFFFFFFF'); /*IE 7/8 fix for rgba*/
}
/*End relevant part*/
/*Page CSS, just in case you need it*/
.page-wrapper {
width: 1024px;
height: 100%;
max-height: 100%;
min-height: 768px;
}
.center-content-wrapper {
width: 824px;
min-height: 768px;
background-image: url("../../img/background.jpg");
background-repeat: no-repeat;
}
.main-content-wrapper {
width: 100%;
min-height: 623px;
max-height: 623px;
}
.main-content-overlay {
margin: 25px;
padding-left: 70px;
padding-right: 70px;
padding-top: 20px;
background-color: rgba(0, 0, 0, 0.85);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#d8000000', endColorstr='#d8000000');
min-height: 509px;
max-height: 509px;
height: 509px;
overflow-y: auto;
font-size: 14px;
font-family: "Times New Roman";
}
Can you suggest a fix? Even a dirty trick would be very much appreciated!
Thanks!
It's because you're wrapping your <a> around your list items .. it should be the other way around. Wrap your <li> around your <a>
So like this as an example:
<ul class="navigation-menu no-margin no-padding">
<li class="navigation-menu-item single-line"><a class="navigation-menu-item navigation-
menu-item-selected link-no-decoration" href="index.php">L'attivitá</a>
</li>
It works this way .. just do the same to all of your <li> and it will work in IE7
Your markups are messed up.
<ul class="navigation-menu no-margin no-padding">
<a class="navigation-menu-item navigation-menu-item-selected link-no-decoration" href="index.php">
<li class="navigation-menu-item single-line">L'at (...)
Element a not allowed as child of element ul in this context.
We need to tweak the styling of the dropdown that shows the autocomplete place suggestions when using the Google Places/Maps Autocomplete API.
Does anyone know if this is even possible? If so, I guess we just need to know the CSS classnames/IDs.
There's a screen grab of the bit I am referring to here:
This is now documented by google: https://developers.google.com/maps/documentation/javascript/places-autocomplete#style_autocomplete
If you use firebug (as mentioned in a comment to your question...) you see that the container with the autocomplete results is a DIV with the class "pac-container" and the suggestions are inside it as a DIV with the class "pac-item". so just style with CSS.
This CSS will allow the drop-down to resize to fit the width of the results:
.pac-container, .pac-item {
width: inherit !important;
}
It is pretty difficult to inspect the elements since it closes as soon as it loses focus.
Though we know that the container has the .pac-container class and items have .pac-item, upon further investigating the API I found that it embeds the CSS styles in the document.
Here's what initially there, so use it to change the pre-defined styles to fit your needs.
.pac-container {
background-color: #fff;
position: absolute!important;
z-index: 1000;
border-radius: 2px;
border-top: 1px solid #d9d9d9;
font-family: Arial, sans-serif;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden
}
.pac-logo:after {
content: "";
padding: 1px 1px 1px 0;
height: 16px;
text-align: right;
display: block;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3.png);
background-position: right;
background-repeat: no-repeat;
background-size: 120px 14px
}
.hdpi.pac-logo:after {
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png)
}
.pac-item {
cursor: default;
padding: 0 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 30px;
text-align: left;
border-top: 1px solid #e6e6e6;
font-size: 11px;
color: #999
}
.pac-item:hover {
background-color: #fafafa
}
.pac-item-selected,
.pac-item-selected:hover {
background-color: #ebf2fe
}
.pac-matched {
font-weight: 700
}
.pac-item-query {
font-size: 13px;
padding-right: 3px;
color: #000
}
.pac-icon {
width: 15px;
height: 20px;
margin-right: 7px;
margin-top: 6px;
display: inline-block;
vertical-align: top;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
background-size: 34px
}
.hdpi .pac-icon {
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons_hdpi.png)
}
.pac-icon-search {
background-position: -1px -1px
}
.pac-item-selected .pac-icon-search {
background-position: -18px -1px
}
.pac-icon-marker {
background-position: -1px -161px
}
.pac-item-selected .pac-icon-marker {
background-position: -18px -161px
}
.pac-placeholder {
color: gray
}
I case anyone is interested in the hierarchy I was able to scrape the following using Firebug:
<div class="pac-container pac-logo" style="width: 557px; position: absolute; left: 66px; top: 106px; display: none;">
<div class="pac-item">
<span class="pac-icon pac-icon-marker"></span>
<span class="pac-item-query">
<span>France</span>
</span>
</div>
<div>
This worked for me, and now I can run this on mobile!
.pac-container {
z-index: 10000 !important;
width: auto !important;
position: initial !important;
left: 0 !important;
right: 0 !important;
display: block !important;
}
.pac-container:empty{
display: none !important;
}
And this somewhere!
$('selector').append('.pac-container');
Now the results will show in the selected div as a normal block element :)
To force the box to stay open for much easier styling and inspection from dev tools you can set the input value from the JS console and the container will stay open when inspecting from the dev tools.
Simply run document.querySelector('.pac-target-input').value = 'CB' in the console on your page with the input, then go back to the Elements tab and you can now individually inspect each element.
This gets around the issue where it always closes when focus is lost.
if you want to create your custom html & css then AutocompleteService class is also available which will provide all data in json.
const service = new google.maps.places.AutocompleteService();
service.getQueryPredictions(
{ input: "provide location string here for search" },
(suggestions) => console.log(suggestions)
);
For easier debugging and styling. to keep the dropdown open.
use the following code in chrome console.
document.querySelector('.pac-container').style.display = 'block'
Also used following classes to style the suggested dropdown in google places auto complete
Update icons
.pac-icon {
background-image: url('./assets/locationMark.svg') !important;
background-repeat: no-repeat;
background-position: 0 0;
background-size: 14px 18px;
}
Update text
.pac-item-query {
font-size: 16px
}
Hide google logo
.pac-logo {
padding: 10px 0;
&::after {
display: none;
}
}