In my example i have a fixed input data-spy="affix" that is shifted downwards by 90px because of the parent <div class="container" style="margin-top:80px">.
So the only thing that should scroll is the text. This actually works!
My problem is that the text that is scrolled behind the input is visible and i would like to hide it!
I tried to add a white box before the input but all my tries where not really successful!
So i hope you can help me! Thanks
http://bootply.com/113734
in fact #nico-o already gives the answer here. Wrap your input inside a div and apply the affix on this:
<div style="background-color:white;padding-top:80px;" data-spy="affix" data-offset-top="1">
<input class="form-control" id="searchterm" name="tags" placeholder="Input" type="text">
</div>
Doing this you will have the same kind of problem as described here: Bootstrap 3RC1 + Side Panel + Affix.
To solve this add:
$(document).scroll(function(){
$('.affix').width($('.container').width());
});
See: http://bootply.com/113811
#nico-o also suggest a scrollable Text-container, see http://getbootstrap.com/javascript/#scrollspy-examples for an example
Related
I'm trying to educate myself about Flickity. The carousel auto plays and the selected cell (denoted by the grey background) is automatically in the middle. I would like the selected cell not to be in the middle. I'm looking for a way to may it be the cell to the left, so it is above the dots (desktop view).
Hope that makes sense. Here is the jsfiddle for it.
The only method that I can think of is using jQuery to find the prev sibling for the "is-selected" class and adding a class to it, but I was hoping there may be a simpler method
Thanks in advance for your feedback!
<div class="carousel-outer-flick">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell is-initial-select"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
add this
<Slider
options {{
cellAlign: 'left' //this part will shift your entire slide to left
}}>
...
I am working on a project: web terminal.
In it, the format is something this
<div class="prompt">C:/users/somebody/ </div> <input type="text" class="usrcommand">
Here, the width of .prompt is not definite(changes according to user) and the input tag should cover the remaining portion that is left after .prompt.
Note that: .prompt has been styled: display: inline
So, how to do that?
Try display:inline-block rule on both the classes (.prompt and usrcommand)
I have a front end posting with modal box and has a problem. I don't know how to explain this problem because I still learn english and it's hard for my but I will try, also i make screenshot maybe you will understand better from that
In my modal box i have a textarea for title post and has class="form-controll" when you drag of textarea You can not see well meaning override modal box.
I make screenshots.
I want to know what I need to modifiy in css for this.
Thanks and again sorry for my english.
I fix it with this:
<div class="modal-body">
<textarea class="form-control col-xs-12" rows="3"></textarea>
</div>
and this:
.modal-content textarea.form-control {
max-width: 100%;
}
I am trying to make an input file with an image. I've got a working solution with div inside the blocked label. File uploads and a rounded preview comes. But this is solved via background. Looks like responsive and I am happy.
But validator told me that it's not proper to put div inside a label tag.
So i tried to put an image tag instead of div..
and it doesn't work properly.
http://jsfiddle.net/dkweb/mtsy33k1/9/
<div class="photo_container">
<label for="file_photo_id">
<img class="preview" src="http://javascript.ru/img/ws_2.png">
<!-- <img class="preview" src="https://im0-tub-ru.yandex.net/i?id=3b1992e3e1e8d68d24c678ffc749d2f5&n=33&h=170">
and this doesnt work -->
</label>
<input type="file" name="file_photo" id="file_photo_id" />
</div>
- uncomment the sec img and you'll see.
It depends on resolution of the image. I can't hold it a circled always.
Will you advise on this issue?
They grey area must stay not available for clicking - just a circle with an image inside.
Thanks in advance.
I asked a similar question already, but I'm still having this problem.
The website I made has a bug on tablets. The different content sections don't display properly on tablets - things overlap. The Google Maps iframe, for instance, shows upon page load, not upon clicking on the corresponding radio button (label!). This only happens on tablets.
After some deep thinking, I found that the radio buttons are probably the culprit. On desktops everything looks A-OK.
Sorry, I can't make a JSfiddle to reproduce the tablet issue (help is explicitly sought only from those who can use dev tools, take a quick look and maybe point me to what needs to be done in order to make it work on tablets, in short only from real badass cross-browser Chucknorisses).
Help would be much, much appreciated!
UPDATE:
The radio-buttons I'm talking about are 'design-hidden' to only keep labels as visible / clickable elements.
The code looks like this (this would be the yellow 'home' button):
<div class="mx-button" id="real_button5">
<input type="radio" name="mx" id="button5" checked>
<label for="button5" onclick="" style="background-color: rgba(255,216,0,1);">HOME</label>
</div>
It seems that on tablets, these buttons are clickable (something happens), but they don't unhide the correct content. Things overlap.
As you are already using jQuery within your project I built a small example fiddle for you. Th concept behind it is the following:
All menu buttons have the class menubutton. This gives you the possibility to style the buttons but allows you additionally to use a jQuery selector on them. Further I gave each button a value attribute. This attribute represents the id of the content div which should be shown.
The content divs also have a common class content and an id correspondig to the vlaue attributes above.
<button class="menubutton" value="content1">item1</button>
<button class="menubutton" value="content2">item2</button>
<button class="menubutton" value="content3">item2</button>
<div class="content" id="content1">Content 1</div>
<div class="content" id="content2">Content 2</div>
<div class="content" id="content3">Content 3</div>
Now I use CSS to hide all content divs by default:
.content {
display:none;
}
The JavaScript part is also not that complicated. I add a click-function to each element with the class menubutton. This is done with a jQuery selector. Now all content divs are selected by $(".content") and I hide them with hide().
this.value is the value attribute of the button you clicked on and is used to show this specific content div.
$('.menubutton').click( function() {
$(".content").hide();
$("#" + this.value).show();
});
I hope this shows you some of the jQuery possibilities.
UPDATE
As you want to use divs instead of buttons I made some changes on the example you can see them in this fiddle.
I changed from buttons to divs and added an id to each content div like the following:
<div class="menubutton" id="content1">item1</div>
<div class="menubutton" id="content2">item2</div>
<div class="menubutton" id="content3">item2</div>
<div class="content" id="show_content1">Content 1</div>
<div class="content" id="show_content2">Content 2</div>
<div class="content" id="show_content3">Content 3</div>
the id of content div matches the id of its navigation div plus a standard prefix. show_ in my example. The JS Code was updated to use the id, instead of the value property to find the desired content div:
$('.menubutton').click( function() {
$(".content").hide();
$("#show_" + this.id).show();
});
UPDATE II
To show one content div by default, you can add another css class to this div (see updated fiddle)
<div class="content default_content" id="show_content1">Content 1</div>
I added this corresponding class to the CSS file:
.default_content {
display:block;
}