Given we have a slider and the site is Right-to-left.
The slider's arrows work the other way around (Left points right and vice versa).
What are the plausible places to look for the problem in the devtool?
The following solution is a pure-css one and deals particularly with the Flexslider library. It's an RTLization of a particular code-piece of the main Flexslider's CSS file. The site itself is Drupal-based so the path is: /public_html/yoursitesname/sites/all/libraries/flexslider. If your site is not Drupal-based just track the path of the flexslider library and apply the solution there. Here are the stages:
copied this piece (which I'll present in a sec), in a note: /*Syntax*/ for backup for future times.
RTLizied the original piece.
It should be noted that the last part of the RTLization process was to replace between content:'\f001'; and content:'\f002'. I note this because it's less intuitive than changes like flipping a "left:#px" to a "right:#px" one...
Gave to the existing query (see end of flexslider.css):
#media screen and (max-width: 860px)
{
.flex-direction-nav .flex-prev { opacity: 1; left: auto;}
.flex-direction-nav .flex-next { opacity: 1; right: auto;}
}
Instead of:
#media screen and (max-width: 860px) { .flex-direction-nav .flex-prev
{ opacity: 1; left: 10px;} .flex-direction-nav .flex-next { opacity:
1; right: 10px;} }
Enjoy, Ben.
I've got an inline-block element that contains a very long word. When I resize the viewport until I reach the breakpoint of the text wrapping to the next line, I get a substantial amount of space. However, I would like the inline-block element to wrap immediately to the width of its contents.
I found it hard to explain exactly what's going on, so below an animated gif to illustrate my issue:
Upon resizing the viewport:
To be clear, the image above is me continuously resizing the viewport.
Does anybody know a way to achieve what I'd like? Even with CSS hyphenation the white-space still remains (which I don't want).
JSFiddle. Resize the frames to see what I mean.
div {
display: inline-block;
background-color: black;
color: white;
padding: 5px;
}
The inline-block indeed extends on resizing as your animation shows, so that it keeps place for the long word to go into that space again.
One simple solution would be to add text-align: justify, but I'm afraid it may not exactly be what you want (see demo).
Another one would be the use of media queries, as #Parody suggested, but you would have to know the dimentions of the containing div, and that would not be very scalable as you mentionned.
The word-break: break-all suggested by #yugi also works but causes the words to to collapse letter by letter, regardless of their length.
The only way to achieve the exact behavior is (as far as I know) to use javascript. For example, you would have to wrap your text into a span element inside the div, and then add something like this :
var paddingLeft = parseInt($('#foo').css('padding-left')),
paddingRight = parseInt($('#foo').css('padding-left')),
paddingTop = parseInt($('#foo').css('padding-top')),
paddingBottom = parseInt($('#foo').css('padding-Bottom')),
cloned = $('#foo span').clone(),
cloned_wrap = document.createElement('div');
$(cloned_wrap).css({
paddingLeft : paddingLeft,
paddingRight : paddingRight,
display : 'inline-block',
visibility: 'hidden',
float: 'left',
});
$(cloned_wrap).insertAfter('#foo');
cloned.appendTo(cloned_wrap);
$(window).on('resize', function(){
$('#foo').css('width', cloned.width() + 1);
$(cloned_wrap).css('margin-top',- $('#foo').height() - paddingTop - paddingBottom);
}).resize();
Please see the jsfiddle working demo. (← edited many times)
That's quite a lot of code, but it works ; )
(PS : I assumed jquery was available, if not, quite the same is achievable in pure JS)
I don't think this is possible only with CSS for the one element. The reason for your behavior is that the width of the element is still 100% of its container. The only way I could think to accomplish this is by doing something a little bit "creative"...try setting the style to inline so you get the shrink-wrap behavior, but to get around the background color issue, also put it in a container that shares the same background. That should work.
If im understanding you correctly you could use the #media type to decide what css to use depending on the width of the screen
here is an example of what i mean
#media(min-width:0px) and (max-width:200px){
div {
display: block;
background-color: black;
color: white;
padding: 5px;
}
}
#media (min-width:200px){
div {
display: inline-block;
background-color: black;
color: white;
padding: 5px;
}
}
I am still very appreciative of #lapin's answer (which I accepted and awarded bounty to), I found out after the fact that it didn't quite work on multiple elements next to each other (that has nothing to do with #lapin, I just didn't mention it in my original question as I thought it would be irrelevant information).
Anyway, I've come up with the following that works for me (assuming the elements it should be applied to are .title and .subtitle):
$('.title, .subtitle').each(function(i, el) {
var el = $(el),
inner = $(document.createElement('span')),
bar = $(document.createElement('span'));
inner.addClass('inner');
bar.addClass('bar');
el.wrapInner(inner)
.append(bar)
.css({
backgroundColor: 'transparent'
});
});
function shrinkWrap() {
$('.title, .subtitle').each(function(i, el) {
var el = $(el),
inner = $('.inner', el),
bar = $('.bar', el),
innerWidth = inner.width();
bar.css({
bottom: 0,
width: innerWidth + parseFloat(el.css('paddingLeft')) + parseFloat(el.css('paddingRight'))
});
});
}
shrinkWrap();
$(window).on('resize', function() {
shrinkWrap();
});
Basically what I do is:
put the text in an inner wrap element
create an additional absolutely-positioned background element
get the width of the inline inner wrap element
apply said width to the background element (plus padding and whatnot)
The CSS:
.title, .subtitle {
position: relative;
z-index: 500;
display: table;
padding-left: 10px;
margin-right: 10px;
background-color: red;
}
.title .bar, .subtitle .bar {
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: -10;
background-color: red;
}
I need to make my Previous and Next buttons smaller.
Im using the dataTables plugin alongside bootstrap so the tables are already styled.
Here you can see the involved files .css and .js
I've tried twicking them a bit but I can't make it work for me, I can't fing the buttons-related data.
Thanks in advance, any direction you may point would be helpful.
You can select those two links by class
.previous, .next {
// CSS here
}
Here's a live version to play with.
Answering to an old question.
You are probably looking for this. I found it somewhere on Datatable's official site not sure where. But for me the below solution worked:
.dataTables_paginate>span>a {
margin-bottom: 0px !important;
padding: 1px 5px !important;
}
.dataTables_paginate>a {
margin-bottom: 0px !important;
padding: 1px 5px !important;
}
Hope it helps someone like me.
I'm using Prestashop for a a project but it doesn't display correctly in the mobile version. I managed to find out that it's to do wth the grid system and I think I can amend the global CSS file to include the stack overflow?
As far as I can tell it's a set size.
I don't know any coding so if you could help me that would be much appreciated.
/* columns */
#columns {
overflow: hidden;
background: url(../img/black/columnsBg.jpg) repeat-x;
padding: 0 0 10px 0;
text-align:center;
}
.columnsInner {
width: 980px;
margin: 0 auto;
text-align:left;
}
if you use the prestashop default theme means its not responsive. so you can try prestashop mobile theme.
go to "Preferences > Themes"
under this you will have a option called "Enable the mobile theme."
you can enable your options there.
try this and let me know.
The nav starts out great once you lower the bowser width the nav becomes stacked, this is great. Once you open the window back up the nav items are in two rows. Here's a pic.
This is how it starts out:
http://reggi.myshopify.com/pages/about#
FWIW, I found that forcing a redraw of the .nav-justified element in question helps WebKit understand. Obviously, how you chose to do this is up to you—I opted for the fadeIn(), 'cause when life hands you lemons...
$(window).bind('resize', function(){
var w = $(this).width(),
threshold = 768;
if(w < threshold){
$('.nav-justified').hide().fadeIn();
}
});
Both answers seem to be lacking. The JS solution causes a lot of flicker, and the CSS solution doesn't seem to keep the integrity of the designed tabs. Here's what I came up with.
If you're not using less with your bootstrap styles just replace #screen-sm with 768px
#media (min-width: #screen-sm) {
.nav-tabs.nav-justified > li {
display: block;
float: left;
width: 32.9999%
}
}
The problem is display: table-cell; instruction in the .nav-justified class.
Let's take a look at the bootstrap.css file, I believed that you are using Bootstrap version 3.0, at line 4109.
#media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
You must change it to :
#media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: inline-block;
float: left;
margin-left: 100px;
}
}
This will solve your problem.
This is a known bug with Bootstrap.
This has been fixed in Chrome Since 2013, but is still an open bug in WebKit and occurs in Safari.
Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the justified nav example.
— cvrebert
I recommend to not use .nav-justified or be ok with it not working properly in Safari.