I'm rather new to programming and stackoverflow has been very useful so far. So sorry if this questions might seem a bit simple to some of you, but I really can't figure this one out:
I'm using Bootstrap to develop my page and created a button which works just fine. Just below that button, I want the Facebook-Like & Twitter Button. This is what I'd like. But interestingly, the FB button always shows on the same line (hence left of the BOOTSTRAP BUTTON (that's how i named it in the code).
BOOTSTRAP BUTTON
<div class="fb-like pull-right" data-href="http://www.hafenkran-zuerich.ch" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
As you see, I've set the button's style to: display: block. But still the Facebook Button is shown on the left. I've even tried to set the BOOTSTRAP BUTTON within a , which are by default block elements. But that didn't solve the problem either. Any ideas?
Try removing the pull-right class from both the Bootstrap button and Facebook button.
That class is causing both elements to be floated right, which is why they are displayed next to one another.
Here is a Fiddle: http://jsfiddle.net/JkD8g/
If however you need to leave the pull-right class on both elements, you can clear the Bootstrap button's float by applying clear:right or clear:both to the Facebook button.
Here's another Fiddle: http://jsfiddle.net/Hudpz/
Related
I have made a button using which must include a picture and text. Here is an example of what I have at the moment
https://jsfiddle.net/9c9dnot9/
<button id="CLPButton" class="DeptButton">
<span>
<table style="width:120%">
<tr>
<th><img src="http://i.imgur.com/vjrbizL.png"></th>
<th>Clinical Lab <br> Platforms</th>
</tr>
</table>
</span>
</button>
The reason I have it set up as a table is to properly adjust the alignment and formatting of the image and text within the button.
I can wrap the image and the text in tags to href to the page I want to link to.... but then you have to click the picture or the text. I want the entire button to be clickable and redirect to the URL.
I have tried every tip and trick I could find on numerous forums but can't seem to get it to work. Things either outright fail or completely screw up the formatting.
The purpose of this is to have a series of buttons for a SharePoint site which link to certain corporate departments.
I am somewhat new at coding in general so the more explanation the better! Thank you
Buttons are not intended to be links. The purpose of a button is to interact with HTML forms (e.g. submitting form data).
If you want to have something that looks like a button and behaves like a link, then I would recommend creating a link and styling it with CSS to look like a button.
In your fiddle, you can actually just change your <button> markup to <a> and it should all work fine.
Updated Fiddle
You can wrap the entire button in an a tag and add the display: block property in order to set its height depending on its content. Then, instead of setting the width on the button, set it on the link and add width: 100% to the button instead, so your link won't take the full width of its container and your button will be more maintenable because you won't have to set the width of the link and the button if you decide to change !
Here is a working fiddle: https://jsfiddle.net/d5tcamok/2/
I'm using Bootstrap and making a simple form with col-sm-4 grid. Now it looks as:
Also when I resize browser width to 507px, C1 and C2 elements slide down to the next line:
And by some reason my dropdown lists look as plain HTML without any styles, despite I add class="selectpicker" to them. I expect them to be like:
I want to get something like this:
This is my fiddle: https://jsfiddle.net/j96vaokc/
What Bootstrap classes should I use?
Thank you in advance.
You have a couple simple problems. First off, the selectpicker class is part of this Bootstrap jQuery plugin, bootstrap-select. You would have to download and include that script and stylesheet. Before that, you would also need to include the jQuery script.
Here's a working fiddle to demonstrate what it'll look like with your code and the included scripts. Go to the 'External Resources' tab on the left to see which scripts/stylesheets I included and in which order:
https://jsfiddle.net/j96vaokc/5/
I added
.dropdown-toggle {
width:60px !important
}
just to make the presentation neater on jsfiddle.
In regards to the wonky placement during window resize, that has a lot to do with your use of the bootstrap grid classes. In my fiddle you'll see that I removed alot of column classes since they weren't necessary. What I'm doing with the CSS is important because I have to override the default bootstrap-select styling for width in order to properly center. Also, in case you missed it I explicitly added a line break between the labels and select options.
I am usually pretty used to find out my own issues when it comes to Bootstrap styling and elements, but this one.. just keeps giving me a headache, and therefore i need to ask you guys here.
I'm overriding some bootstrap styles, like the dropdown (hamburgermenu trigger dropdown) so it goes on top of other elements, rather than moving it downwards..
If you inspect my JSFiddle example after expanding the menu you see that i'm missing the relation to :
.navbar-default .navbar-nav>.active>a
.. the styling is completely gone, and i dont know why.
Here is a link to my JSFiddle
Found the issue.
its here in this HTML
<a id="lnkTeamOverviewMobile" style="color:black" class="visible-sm" href="/EventCalendar" href="javascript:__doPostBack('ctl00$lnkTeamOverviewMobile','')">Eventkalender</a>
you have a class visible-sm which is set to display:none!important in bootstrap.css , If you use this class you are saying that to display this element only when you are in a small device, And Computer Monitors are usually Medium..
Remove the class visible-sm and it must work fine
Working Demo
Having created a simple registration form using Twitter Bootstrap for the UI, I find that I've run into an unexpected problem. You see, some of the form rows are clickable, whereas some of them are not. However, you can tab over to all of the rows and enter information, which then writes correctly to the database. So, my guess is that it's a CSS problem. I haven't written any JavaScript that should cause this problem.
Anyone have any ideas? The page can be found here:
http://loganswalk.com/efc/efc/registration.php
Try adding form-horizontal class to your form:
<form class="form-signin form-horizontal" role="form" action="registration.php" method="post">
Looking at your html I figured that you are using a horizontal form but you are not quite following the bootstrap 3 documentation . And also you are adding your own extra css to effect the left and right margin of the col-md-x classes (which is not a good idea) to make it look ok. Try following the example in the documentation closely and avoid changing the left and right margin or padding of any col-x-y class.
I need a wee bit of help with css formatting on my website. Please see the provided screenshot, which relates to http://www.zerogravpro.com/.
css problem http://zerogravpro.com/temp/zgp_formatting.jpg
Problem #1: My orange-background box in the Testimonial sections goes quite a bit lower than I want it. How do I force it to move up, directly beneath the word "Testimonials"?
Problem #2: See the nice "More" button with the green ball and arrow in it? When I tried to use the same exact style down in my Testimonials box, it shows up as just a boring link. I want it to look the same as the button. I'm guessing that the style only gets invoked when it has the right hierarchy, but how can I fix this without messing up any other styles?
I provided the link to my website, so you can view it in Firebug and see exactly what the styles are, etc. Thanks!!
The Box below Testimonials is so low because there are two <br>-Tags below this line:
<p class="dotline"></p>
Remove them and it will fit.
And for the more button, you should add the class more to this <p>-Tag (untested):
<div id="testimonial6" style="">
<p></p>
</div>
The styles describing the button-like more-element is applied to a paragraph with class="more". However, the paragraph also includes a lot more rules than just the button, so you should try to extract the CSS regarding the button in order to make it reusable.
When it comes to positioning of the lower link, if you want to place it near the header you really need to move it closer to the header in the DOM.
There's an empty p element with the class of 'more' right above the testimonial box. Remove it and the testimonial box will be pulled up. Give it an appropriate margin top, and it will look good.
As for the button, here's my attempt at it -> http://jsfiddle.net/joplomacedo/c3vqh/