I would like to do a responsive menu using CSS only.
I'm trying to do something like that :
- Display a pictogram when width for that div is really small.
- Display a small text like 'Search' (without the pictogram) when there is a little bit more width available.
- Display a long text like 'Search whatever you want' when there is a little bit more width.
Thanks in advance,
The short answer is: it's complicated. A CSS only solution would consist of adding a class like so:
.hidden {
visibility: hidden;
}
to elements in your DOM that should be hidden given a specific viewport size. Now that you have a little utility class, you can start adding media queries that affect your various classes and ids in your menu. Here's a bit of a snag, your .hidden class needs to be changed dynamically. Really, you'll end up having more classes like this:
.hidden-search-bar {
visibility: hidden;
}
all over your CSS file, each only applying in a certain media query. Another approach is to construct an entire grid system that uses utility classes like:
.col-large-display-hidden {
visibility: hidden;
}
so you can tell the browser that when it is in the large-display viewport size range it knows to hide anything with that class.
I'm sure there are more interesting ways to go about it but if you want to be able to have these classes carry over to other pages then you would need to be a bit more systematic. I would recommend looking at Twitter Bootstrap to see how they handle that problem but they do use JavaScript (specifically jQuery) throughout the framework.
Related
I want to resize input date boxes of TelerikDateRangePicker component in Blazor in order to fit it better in my page. It looks to be a bit long and I want to resize it. This is the original size:
I tried adding
<style>
.k-floating-label-container {
width: 140px !important;
}
</style>
to the header of the page when running which made it as follows:
However, when I do the same in my CSS file and then run the application it goes back to the default. Any idea on this?
I have contacted them and they said: "To resize the inner inputs for the DateRangePicker you can use some custom CSS styles. To make cascading easier you can use the Class parameter that is available for the TelerikDateRangePicker. To better illustrate the concept, I have created a small sample that you can see from this REPL link, as well as quickly run it to see the rendered result."
Today I was trying to create a dummy css rule for testing and investigation.
.dummy {
some-style : somevalue;
}
Ideally the class should have no visible effect. I want to be able to apply the class to elements but cause the least visible effect possible on any elements it is applied to. For example
<div class="dummy"> should look and behaves as much as possible like <div>
I did not want the class to be empty. Can anyone suggest a style that I could add to the class that would have the least visible impact when applied to a general html element? I can't think of anything completely harmless.
UPDATE: I wanted to add the style to some existing html. The reason was to use the style as a marker for diagnostic purposes. It would help me see when and where styles and stylesheets were getting loaded/cached and where and why some styles were getting overridden, sometimes by the browser defaults which seemed odd. At the time I didn't have exclusive use of the system I was working on so I wanted something that was going to be invisible to other users but I could see in Developer Tools.
UPDATE 2 : the html/css wasn't written by me and I didn't have my own environment in which to work. I was trying to investigate some problems in-situ in someone else's system. I had tried using DevTools in the browser but wasn't getting anywhere with that. I wanted to be able to make some small changes to their html/css to aid my diagnostics. I didn't want them to have any obvious effect on the system for other people (except in DevTools, viewed by me).
It was a Wordpress site and they only had two environments, one for live and one for testing. I was working with the test system. There were other people testing at the time, though mainly checking content.
The real thorny problem was why was the font-size in the calendar widget much larger than everything else on the site? Inspecting using DevTools I could see the font-size style was getting overridden by the browser default style when it seemed to me there were other css selectors that should have taken precedence. It looked bizarre. In the end it turned out to be a missing !DOCTYPE tag in the html. So nothing to do with the css itself.
I didn't like this way of working, fiddling in someone's system, but there wasn't much else to do and it did help to resolve the problem for them.
Hopefully I don't have to do this again, but ever since I have been wondering what was the most harmless style that I could have used?
I thought I would ask here as there must be people who know CSS better than me.
You can use this:
.dummy{
min-width: 0;
min-height: 0;
}
If you just need anything beeing set you could assign rules that are default anyway. For block elements like div set
.block-class { display: block; }
And for inline elements like span
.inline-class { display: inline; }
Of course it could be an issue doing so in some rare cases but in general it's quite harmless I guess.
In principle, for any property you can have an arrangement like this:
div {
some-style : a-valid-value-for-some-style;
}
.dummy {
some-style : a-different-valid-value-for-some-style;
}
And .dummy's style will have an effect, no matter what some-style is.
Your best bet is to make use of CSS variables. These are custom properties and start with a double hyphen. so
.dummy {
--dummy-style: foo;
}
will make --dummy-style a property with value "foo". So long as you don't employ the variable as the value in another property, it will have no visible effect.
I'm working on a site which has to be compatible with many kind of devices, so I've chosen to use Bootstrap. My problem is that while I have a nice responsive grid layout, I don't see an out-of-the-box solution for making other visual parts of my site responsive. I mean for example font sizes, form field sizes, button sizes, etc.
What I want for example is to have normal button sizes for desktop, and large button sizes (.btn-lg class) for mobile. Similarly with form inputs. Is there a nice, global level solution for this way of responsiveness?
Thank for the answers.
EDIT: I would like to reuse the existing bootstrap classes as much as possible, with minimal added media-query or other code. I'm looking for something like "conditional classes" on elements based on resolution, like the following: if there is "sm" or smaller screen, add "btn-lg" to "btn"-s. If there is "md" or bigger, don't add anything, just use pure "btn". And something similar with form inputs.
Font-sizes and paddings are more simple with simple media-queries of course. My problems are mostly with form fields and buttons, just as I note in the corrected title.
I would like to avoid copying and duplicating more complex (like buttons and form fields) Bootstrap CSS code into my css
They are responsive to some extent. To add this level of responsiveness you must write your own media queries.
It's very easy. It's even easier if you are using SASS or Less.
See starting at line 260 in the variables file. Here's an excerpt.
#screen-xs: 480px;
#screen-xs-min: #screen-xs;
#screen-phone: #screen-xs-min;
A phone example:
#media (max-width: $screen-xs) {
// Change h1 size
h1 {
font-size: 20px;
}
// Change .btn font size.
.btn {
font-size: 10px;
}
}
If you are not using Sass or Less, just swap the variable $screen-xs with the value that you want--480px, for example.
use % rather than px.
Or use media queries within your css
I have a small image that i need to repeat along the x direction, a specific number of times.
The 'row' of images should be scrollable, and i want to avoid tables if possible.
Is this possible to do with Html + Css? The html code will be dynamic generated using PHP.
Any extra-ideas?
Thanks!
I wonder if ajax has the best looking solutions for you, but you haven't really explained your scenario too well, why are you repeating the same image and making it scrollable? That doesn't sound like valid functionality for anything. Are you trying to scale a background image or something? IF so, what's with the scroll bar???
Anyways here you go:
http://wowslider.com/rq/ajax-image-scroller/
Garry's answer is good. If you just want regular scrollbars, however, wrap the dynamic area (into which you will be loading your images) with a div (or canvas, probably works the same way), and add a class to it. Then you can target all of the images with CSS and have them float, which will line them up, regardless of how many you load dynamically. (Just don't forget to put a width on the container.)
It would look something like this (short-hand, but you get the idea):
div.image-container {
width: 400px;
overflow: scroll;
}
div.image-loader img {
float: left;
}
<div class="image-loader">
<img/>
<img/>
</div>
I recently had an idea for using the CSS pseudo-class :hover to display a styled tooltip when the mouse is hovered over a link.
The basic code for the link looks like this:
.hasTooltip {
position:relative;
}
.hasTooltip span {
display:none;
}
.hasTooltip:hover span {
display:block;
background-color:black;
border-radius:5px;
color:white;
box-shadow:1px 1px 3px gray;
position:absolute;
padding:5px;
top:1.3em;
left:0px;
max-width:200px; /* I don't want the width to be too large... */
}
This link has a tooltip!<span>This is the tooltip text!</span>
The result is exactly what I want, but with one annoying problem: the span does not expand to accommodate text, and if I don't specify a width, the text is squashed.
I did some searching on Google, found a couple examples of work people had done (this example is creepily similar to what I've gotten), but no one seems to have addressed the span width problem I'm having.
I know this answer is extremely late, but it appears the key to your issue would be to use:
white-space: nowrap;
inside of your span, and get rid of any sort of width definition. Of course the drawback to this will be that the tooltip will only be able to support a single line. If you want a multiline solution you will most likely have to use javascript.
Here is an example of of this method:
http://jsbin.com/oxamez/1/edit
An added bonus is that this works all the way down to IE7. If you do not need to support IE7, I would suggest folding the span, and img styles into a :before, and :after for the .tooltip. Then you can populate the text using the data-* attribute.
I don't think there's a perfect solution to this problem with pure CSS. The first problem is that when you place the span inside the a tag the span only wants to expand as far as the width of the link. If you place the span after the the a it's possible to get close to what you're trying to do but you'll have to set the margin-top: 1.3em and then have to set a negative margin to slide the tooltip left. However, it's going to be a fixed setting so it won't sit exactly at the start of each link.
I whipped up a jQuery solution that sets left dynamically (and a nice little fade effect for good measure).
Demo: http://jsfiddle.net/wdm954/9jaZL/7/
$('.hasTooltip').hover(function() {
var offset = $(this).offset();
$(this).next('span').fadeIn(200).addClass('showTooltip');
$(this).next('span').css('left', offset.left + 'px');
}, function() {
$(this).next('span').fadeOut(200);
});
These tool tips can also be integrated into a word press theme easily. Just copy the CSS into your style. Css file and when creating your posts, just take help of the HTML code and create your own tool tips. Rest is all styling, which can be altered according to your own choice. You may also use images inside the tool tip boxes.
http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/
Even though this question is a bit older already, I would suggest the following compromise:
Just use max-width: 200px; and min-width: 300%; or so,
whereas the min-width could result higher than the max-width.
Just figure it out.
This way you could not have entirely liquid tooltips but the width would stand in kind of a correlation with the width of the containing link element.
In terms of optical pleasantness this approach could be of value.
edit:
Well I must admit it is nonsense what I wrote. When the min-width can be higher than the max-width, there is no sense to it.
So just putting the min-width in percent would achieve what I tried to suggest.
Sorry for that.
I found this and it was working for me. It's a good solution when you have a lot of elements and jquery plugins on the same page and you can't work with
Text <span>Tooltip</span>
View pure CSS solution: JS BIN
Credit to trezy.com