I'm using foundation and I've not seen anything in the documentation regarding the file input, only general input elements. But styling the file input is not so easy. And more if you want to keep it coherent with the design of the whole form in all the browsers.
I've seen some solutions like Styling an input type="file" button or https://github.com/filamentgroup/jQuery-Custom-File-Input, but I wanted to know if there's something specific in foundation, as the usual wrapping div styles don't work at all (div.large-3.columns etc.).
How do you do it?
Do you need only button? Or field with file's address too? If only button the simpliest solution is demo
<a class="wrapper">
button name
<input type="file"/>
</a>
.wrapper {
width: 100px;
height: 30px;
overflow: hidden;
position: relative;
}
input {
position: absolute;
right: 0;
top: 0;
bottom: 0;
font-size: 50px; /* some huge for cursor pointer hack */
}
also you can use pseudo-classes for some browsers see article
I just applied the .button class to the input tag.
It looks good enough for me.
For any styling more sophisticated than Foundation's default (e.g. changing the look of the browse button) you will need to edit their implementation of the label element technique.
It's fully semantic, accessible and requires no JavaScipt. Basically, you hide the input, ensure the id is set on both the label and file field, then style the label accordingly. Here's a great article that explains the technique along with a CodePen (https://codepen.io/bmarshall511/pen/bjyEgq) that shows how it's done: https://benmarshall.me/styling-file-inputs/
[type="file"] + label {
background: #f15d22;
border-radius: 5px;
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
Related
I want to implement a functionality in my React app where you hover over a <span> element and then an InfoBox appears over the <span> element.
It should look like in Visual Studio code when you hover your cursor over a variable for example.
The box should behave as in the following sketch I drew (basically it's the same behavior as in VSCode): The InfoBox is the box that contains This text. The <span> contains the hello
Unfortunately I'm not an expert in CSS and I don't even know if this is possible with CSS only or if you have to use javascript as well.
I was looking into similar things so figured I might share what I ended up with.
If you go to Help > Toggle Developer Tools it opens up the Dev Tools just like in Chrome on the side. Seems like most Electron based apps have this (although Ctrl+Shift+I—I'm on Windows—didn't work for me on VS Code somehow. Needed to open it via mouse through the aforementioned method).
With the Dev Tools you can then view what HTML, JavaScript, and CSS is used to make the displayed UI possible. I opened up the console tab at the bottom so that I can type on it while I use my mouse to hover on things, then I entered debugger command in the console to pause the JS execution or something (don't quote me on this). Point is it pauses the state of everything so you can then keep the tooltip that is created with JavaScript in display.
Seems like it's just standard Tooltip positioning with display: block and position: fixed, as well as max-width, top and left set by calculated JavaScript. There's also a z-index rule set by a class selector but that's on the stylesheet.
element.style {
position: fixed;
display: block;
visibility: inherit;
max-width: 1152px;
top: 85px;
left: 147px;
}
Personally I would use position: absolute instead of fixed. I would guess they used fixed in Visual Studio Code instead because of the way they calculated the position inside each "split view" (the windows), because the overridden CSS stylesheet did use position: absolute as seen here.
.monaco-hover {
cursor: default;
position: absolute;
overflow: hidden;
z-index: 50;
user-select: text;
-webkit-user-select: text;
-ms-user-select: text;
box-sizing: initial;
animation: fadein .1s linear;
line-height: 1.5em;
}
I recognize this doesn't fully answer the question (nothing on how to get or set the dimensions) but I know where I need to go myself from here on, and for those answers I think you can go looking for answers elsewhere depending on if you're writing vanilla JS, or using some framework (in which case there might be an easier way to get, calculate, and set those things).
Is this what you are looking for?
Where you hover over some text and text below it appears?
.thisText > .hello {
display: none;
}
.thisText:hover > .hello {
display: block;
}
<span class="thisText">
This Text
<span class="hello">
Hello
</span>
</span>
This might help:
.thisText{
position:relative;
top: 20px;
}
.thisText > .hello{
display: none;
}
.thisText:hover> .hello {
display: block;
position:absolute;
top:-20px;
}
<span class="thisText">
This Text
<span class="hello">
Hello
</span>
</span>
I have a webpage that I am trying to optimize for desktop and mobile but have little experience in how to place divs in separate places on the screen that reference the same id. Any suggestions about best practices would be extremely helpful.
<input id='feature-filter' type='text' placeholder='Filter by name' />
For example, above I have an input named feature-filter that on desktop should be positioned in the menu bar called header on desktop. Note that there is no accompanying CSS to feature-filter.
#header {
display: flex;
position: absolute;
align-items: center;
top: 0px;
width: 100%;
line-height: 50px;
height: 50px;
background: rgba(12, 12, 12, 0.8);
color: #eee;
font: 16px/20px 'Open Sans', sans-serif;
font-weight: 500;
text-align: center;
vertical-align: middle;
}
<div id='header'>
<button title = "ButtonA" id = "A"></button>
<button title = "ButtonB" id = "B"></button>
<button title = "ButtonC" id = "C"></button>
<input id='feature-filter' type='text' placeholder='Filter by name' />
</div>
In the mobile version, however, I would like to place this input in a legend that is at the bottom of the page. In my javascript, there is an event listener that pulls data from feature-filter.
#legend { z-index: 101010; padding: 5px; position: fixed; text-align: center;
color: #fff; bottom: 0px; width: 300px; background: #181818; opacity: 0.92;
font-family: 'Open Sans', sans-serif; left: 0; right: 0; font-weight: 300}
<div id='legend'>
<input id='feature-filter' type='text' placeholder='Filter by name' />
</div>
Is it possible to reference the same DOM id in javascript AND place feature-filter in two separate places in the html - one for the mobile and one for the desktop version ?
What is the best approach to this problem? Using CSS classes would still require having two separate inputs with the same id in the html
Any basic explanation or suggestions would be appreciated.
It would be best to use the same HTML regardless of screen type. I would use a div tag, and not misuse the legend tag. This simplifies the JavaScript and improves accessibility. However, you may style it differently depending on screen size. You may even disable / enable certain elements to adapt to mobile.
I would not try to use two different HTML elements with the same ID. Duplicated elements should use a class name not an ID (which is intended to be unique). Either use the same HTML and style differently, or use two entirely different HTML elements (with different IDs) and use the CSS to disable one and test in JavaScript which one should be used.
To approach styling differently for different devices, the recommended practice is to use a style sheet that applies different rules based on screen size. See this StackOverflow question for how to target different sized screens with your CSS style sheet.
You may also reference existing styling frameworks such as Bootstrap's responsive grid as an example or a solution to see how to style differently for different sized screens.
I'd recommend using CSS to properly position each element depending on the amount of pixels available. If mobile than do this, if desktop than do this. Its a matter of visuals right? Why not use CSS and tell it how you want your page to look. CSS Info
Or download Bootstrap and customize it to your CSS liking.
I've been looking into this for a couple of hours now and I simply can't understand what is the problem. I've been able to isolate what's wrong into this fiddle: http://jsfiddle.net/6r781vz3/. Click on the Tab 2! then click to add a new tab three times. You'll notice the spacing is different, also the raw tabs seem to move when selected.
I've built a pure CSS tabbed pane with the famous radio button hack. It works great. I've noticed, though, that it needed a strange padding to make it work (see code below). They are simply a <input> followed by a <label> and then a <div>, as it can be seem in the example.
When I tried to add a dynamic new tab to it I noticed this padding wasn't necessary, but what I found strange is that the HTML structure is the same, but it's behaving differently.
/* I only need this for raw html, and I have no idea why!
Not even idea why I would need this for anything!
I don't need them for dynamic tabs... */
.tabs .tab [type="radio"]:checked + .tab-label {
margin-right: -6px;
}
.tabs .tab [type="radio"]:not(:checked) + .tab-label {
margin-right: -10px;
}
I'm probably overseeing something really simple. I don't think this is a bug, since it works this way on Chrome and on Firefox here.
Can anyone see the problem? :(
Because when using display: inline-block space between elements become visual space on the browser. You can handle this with some solutions. One is to use font-size: 0 to parent element and specific one on child like:
.tabs .tab {
display: inline;
font-size: 0;/*set font size to 0*/
}
.tabs .tab-label {
background-color: rgba(255, 0, 0, 0.3);
font-size: 16px;/*set desire font size*/
display: inline-block;
padding: 7px;
margin: 1px;
position: relative;
vertical-align: bottom;
border-right: 1px solid #ddd;
}
Also a fiddle
look this:
When the pointer is on the image I want a small dark rect at the bottom of this image with some text. How can I do this? Maybe with jquery?
Thanks guys.
You can achieve this many ways. Depending on the structure of your page, you could accomplish this with a couple of CSS classes.
HTML:
<div class="image_hover"><span>Text</span></div>
CSS:
.image_hover { background-image: url("path/to/image"); height: 95px; width: 270px; }
.image_hover span { display: none; }
.image_hover:hover span { display: block; position: relative; top: 80px; width: 270px; text-align: center; background-color: white; border: 1px solid black; height: 15px; line-height: 15px; }
You would need to make some updates based on your particular situation. Here is a working example on jsbin. This solution hides the text by default, and when the user hovers over the div, the :hover class will cause the text to be displayed.
You could also use jQuery to either add or show the div onmouseover.
Yeah, you can easily use jquery to achieve that.
If you want to learn the whole process and do it yourself, take a look at this - Sliding Boxes and Captions with jQuery
Or take a look at a few plugins for achieving the same effect - 10 Stylish jQuery caption plugins
A good example of implementing 'fashionable' large input text boxes like those found on google and tumblr?
On tumblr how do they use manage to get the input to flow backwards from where the cursor is in the box - on the final input box for URL.
You can use CSS:
input.FancyText {
background: url(something) no-repeat;
border: none;
text-align: right;
}
You can see Tumblr's CSS using Firebug.
Yes, just do like this:
input { padding: 10px; font-size: 26px; }
and it will make the input elements "fatter".
input.fat
{
text-align: right;
font-size: 28px;
}
As SLaks suggested, you can use CSS to control the appearance of the input text boxes. For example, you could use firebug to discover that the CSS tumblr uses looks like this:
background-color:#F9F8E4; /* when in focus */
background:url("/images/input_bg.png") repeat-x scroll left top #F7FCFF;
border:1px solid #97B5D2;
color:#25313C;
font-family:Georgia,Times,"Times New Roman",serif;
font-size:28px; /* This probably makes it "fat" as you want */
width:480px;
font:13px 'Lucida Grande',Helvetica,Arial,sans-serif;
margin:0;
outline:0 none;
padding:7px;
These are the active styles (which are spread across several different rules). Additionally, the comments are mine.
Try setting the font-size property to make the input area "fat"
Try setting the text-align:right property to make the input "flow to the right" as in the URL field.