You have to set the form display to “block”, not “inline”… but actually you can use the hidden helper class instead to avoid setting inline styles (and the problems related to this).
1 Like
As I mentioned above there are no devices these days at 300px (apart from an apple watch) so setting max-width media queries at 300px is virtually useless.
However the CSS code you added will work if that break-point is breached. You will need to clarify exactly what isn’t working for you in more detail as the CSS code you added does what you ask of it.
it looks ok, please have a look, thank you, frank
by the way, you mentioned the hidden helper class, would you mind to write me how can I use it in a better way than present code?
also I have more problems. I would need help in menu design matter: I used css order with jquery to change ul order after collapsing I use bs3
thank you
frank
I am sorry for not explaining the 300px width. I was thinking about mobile devices like phones, where the viewport size is realy small. thank you, frank
Just add the class to elements you’d like to hide, and toggle it using JS when a certain button gets clicked… like e.g.
HTML
<div id="foo">
<h1>foo</h1>
<button type="button" class="toggle">
switch to "bar"
</button>
</div>
<div id="bar" class="hidden">
<h1>bar</h1>
<button type="button" class="toggle">
switch to "foo"
</button>
</div>
JS
$('.toggle').click(function () {
$('#foo, #bar').toggleClass('hidden')
})
It’s generally better to apply styles via classes where possible so you have all your styles in the CSS; another viable option would be using jQuery’s .show() and .hide() methods though.
Sorry I’m afraid I don’t understand the question… the flex ordering seems to be working as expected. BTW as this is unrelated to your original question I’d suggest to start a new topic.
I have major problems: menu, modals I presented, buttons: clicking on them I can not handle the click event, please help me, thank you
Sorry Frank but you have to formulate the issues you’re facing more clearly. What do you mean with you can’t handle the click event? Which click event are you even referring to? The modal opens as expected, as does the burger menu, and switching the forms works fine as well (styling issues aside).
Also again, this seems to be completely unrelated to your OP – but you can of course start a new topic in the JS category. Please include the following points in your post though:
- The exact problem you’re trying to solve
- The minimum code (and only the minimum code) required to reproduce the problem
- What you have tried so far / where you don’t understand the docs
We’re always happy to help, but you have to help us help you too.
2 Likes
Happy new year!
I am presenting my experiment, the button with dropdown. clicking on the button, the button color on click not changing, please help me, thank you
frank
I assume you want the button to change colour but you added a color change to a different element instead.
The button can be found here.
.open > .dropdown-toggle.btn-default[aria-expanded=true]{background:red}
Note that is still won’t work because the CSS panel in the codepen is actioned before the html panel and you have css files in the html panel. In codepen the html panel just contains html from inside the body tag. All head linked files should be added via the settings panel in codepen. Otherwise the specificity of the rules is not as expected because following rules of the same specificity win out.
Thank you
I copied and pasted the code zou gave me but still as I click on the button it becomes gray and by releasing becomes red again. can you help me with it ? I could not find documentation in the matter.thank you, frank
I forgot to tell you, I have a test html page with the button.
by the way, I tried copy the script part in the settings but I am not realy understand how, where, also a name is required. I copied the link and pasted there. I think it is a mistake also, can you help me ? thank you
Hi,
I just forked your pen and added the code i gave you and it works ok
I assume you added the code in the wrong place taking into account the comments about the incorrect placement of code in the codepen
You probably added the code before the rules that it needed to override.
I’ll be back tomorrow if you are still stuck or if I missed something. You probably have focus rules to consider also.
Hi
I am posting my code that I changed
thank you frank
You didn’t understand my previous two posts on this subject.
In my previous 2 posts I have mentioned that the middle CSS panel of the codepen gets parsed before the left html panel. That means that any rules you write in the middle panel will be over-ridden by the styles you have in the left panel where there are conflicts with specificty. I mentioned this twice.
Look at my codepen demo and test the button.
Does it work?
What is different in my demo to yours?
You should see that I added the CSS i gave you to the left panel of the codepen to over-ride all the linked files you had added incorrectly into that panel.
Here is where I placed my working code:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.open>.dropdown-toggle.btn-default[aria-expanded=true] {
background: red
}
</style>
</head>
<body>
In your real page you need to ensure that the code I gave you is at the end of all the css files otherwise your existing rules trump it.
For that code to work in the middle panel of that codepen you would need to increase specificity so that your new code has more weight.
e.g.
.dropdown.open > .dropdown-toggle.btn-default[aria-expanded=true]{background:red}
Please ask if these concepts don’t make sense to you and I will try to explain better
to be honest I do not understand the click thing. It looks like a jquery function. I do not understand the > sign neither. I placed the code on the bottom of the mentioned styling, but still on click, the button color is gray, as I release it that becomes red.
I understand that html part is effected first, than the css part, but I test the code in my html file that I call buttondropdown1.html and I placed the code in style on the bottom.
please help me, thank you
As I click first , the button becomes gray, as I click second time dropdown closes, button is red, thank you, frank
Hi,
You only need to click once for it to turn red as shown in my screenshot below from the codepen in this thread.
Have you tried the button in my pen?
You already have jquery adding the class of ‘open’ to the dropdown. The class of open is what we are using to style the button red.
I don’t see that code amended to the codepen you posted.
I think you may be talking about the :focus rules I mentioned earlier and you would need to make sure they are styled similarly if you want the :focus to reflect the clicked state.
Hi
I saved the changing, so it should appear on the bottom in css
thank you, frank
:focus rules would look like this:
.open > .dropdown-toggle.btn-default[aria-expanded=true],
.dropdown > .dropdown-toggle.btn-default:focus{background:red}