I am trying to make a button show and hide a div. I think I almost have it done, but I am missing this very last part.
Here is what I would like to happen: when you click on the red "change template" button, the text changes to "back to page 1". Now click on the red button again. The one that says "back to page 1" - I need that to actually change the div below to the yellow box. Right now it does nothing when you click on the red button the second time.
I would also need the text to change back to "change template". I am thinking what I need is a toggle button.
I have tried to implement multiple toggle buttons I found on stackoverflow already, but it seems my other code might be getting in the way. I made a plunker so its easy to see the problem.
http://plnkr.co/edit/RpqoXXHGBeYaBzIlD8Qb?p=preview
<div class="btn top-menu-button finchbutton red" ng-click="finchange='show';finpage1='';finpage2='';finpage3='';hellotext='hide';goodbyetext='show'">
<span class="btntext" ng-class="hellotext">Change Template</span><span class="btntext" ng-class="goodbyetext">Back To Template</span></div>
<div class="btn top-menu-button finbutton1 orange" ng-click="finpage1='show';finpage2='';finpage3='';finchange='';hellotext='show';goodbyetext='hide'">Page 1</div>
<div class="btn top-menu-button finbutton2 blue" ng-click="finpage2='show';finpage1='';finpage3='';finchange='';hellotext='show';goodbyetext='hide'">Page 2</div>
<div class="btn top-menu-button finbutton3 pink" ng-click="finpage3='show';finpage1='';finpage2='';finchange='';hellotext='show';goodbyetext='hide'">Page 3</div>
As per your code, whenever you click on the button it will always hide "hellotext" and show "goodbyetext"
What you need to do is add is a function which checks for the value of hellotext and/or goodbyetext and toggle it based on values
Hope it helps!!
If I get you right you need a toggle button behavior. This case it will be more naturally to use ng-show/ng-hide
<div ng-app="ngAnimate" ng-init="firstOn=true;">
<div class="btn top-menu-button finchbutton red" ng-click="firstOn = !firstOn;">
<span class="btntext" ng-show="firstOn">Change Template</span><span ng-hide="firstOn" class="btntext">Back To Page 1</span></div>
<div class="btn top-menu-button finbutton1 orange" ng-click="">Page 1</div>
<div class="btn top-menu-button finbutton2 blue" ng-click="">Page 2</div>
<div class="btn top-menu-button finbutton3 pink" ng-click="">Page 3</div>
<br>
<span class="template-panel red" ng-show="!firstOn">Red</span>
<span class="template-panel orange" ng-show="firstOn">Orange</span>
<span class="template-panel blue hide">Blue</span>
<span class="template-panel pink hide">Pink</span>
</div>
You can see the example (I simplified yours a little to have the idea clear) at http://plnkr.co/edit/es5pgmrgsXbm6bP8CSrr
Related
I have what I think is a very basic problem but to which I cannot find the solution. So I have a form in my rails project. I want to create an input field, and two buttons associated with that field so I can add another type of input field.
If I click on the green button, I append another set of the same 3 fields.
<div class="col-md-2">
<%= f.input :select1, collection: #traffic_vault.sort + [["------ Aggregations ------ ", ""]] + #traffic_vault_aggregations.sort, include_blank: false, label: "Select Dimensions (*)", input_html: {class: "remember_timestamp", type: "text" } %>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success" onclick="apply_function(0)">Apply Function</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success" onclick="rename(0)">Rename It</button>
</div>
My problem is that the input field is working fine by taking exactly the col-md that I put there, but the buttons are not, they are taking slightly less space, not exactly col-md-2. So, when adding more fields to the first image, since the buttons are not exactly col-md-2, I get this:
I found out the problem is with the buttons because if I change it to inputs, it is working perfectly.
As we can see, they all have the same space between them, and each of them is col-md-2, so when adding 6 of these fields, you have col-md-12, so anymore fields added will be placed below and so on, but not with the buttons.
What is the problem?
solution: thanks to Siim for the answer. By placing style="width:100%;" button will take all available width. But still, i have a problem where, even if the buttons are col-md-2, like the inputs from before, if i add a 3rd set of fields, its not being placed correctly like in the 3rd image with the inputs, where the new set is placed at the beginning of another row.
Add w-100 class to the button. This tells the button to take up 100% of the available space.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4">
<label>
<input class="form-control">
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-success">
btn
</button>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-success w-100">
btn
</button>
</div>
</div>
</div>
I'm using ejs templates for my webpage, and I'm having layout troubles.
I have a button inside a <div> that's set to display:none as a dropdown, and should show up when the container is hovered over. Instead, the buttons that should be in the dropdown are rendered outside of it and have seemingly no relation to it.
Source ejs file:
<button class="mdc-button mdc-button--raised dropdown" id="clear">
Clear
<div class="mdc-card dropdown-content">
<p>Test</p>
<button>TestButton</button>
</div>
</button>
And the resulting page according to chrome's element viewer:
<button class="mdc-button mdc-button--raised dropdown" id="clear">
Clear
<div class="mdc-card dropdown-content">
<p>Test</p>
</div>
</button>
<button>TestButton</button>
The <p> tag still displays correctly
I don't believe you can put a button element within a button element.
Try it out on MDN here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
This is the example input I put into their live editor. When you inspect the button, you'll get the same output as you've shared in your post.
<button class="favorite styled"
type="button">
<button>Hello</button>
Add to favorites
</button>
Depending on where you need the button, you could try styling the outside or inside element to look like a button as a work around!
I've a sign up form with a really simple markup which doesn't support accessibility. It is basically following:
<div class="responsiveCell responsiveCellSize2">
<div class="alignBottom minSize2">
<div id="cont_id_f_c816dab2f221e8118135e0071b652f51" class="stat_group checkbox-container group group-id-cont_id_f_c816dab2f221e8118135e0071b652f51 has-children">
<input class="floatLeft" id="f_c816dab2f221e8118135e0071b652f51" name="f_c816dab2f221e8118135e0071b652f51" leadfield="" contactfield="" aria-labelledby="label-cont_id_f_c816dab2f221e8118135e0071b652f51" type="checkbox">
<span style="font-family:Arial; font-weight:normal; font-size:16px; color:#A40084;" class="group-title active" id="label-cont_id_f_c816dab2f221e8118135e0071b652f51" role="button" aria-expanded="true" tabindex="0">Economy</span>
</div>
</div>
<div class="clear"> </div>
<div style="alignTop minSize2">
<div id="required_info_f_c816dab2f221e8118135e0071b652f51" class="requiredInfo floatLeft">
</div>
</div>
</div>
<div class="responsiveCell responsiveCellSize1 emptyCell"> </div>
And this pattern occurs about 50 times on the page. This markup already has my extra markup for supporting accessibility.
Markup cannot be changed in the backend.
Now I'm facing an issue where user cannot proceed to next element while pressing tab.
Keyboard navigation stops to first instance of a SPAN element which has following attributes:
role="button"
aria-expanded="true"
tabindex="0"
If I take your code snippet and repeat it several times in a test file, I can successfully tab to each checkbox and each "Economy" label. It's a little unusual to have the label of a checkbox be a button instead of plain text, but there isn't anything invalid about the html. The screen reader announces it just fine.
"Economy check box not checked"
"Economy button expanded"
"Economy2 check box not checked"
"Economy2 button expanded"
"Economy3 check box not checked"
"Economy3 button expanded"
I am attempting to click a button that shares alot of code with other objects within the UI. Here is the code for the button:
<div class="ui green ok inverted button">
<i class="checkmark icon"></i> Yes </div>
Here is the modal the button is a part of:
<div class="actions"> <div class="ui red cancel inverted button">
<i class="remove icon"></i> No </div>
<div class="ui green ok inverted button">
<i class="checkmark icon"></i> Yes </div> <!--anchor--> </div>
Here is an example of what I have tried without success:
By.xpath("//div[text()='green']")
I have also attempted "class" tag locators and other div class text locators and I get "unable to find" every time. The text "green" and "Yes" are the only unique attributes for this particular object.
Try with this:
driver.find_element_by_xpath("//div[#class='actions']//div[#class='ui green ok inverted button']")
//div[contains(#class,"green")]
I was able to work out a CSS Selector for this as well:
By.cssSelector(".odr-disconnect-phone .ui.green.ok.inverted.button"
I am converting my bootstrap 2 site to bootstrap 3 and am a bit stuck on a particular control which is several sets of tab pages controlled by toggle buttons.
Here is an example of my working bs2 code:
http://bootply.com/97187
If I run this code in bs3, I get this:
http://bootply.com/97189
The problem as you will see is that the buttons no longer behave like a group of radio buttons. They toggle individually.
I am currently here:
http://bootply.com/97184
This looks like it works but it doesn't. The grey colour you get when you click on a button is in fact, the "I've now got the focus" colour. Click somewhere else and it goes back to white.
I really need the buttons to toggle as they did in bs2. What small thing am I neglecting here?
Your problem is in here:
<div class="well well-sm">
<span>Set A:</span>
<div class="btn-group">
<button class="btn btn-sm btn-default active" href="#tab1" data-toggle="tab">1</button>
<button class="btn btn-sm btn-default" href="#tab2" data-toggle="tab">2</button>
</div>
<span> Set B:</span>
<div class="btn-group">
<button class="btn btn-sm btn-default" href="#tabA" data-toggle="tab">A</button>
<button class="btn btn-sm btn-default" href="#tabB" data-toggle="tab">B</button>
<button class="btn btn-sm btn-default" href="#tabC" data-toggle="tab">C</button>
</div>
</div>
Adding the class active to the button class for tab1 seemed to prevent the buttons from toggling as you want them to. Simply removing the active class seems to fix the problem.
Demo: http://bootply.com/97199
Ok, I've been playing around quite a bit and got to an acceptable solution.
Unlike the Bootstrap 2 version, it requires a bit of JavaScript.
Here it is: http://bootply.com/97426
The only thing it doesn't do is group the button groups into a single component but this is acceptable, unless someone can find a way to do this as well.
Would be nicer if Bootstrap just worked the same way as V2 in this case.