I have a form that spans a toggable tab left bootstrap layout. I am using the bootstrap form controls as well. Essentially, I want to have three textareas which can be individually viewed by selecting the associated tab and then on submit, I take all three of the textarea's content to perform an update with.
The code is at http://jsfiddle.net/timburgess/rhNxF/8/
The tabs behave as expected. However, when displaying a textarea in the tab-content, it is spaced quite a bit away from the tab controls. Looking at the html, I can't see anything which would cause this. I could always do a CSS hack but I am wondering if I am missing something here? I have tried setting different span2,span4,etc classes but they make no difference.
Ideally I want to have the textarea next to the tabs and the alert to the right of the textarea.
It's because of:
.form-horizontal .controls {
margin-left: 160px;
}
in bootstrap.css. You would need to overwrite that in your CSS.
Related
I apologize if this question doesn't have the right amount of detail; I'm very new to web development and programming.
I have three buttons situated above a div, and I want to use these buttons to change the appearance of the div. It's hard to explain, so I've made a crude wireframe which I've linked in the rest of this question.
When all three buttons are selected, I want three smaller divs to appear inside my larger div, like shown below
When two of the buttons are pressed, I want it to appear like
When only one button is pressed, I want it to appear like this.
As you can see, I want the pressing (and un-pressing) of a button to toggle the presence of the smaller divs, and if possible, for the smaller divs to be resized depending on how many buttons have been selected (i.e., when two buttons are selected, the two small divs are each half the size of the larger div, etc.). I would really love if this could be done in pure HTML, without any JavaScript or libraries like jQuery.
I feel like this is a common thing to have built, as I am certain I have seen something similar before. However, I can't find any tutorials that quite match what I am looking for, and I couldn't even find existing examples (hence me making linking those pictures). I would greatly appreciate any help, especially if you could point me to some source code or to some examples.
It's possible to achieve in CSS using some tricks like this: https://codeburst.io/awesome-checkbox-and-radio-button-css-hacks-a8c24fb15a95
Actually, your "buttons" seem to act more like radio/checkboxes as they should remain "active"? Unless you meant they have to remain pressed, but in that case it's impossible to have them all pressed at the same time ;-)
Unfortunately, you can't achieve that purely in HTML.
Also keep in mind that a CSS solution will not be great from an accessibility point of view, because you need to style checkboxes as buttons, and there's not way to modify attributes like aria-haspopup or aria-expanded to tell screen readers when the content is changed. You could use an aria-live area as a fallback but it's always better to link the button with the content is actually "opens".
Of course you can use both to support as many devices as possible.
UPDATE: to achieve that in Javascript, you would need checkboxes too, or store the state of your buttons (one click sets the state to "clicked", another one unsets it). Each button would add or remove a class on the containing DIV. Then you can use CSS to display or hide, and also set the size of your secondary divs. Something like:
.bigdiv > div {
display: none;
}
.bigdiv.button1 > div:nth-child(1) {
display: block
}
.bigdiv.button2 > div:nth-child(2) {
display: block
}
.bigdiv.button3 > div:nth-child(3) {
display: block
}
to set the sizes, you would have to rely on the combination of buttons:
.bigdiv.button1:not(.button2, .button3) > div {
width: size when only button 1 is pressed
}
.bigdiv.button1.button2:not(.button3) > div {
width: size when only button 1 and 2 are pressed
}
.bigdiv.button1.button2.button3 > div {
width: size when button 1,2 and 3 are pressed
}
Of course you'd have to cater for all the combinations of buttons, or simplifiy the logic, count the number of button pressed, and apply extra classes to .bigdiv to indicate how many are pressed, so you can handle that easily in CSS.
As you can see, there's tons of different solutions to handle that, but a mix of JS and CSS is the best as you decouple the logic from the presentation and all your JS does is adding/removing classes.
While using Bootstrap I'm having some trouble setting a different width for a form's label and input.
Actually, I can do what I want, but I think there's probably a better way. My current "solution" is to add a new div.row and then an additional div.form-group for making the input smaller, but it adds additional unwanted markup and messes with other stuff (form-validation indicators).
Any good solution for what I'm looking for?
Please take a look as this JSFiddle, to better understand my problem/goal. The 1st section includes the base case, the 2nd section includes my current solution, which I don't really like.
In Firefox extra spacing is added around the text value (not just vertical space as would be the case from line-height, but horizontal as well).
Chrome, Opera (has a slightly different line-height issue), and even IE all render submit buttons without adding any extra space.
http://jsfiddle.net/jswartwood/aFCwj/
If you open firebug and hover over the <a> and <input> respectively, you can see that it is not padding, etc.
From the sound of the bug tracker it seems that Firefox puts a "block" inside these form elements?!?! If this is true, why? This makes visual button size very difficult to keep consistent.
After digging through the Firefox source code (layout/style/forms.css) I found ::-moz-focus-inner to be the shadow selector I needed.
I still disagree with mozilla's choice of forcing line-height, but that is another story; in the mean time I may be able to normalize all browsers by setting line-height: normal.
input::-moz-focus-inner {
padding: 0;
border: 0;
}
A working example: http://jsfiddle.net/jswartwood/aFCwj/14/
To answer your original question: I do not believe CSS can successfully style the input submit element perfectly consistent across all browsers.
Every browser renders these elements differently. Explorer's buttons are in keeping with Windows. Safari's buttons are in keeping with Mac styling. Firefox, Chrome, Opera, etc. are going to do their own thing.
When it's important enough for your design that the submit button look the same across all browsers, you would create a custom graphic and make that your button.
Simply replace your submit button code with the following...
<input type="image" src="myButtonImage.jpg" alt="" />
You can optionally use CSS Sprites or JavaScript to swap button images on hover, click, etc.
A button doesn't have to be a button. You can use any other element, like a in your example, or even better span. And bind it click event to submit your form.
Is it possible to get a textbox ("input" with "type=text") to act like a textarea through CSS alone?
I can set the height and width, obviously, but I can't get it to wrap like a text area nor vertically align the contents like one.
I have a situation where I can't change the HTML of the page, but I can alter the CSS. My users want textareas where they just have textboxes, and I'm hoping I can pull it off with CSS alone.
I've tried about every combination of "white-space" and "vertical-align."
No. You would need some JavaScript as well to change the browser functions. For instance when you hit the enter key in a textbox it submits the form, where as in a text area it will add a new line.
Things like that can't be controlled by CSS to my knowledge.
I want to practive, and even best-practice, with Html+JS+CSS.
I use a one page client-only Sudoku page.
My Sudoku markup is basically a <table>, with <td>.
(I'm open to suggestions to improve this).
My requirements :
Have a cell under focus (the keyboard notion of focus) (highlighed with css to a yellow background)
Navigate through cells with arrow keys (plus Home etc).
type-in an integer value sets that value to the currently focused cell
I use an input button inside each cell.
The Javascript works fine.
My only problem is with the display.
When a cell has the focus, it's highlighted display doesn't cover the whole TD, rather only the visual space included in the input button. I have some space around the button that isn't 'yellow'.
I don't think I could go up in the CSS selection, to select the parent of the input, could I ? Such as :
input:focus '?? how to go up ??' td { background-color:yellow;
I tried a few tricks, like having always 5 characters in each button display (5 spaces when empty, changing the middle character when set), but nothing is visually satisfying.
Even worse, it is clearly against best-practices to alter the content for the sake of visualizing. That's what the MVC distinction between Html/Css/Js is for !
I already searched this site for answer, I found close but distinct questions and answer.
I'm hoping someone could help improve my page ... and my markup skill :-)
It is not possible to construct a css selector which matches a parent node dependent on a (pseudo-)class of child node.
Basically you have two options to choose from:
Try to fill the td with the input completely using height and width rules in your css.
Set 'focused' and 'unfocused' class on your tds with javascript using the onfocus and onblur events of the inputs.
Could you not use a dash of jQuery to set a .focused class and then apply some style to it?